JavaScript自动复制文字到剪贴板

本来是想改oss-browser使用中的一个问题:
每次写markdown,上传单个图片,要获取图片的URL,要经过“选中刚上传的图片”->“点击更多”->"获取地址"->“等待弹出窗口”->“点击复制地址”五个步骤,真的不胜其烦。

所以在上传成功后,判断是单个文件,那么自动复制文件路径到剪贴板要方便很多。

// 自动复制到剪贴板
var _self = document.getElementById('copy');
if(_self!==null) {
  var parent = _self.parentElement;
  if(parent===document.body)
     parent.removeChild(_self);
}
var selection = window.getSelection();
var range = document.createRange();
var newDiv = document.createElement('div');
newDiv.id='copy';
newDiv.style.display='none';
document.body.appendChild(newDiv);
newDiv.innerHTML='要复制的文本内容';
range.selectNode(document.querySelector('#copy'));
selection.addRange(range);
document.execCommand('copy');

但是限于Chromium浏览器的安全策略, 自动复制得与用户交互。

找到Electron有clipboard,很方便耶。第一次接触开发这个oss-broswer跨平台应用相关的技术栈......

const { clipboard } = require('electron')
clipboard.writeText('Example String')

TyteScript.js-速学摘录

注明:教程来自菜鸟教程。尊重知识传播的版权,从我做起,从注明做起!


什么是 TypeScript?

TypeScript 是一种由微软开发的自由和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法。

并不是TypeScript编译有错误,JavaScript就无法运行了!

语法特性

  • 类 Classes
  • 接口 Interfaces
  • 模块 Modules
  • 类型注解 Type annotations
  • 编译时类型检查 Compile time type checking
  • Arrow 函数 (类似 C# 的 Lambda 表达式

TypeScript 安装

我们可以通过以下两种方式来安装 TypeScript:

  • 通过 Node.js 包管理器 (npm)
  • 通过与 Visual Studio 2012 继承的 MSI. (Click here to download)

我从npm安装,之前安装了npm,cnpm。

cnpm install -g typescript

安装完成后我们就可以使用 TypeScript 编译器,名称叫 tsc,可将编译结果生成 js 文件。

要编译 TypeScript 文件,可使用如下命令:

文件后缀名.ts

tsc filename.ts

一旦编译成功,就会在相同目录下生成一个同名 js 文件,你也可以通过命令参数来修改默认的输出名称。

TypeScript 1.5 起支持 ES6

编辑器我使用的Atom,安装TypeScript的插件

apm install atom-typescript

参考atom-typescript,好像有其他依赖。


然后就是菜鸟教程的Demo,试试


类型批注

**TypeScript 通过类型批注提供静态类型以在编译时启动类型检查。这是可选的,而且可以被忽略而使用 JavaScript 常规的动态类型。

对于基本类型的批注是number, bool和string。而弱或动态类型的结构则是any类型。

当类型没有给出时,TypeScript编译器利用类型推断以推断类型。如果由于缺乏声明,没有类型可以被推断出,那么它就会默认为是动态的any类型。

笔记:这里提到了TypeScript编译器的类型批注、类型推断功能。

接口

示例

interface Shape {
    name: string;
    width: number;
    height: number;
    color?: string;
}

接口可以作为一个类型批注。

function area(shape : Shape) {
    // ……
}

color?: string; 表示在实例化的时候,可以缺省。

箭头函数表达式(lambda表达式)

lambda表达式()=>{something}或()=>something 相当于js中的函数,它的好处是可以自动将函数中的this附加到上下文中

怎么理解自动将函数中的this附加到上下文中呢?

这里教程的例子,我得粘过来了。

//……
var shape = {
    name: "rectangle",
    popup: function() {
        console.log('This inside popup(): ' + this.name);
        setTimeout(function() {
            console.log('This inside setTimeout(): ' + this.name);
            console.log("I'm a " + this.name + "!");
        }, 3000);
    }
};
shape.popup();

输出结果:

This inside popup(): rectangle
This inside setTimeout():
I'm a !

接下来我们使用 TypeScript 的箭头函数。把 function() 替换为 () =>,修改如下:

var shape = {
    name: "rectangle",
    popup: function() {
        console.log('This inside popup(): ' + this.name);
        setTimeout( () => {
            console.log('This inside setTimeout(): ' + this.name);
            console.log("I'm a " + this.name + "!");
        }, 3000);
    }
};
shape.popup();

输出结果this.name就是rectangle了。

This inside popup(): rectangle
This inside setTimeout(): rectangle
I'm a rectangle!

有关javaScript中this的用法,参见Javascript的this用法

有意思的是,编译出的js代码:

// lambda 表达式
var shape = {
    name: "rectangle",
    popup: function () {
        var _this = this;
        console.log('This inside popup(): ' + this.name);
        // setTimeout(function() {
        //     console.log('This inside setTimeout(): ' + this.name);
        //     console.log("I'm a " + this.name + "!");
        // }, 3000);
        setTimeout(function () {
            console.log('This inside setTimeout(): ' + _this.name);
            console.log("I'm a " + _this.name + "!");
        }, 3000);
    }
};
shape.popup();

我们可以看到一行 var _this = this;,_this 在 setTimeout() 的回调函数引用了 name 属性。

TypeScript支持集成了可选的类型批注支持的ECMAScript 6的类

同样也有public 和 private 访问修饰符。Public 成员可以在任何地方访问, private 成员只允许在类中访问。

类可以继承。

如何在js文件中动态加载另一个js文件

第一种、直接document.write

<script language="javascript">
    document.write("<script src='test.js'><\/script>");
</script>

第二种、动态改变已有script的src属性

<script src='' id="s1"></script>
<script language="javascript">
    s1.src="test.js"
</script>

第三种、动态创建script元素

<script>
    var oHead = document.getElementsByTagName('HEAD').item(0);
    var oScript= document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src="test.js";
    oHead.appendChild( oScript);
</script>