Clipboard.js源码阅读

2019-11-08 本文已影响0人 ceido

前言

我们复制浏览器的文本，需要两个步骤：
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' :