前言
我们复制浏览器的文本，需要两个步骤：
1、鼠标选中文本
2、ctrl + v 或者鼠标右键复制
（1）需求
如何实现点击按钮便复制某段文本？如图，当点击copy按钮时，复制"hello"到剪贴板。
image.png
（2）clipboard
clipboard是一个轻量的库，实现将文本复制到剪贴板。它不需要数十个步骤来配置或加载数百KB文件。最重要的是，它不依赖Flash或任何臃肿的框架。这就是clipboard.js存在的原因。
用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function-target</title>
</head>
<body>
<button class="btn">Copy</button>
<div>hello</div>
<script src="../dist/clipboard.min.js"></script>
<script>
var clipboard = new ClipboardJS('.btn', {
target: function() {
return document.querySelector('div');
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
（3）源码
从上面的例子出发，让我们看看clipboard是如何实现复制的。以下是clipboard的目录结构，主要代码在src下。
image.png
1、resolveOptions和listenClick
image.png
首先new ClipboardJS()进行实例化，看到Clipboard的构造函数，在这个例子中，trigger为'.btn'，options为
{
target: function() {
return document.querySelector('div');
}
}
resolveOptions主要初始化一下参数。
listenClick方法主要为'.btn'的click事件绑定函数。
image.png
2、clipboard-action.js
image.png
在clipboard-action.js中，首先同样进行初始化，在initSelection方法中，在这个例子中走到了 else if逻辑，因为我们的options只提供了target参数，没有提供text参数。selectTarget函数如下：
import select from 'select';
selectTarget() {
this.selectedText = select(this.target);
this.copyText();
}
3、select
image.png
select组件只有一个函数，可概括为：选中元素中的文本。其中使用了一些不常用的API，但在MDN上都查得到。
4、copyText
回到selectTarget方法，在选中文本后，调用了copyText方法：
copyText() {
let succeeded;
try {
succeeded = document.execCommand(this.action);
}
catch (err) {
succeeded = false;
}
this.handleResult(succeeded);
}
我们看到关键的一句: document.execCommand(this.action);，其中action参数我们并没有传递，作者默认设置为'copy' :
image.png
这一句便模拟了用户的复制操作！我们可以随便打开一下网页，手动选中文本，然后打开控制台运行，便可以看到文本被复制到剪贴板了。
image.png
在MDN上文档说道，只有在designMode下才可以使用execCommand，但我输出designMode发现并没有开启，但也可以复制成功。
image.png
5、selectFake
在initSelection方法中，当我们传入text参数时，将走到selectFake函数。
image.png
这个函数与selectTarget相比，多了一些步骤：
因为没有现成的元素，所以创建一个不可见的textarea、将text写入textarea。后续就同selectTarget一样了！
至此我们可以看到，clipboard做的就是开头说的两步 1、选中文本2、复制。精小美的库啊~~
总结
多阅读源码~
网友评论