论zeroclipboard的各种爽翻天用法

基于一种普度众生的心理，决定把这次坑了我两天的小插件zeroclipboard（以下简称为“这个他喵的坑了我两天害我被公司的小弟鄙视说另一个小弟都能轻易搞定你却不行哈哈哈我擦嘞的插件”）使用心得分享一下，希望大家不要被同样的坑坑到。

本文主要涉及：

1. 插件的基本原理
2. 普通的插件用法与注意事项
3. 文艺的seajs引用方法与注意事项
4. 2B的PO主被坑的教训

对于本插件的使用一定要在服务器环境下才可以生效，本地或远程都可以

如果你是个有追（zi4）求（lian4）的人，完全没有COPY过，那么恭喜你，已经完成一半了，因为有部分代码表面上是可以跑起来，但实际使用就不是那么一回事了。还有，本文是跟大家分享如何优雅地实现这个功能，你要是牛B到写个200行的代码才跑通…………请珍惜自己的双手~~~~

使用这种知名插件当然是要去github上看文档咯~~~：2.X的使用文档　1.X的使用文档　（文中均以1.x为例，2.x中除事件名与个别小细节外基本一致）

插件的基本原理：

就是将要复制的内容设置为flash插件的数据，再通过flash的接口复制到剪贴板中。这样做最大的好处就是照顾到页面本身的兼容性，HTML5中虽然提供了读取剪贴板的方法但写入内容还不支持（至少我是没成功过）。但是这样做有个安全问题，flash插件可以随时访问你的剪贴板内容，如果你刚好复制了你的敏感信息（比如密码），又访问了这个网页，那么它就可以轻易地获取你的数据并传到他自己的服务器上，所以之后的版本中特意加入了一定要用户点击相应的swf文件才可以获取信息的限制，所以就要求引入的swf插件要覆盖用户点击的部分，带来的问题就是会影响hover伪类、样式和相应事件的触发，当然，在插件中会对此进行对应的弥补设置的

插件的使用主要包括三个部分：插件自身的JS文件、基于flash的swf插件、你写的控制代码（这TM不是废话吗）

普通应用版：

声明插件的实例同时把元素节点作为参数传进去，就可以使用了。

var client = new ZeroClipboard($("#my-button"),{
    swfPath: "path/to/ZeroClipboard.swf"
});

配置参数中可选项很多，详细说明请点击

主要参数有以下几点：

swfPath/moviePath指定引入swf文件的位置，虽然默认会查找同目录下的文件但还是建议写一下比较好。

trustedDomains可信域的设置，这个后面还会讲到。

hoverClass和activeClass用来解决上文提到的覆盖的影响，如果当前元素有hover伪类的效果，要重定义在配置文件中，如

{ hoverClass: /*你重定义后的名字*/}

debug: true  输出调试信息。

当然在DOM中也要有相应的元素（本例中是id为”my-button”的button）来触发事件

<button id="my-button" data-clipboard-text="Copy me!">Copy to Clipboard</button>

其中 data-clipboard-text就是最基础的一种用法，如果元素没有用后续的方法添加事件的话就会复制代码中”Copy me!”这段到剪贴板中，适用于复制固定内容，无格式，短小。比如某些招商页面的电话等信息。

如果你想让复制功能对应网页上的某段内容就要用到另一个属性：data-clipboard-target

<button id="my-button_text" data-clipboard-target="clipboard_text">Copy to Clipboard</button>
<button id="my-button_textarea" data-clipboard-target="clipboard_textarea">Copy to Clipboard</button>

<input type="text" id="clipboard_text" value="Clipboard Text"/>
<textarea id="clipboard_textarea">Copy This!</textarea>

这样的话DOM节点就会复制指定ID的内容或值了，注意是ID名哦。这种情况主要适用于页面上单一 内容的复制，比如生成短链接后的复制这种。虽然可以自己修改要复制的内容了，但是针对页面多个节点就无能为力了。

最后是重头戏，针对页面上多节点统一绑定事件复制指定结构选择器的内容：

      var client = new ZeroClipboard( $('.clip_button') );

      client.on( 'load', function(client) {
        // alert( "movie is loaded" );

        client.on( 'datarequested', function(client) {
          client.setText(this.innerHTML);
        } );

        client.on( 'complete', function(client, args) {
          alert("Copied text to clipboard: " + args.text );
        } );
      } );

      client.on( 'wrongflash noflash', function() {
        ZeroClipboard.destroy();
      } );

其中红名为插件定义的事件名，重点在datarequested事件中，可以使用当前节点的选择器复制指定内容，比如可以改成：client.setText($(this).prev().text()); 类似这种的选择。

文艺（SeaJS）应用版：

内容相同，只不过是用seajs引用模块的方式来调用插件

seajs.use(['gallery/zeroclipboard/1.3.5/zeroclipboard'], function(ZeroClipboard) {}

支付宝的Arale库中目前仅支持到1.3.5版，其它的库中自行参照格式调用，需要注意的是在swf文件引入的时候可能会因为文件位置造成跨域通信的安全禁止，这时要在实例化中配置trustedDomain免于载入失败

var client = new ZeroClipboard($(".clipbord"), {
  moviePath: "http://static.alipayobjects.com/gallery/zeroclipboard/1.3.5/ZeroClipboard.swf",
  trustedDomains: ['*']
});

经历后的教训：

1. 不要随便copy别人的代码来用，更不要没有效果就放弃并抱怨
2. 即使是作者在github上的demo也有可能因为种种原因出现偏差，要记得关注FAQ并主动提问
3. 作者在开发插件时应用的设计思想很值得学习，提供多种调用方式，由简至繁，保证初级用户的使用方便和高级用户的自定义需要。在更新版本时也很好地兼容了老版的使用方法，并作出隐性提示。
4. 代码会过期，会失效，但设计思想理念永存，好好学习！

如果对你有帮助并节省了你的时间~不胜荣幸~多谢支持~

支持作者