用clipboard.js复制粘贴数据，来轻松地管理你的文件

2023-10-29 22:30:33

clipboard.js源码解析

clipboard.js是一个开源的javascript库，托管在GitHub上。该库的代码非常简单，只有几百行。下面我们将对clipboard.js的源码进行解析。

(function(global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ClipboardJS = factory());
}(this, (function() { 'use strict';

clipboard.js是一个IIFE（立即执行函数表达式），它将代码包装在一个函数中，然后立即执行。这可以防止库中的变量和函数污染全局作用域。

var DOCUMENT = document;
var PENDING = 'pending';
var RESOLVED = 'resolved';
var REJECTED = 'rejected';
var SUPPORTED_EVENTS = ['copy', 'cut', 'paste', 'drop'];
var IS_SUPPORTED = !!DOCUMENT.queryCommandSupported;
var EXECCOMMAND_SUPPORTED = IS_SUPPORTED && !!DOCUMENT.execCommand;
var DATA_ATTR = 'data-clipboard-text';
var TARGET_ATTR = 'data-clipboard-target';

clipboard.js定义了一些常量，这些常量用于库的内部实现。例如，SUPPORTED_EVENTS常量定义了库支持的事件，IS_SUPPORTED常量定义了库是否支持execCommand方法。

var ClipboardJS = function(elements, options) {
  if (!elements) {
    throw new Error('No elements provided');
  }
  if (!ClipboardJS.isSupported()) {
    throw new Error('This browser does not support clipboard commands.');
  }
  this.resolveOptions(options);
  this.delegateClick(elements);
};

ClipboardJS是一个构造函数，它接受两个参数：elements和options。elements参数指定了要为其添加复制粘贴功能的元素，options参数指定了库的选项。如果elements参数为空，则抛出一个错误。如果库不支持execCommand方法，则也抛出一个错误。

ClipboardJS.prototype.resolveOptions = function(options) {
  this.action = typeof options === 'string' ? options : 'copy';
  this.target = typeof options === 'object' ? options.target : undefined;
  this.text = typeof options === 'object' ? options.text : undefined;
  this.container = typeof options === 'object' ? options.container : undefined;
  this.trigger = typeof options === 'object' ? options.trigger : undefined;
  this.selectedText = typeof options === 'object' ? options.selectedText : undefined;

ClipboardJS.prototype.resolveOptions方法解析库的选项。如果options参数是字符串，则将其赋值给action属性。如果options参数是对象，则将其target、text、container、trigger和selectedText属性分别赋值给相应的属性。

ClipboardJS.prototype.delegateClick = function(elements) {
  var _this = this;
  SUPPORTED_EVENTS.forEach(function(event) {
    elements.forEach(function(element) {
      element.addEventListener(event, function(e) {
        return _this.initialize(e);
      });
    });
  });
};

ClipboardJS.prototype.delegateClick方法为指定的元素添加事件监听器。当这些元素被点击时，initialize方法将被调用。

ClipboardJS.prototype.initialize = function(e) {
  this.clipboardAction(e);
};

ClipboardJS.prototype.initialize方法调用clipboardAction方法。clipboardAction方法负责复制或粘贴数据。

clipboard.js实践案例

下面我们提供一个实践案例，演示如何使用clipboard.js复制和粘贴数据。

<!DOCTYPE html>
<html>
<head>
  
  <script src="clipboard.min.js"></script>
</head>
<body>
  <h1>复制和粘贴数据</h1>
  <p>
    <button id="copy-button" data-clipboard-text="Hello world!">复制</button>
    <button id="paste-button" data-clipboard-target="#target">粘贴</button>
  </p>
  <div id="target"></div>
</body>
</html>