論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. 代碼會過期，會失效，但設計思想理念永存，好好學習！

 

如果對你有幫助並節省了你的時間~不勝榮幸~多謝支持~

支持作者