隨著越來越多的開發人員開始開發jQuery插件，所以我們隨時都有可能遇到很爛的插件開發“成果”。沒有在線演示，沒有文檔，或者插件沒有遵循最佳編碼實 踐。但是對于閱讀這篇文章的朋友來說，你很幸運，因為這里我們將介紹14個jQuery插件開發中最容易犯的錯誤。希望大家會覺得有幫助！

隨著jQuery的廣泛使用，每天都出現很多新的插件 ，但是問題在于很多插件真不怎么樣。

以前我們介紹過 10個幫助你創建超棒jQuery插件的小技巧 ，在今天這篇文章中，我們將專注于jQuery插件的最佳開發實踐，希望對于大家有幫助，如果你喜歡我們的文章，請給我們留言，謝謝！

錯誤一：不是在開發一個jQuery插件

總的來說，這里有很多大家接受的jQuery開發的模式。 如果你沒有遵從這些設計模式，你開發的插件有可能很“垃圾“。看看如下最常用的模式：

      (
      
        function
      
      
        ($, window, undefined){
$.fn.myPlugin 
      
      = 
      
        function
      
      
        (opts) {
   
      
      
        var
      
       defaults =
      
         {
      
      
      
        //
      
      
         設置你的選項缺省值
      
      
           }
 
  
      
      
        //
      
      
         使用用戶的選項缺省值來擴展缺省選項
      
      
        var
      
       options = $.extend(defaults, opts ||
      
         {});
 
   
      
      
        return
      
      
        this
      
      .each(
      
        function
      
      (){ 
      
        //
      
      
         jQuery鏈式操作
      
      
        //
      
      
         插件的相關內容
      
      
           });
})(jQuery, window);
      
    

首先呢，我們創建了一個自調用的匿名方法來將我們插件中的參數和外部全局參數隔離開。我們傳遞$，window，和undefined三個變量參數。這些變 量和自調用的方法將和jQuery和window一起調用。對于undefined來說沒有傳遞任何值，因此如果我們決定在插件中使用undefined 關鍵字的話，其實”undefined“并沒有被定義。

使用這種方法可以有效的保證外部腳本被隔離而無法給undefined變量賦值，例如，將無法賦值undefined為true。

$被作為jQuery來傳遞；我們使用這種方法來保證在匿名方法的外部，$仍舊可以參考為其它內容，例如，prototype。

傳遞變量給全局性訪問的window對象能允許更多經過壓縮最小化(minification)處理的代碼（當然，壓縮是應該做的）

下 一步，我們將使用jQuery插件的模式, $.fn.PluginName。這用來登記你的插件使得其能被應用到 $(selector).method()格式中。簡單使用new來擴展jQuery的prototype。如果你想創建一個jQuery的方法的話，只 需要直接添加如下代碼：

      $.PluginName = 
      
        function
      
      
        (options){
   
      
      
        //
      
      
         擴展選項，執行插件功能
      
      
}
    

這種類型的插件不可以執行鏈式操作，因為方法在jQuery對象中定義為屬性，不能返回jQuery對象，例如如下代碼：

      $.splitInHalf = 
      
        function
      
      
        (stringToSplit){
   
      
      
        var
      
       length =
      
         stringToSplit.length;
   
      
      
        var
      
       stringArray = stringToSplit.split(stringToSplit[Math.floor(length/2)]);
   
      
        return
      
      
         stringArray;
}
      
    

這個我們返回了一個字符串數組。直接返回array比較合理，因為這有可能是用戶需要的返回類型（當然如果需要的話，直接使用jQuery對象來封裝也很容易）。對比以上代碼，我們看看如下代碼：

      $.getOddEls = 
      
        function
      
      (jQcollection){ 
      
        //

      
      
        return
      
       jQcollection.filter(
      
        function
      
      
        (index){
      
      
      
        var
      
       i = index+1
      
        ;
      
      
      
        return
      
       (index % 2 != 0
      
        );
   });
}
      
    

在這個例子中，我們得到奇數數值，用戶可能需要jQuery對象返回$.getOddEls；因此我們返回了 filter 方法，這個方法通過傳遞的方法返回了jQuery的collection定義。一個比較好的原則是封轉返回的元素到一個jQuery方法中，特別是如果用戶希望它可以進行鏈式操作；如果你返回數組，字符串，數據，方法或者其它類型，則不需要封裝。

錯誤二：不書寫文檔或者不正確的書寫文檔來注釋你的代碼

無可厚非，對于發布代碼來說最重要的是書寫很好的文檔。這是幫助你的使用者更好的了解代碼功能及其能夠實現功能的而一個很好的方式。用戶可不愿意花大量時間研究你的代碼輸入輸出。

文檔書寫沒有什么強制的規則，理論來說你給的文檔越多，肯定越好。

這個過程包括了代碼內部注釋說明及其外部的使用API文檔或者應用演示。

錯誤三：沒有提供足夠的靈活性和自定義

最受歡迎的插件提供了對于參數（即用戶使用的插件選項）完整的訪問。他們可以提供很多不同的配置，這樣可以應用到不同的場景中。例如，我們這里看看一個簡單幻燈插件。可以控制的選項包括了速度，類型和動畫的延遲。

比較好的實踐是提供用戶訪問class或者ID名稱。更好的話，你可能想調用幻燈過渡后的callback方法，或者是幻燈恢復到最初的狀態的callback。

你需要考慮所有插件的可能使用場景和需求。

這里我們在看看另外一個例子：一個調用API的插件應該提供對于返回對象的訪問。看看如下這個例子：

      $.fn.getFlickr = 
      
        function
      
      
        (opts) {
   
      
      
        return
      
      
        this
      
      .each(
      
        function
      
      (){ 
      
        //
      
      
         jQuery chainability
      
      
        var
      
       defaults = { 
      
        //
      
      
         setting your default options
      
      
         cb : 
      
        function
      
      
        (data){},
         flickrUrl : 
      
      
        //
      
      
         some default value for an API call
      
      
              }
       
      
      
        //
      
      
         extend the options from defaults with user's options
      
      
        var
      
       options = $.extend(defaults, opts ||
      
         {});
 
       
      
      
        //
      
      
         call the async function and then call the callback
      
      
        //
      
      
         passing in the api object that was returned
      
      
       $.ajax(flickrUrl, 
      
        function
      
      
        (dataReturned){
         options.cb.call(
      
      
        this
      
      
        , dataReturned);
      });
   });
}
      
    

這個插件允許我們執行如下代碼行：

    $(selector).getFlickr(function(fdata){ // flickr data is in the fdata object });
  

另 外一個執行類似公開化的方法是提供一個”hooks"作為選項。在jQuery1.7.1及其以上版本中，我們可以在插件調用后使 用.on(eventName, function(){})方法以便分開自己獨立的方法行為。例如，使用上面的插件，我們可以修改代碼如下：

      $.fn.getFlickr = 
      
        function
      
      
        (opts) {
   
      
      
        return
      
      
        this
      
      .each(
      
        function
      
      
        (i,el){
      
      
      
        var
      
       $
      
        this
      
       =
      
         el;
      
      
      
        var
      
       defaults = { 
      
        //
      
      
         setting your default options
      
      
         flickrUrl : "http://someurl.com" 
      
        //
      
      
         some default value for an API call
      
      
              }
       
      
      
        var
      
       options = $.extend(defaults, opts ||
      
         {});
 
       
      
      
        //
      
      
         call the async function and then call the callback
      
      
        //
      
      
         passing in the api object that was returned
      
      
       $.ajax(flickrUrl, 
      
        function
      
      
        (dataReturned){
         
      
      
        //
      
      
         do some stuff
      
      
         $
      
        this
      
      .trigger("callback"
      
        , dataReturned);
      }).error(
      
      
        function
      
      
        (){
            $
      
      
        this
      
      .trigger("error"
      
        , dataReturned);
         });
   });
}
      
    

這樣允許我們調用getFilckr插件并且鏈式其它行為的處理。

      $(selector).getFlickr(opts).on("callback", 
      
        function
      
      (data){ 
      
        //
      
      
         do stuff }).on("error", function(){ // handle an error });
      
    

你可以看到提供這種靈活方式是絕對重要的，插件擁復雜的操作越多，那么控制就會越復雜。

錯誤四：要求太多的配置

上面的錯誤三我們介紹了越復雜的插件，要求控制就越復雜。一個很大的錯誤在于，插件創建了太多的選項。例如，對于UI插件來說比較理想的方式是不設置缺省的選項。

      $(selector).myPlugin();
    

當然，有時候這不太現實（例如，插件中用戶需要指定RSS Feed來源）。在這里例子中，你應該盡量為用戶設置初始的選項。

例如你開發一個需要從Tweet取得內容的插件。你可以要求用戶輸入一個用戶名，如下：

      $(selector).fetchTweets("gbin1"); 
    

你可以提供缺省的展示方法，例如，feed個數，顯示在<p>標簽中。大多數的開發人員都希望是這樣的。

錯誤五：將外部的CSS和行內的CSS混淆

如 果你處理UI的話，不可避免的需要在你的插件中包含CSS文件。一般來說，這是一個可接受的解決方式。多數的插件都帶有圖片和CSS。但是不要忘了錯誤 二，文檔需要包含如何使用這些CSS和圖片的內容。開發人員可沒有時間來搜索你的代碼來找到答案（況且，很多人可能并不會真正開發jQuery代碼，特別 是在國內）。

無論如何，我們都需要保證插件能正常工作。

對于插件來說，最好的方式是使用基于Class/ID的CSS樣式或者行內注入CSS（使用插件選項）。行內CSS會覆蓋外部CSS，但是混合使用倆者會非常不舒服。開發人員可能會花一定時間來搞清楚為什么代碼中的樣式不好使。所以最好你自己決策如何處理這些問題。

作為一個規則來說，行內的CSS非常不好 - 除非它影響非常小，不會干擾外部的CSS樣式定義。

錯誤六：沒有提供任何在線演示

這絕對是很惡心的一件事，開發人員必須自己動手才能看到效果，往往發現不是自己期望的那樣。其實作為插件開發來說，添加一些在線演示還是很簡單的，如下是一些不錯的演示模板：

A good template for examples:

• A “hello world” example – usually the plugin call with the minimum configuration/options passed, and it’s accompanying html/css
• A few more involved examples – usually with examples of full functionality of multiple options
• An integration example – if someone might use another plugin with your plugin, here is where you can show how to do that. (This gets you bonus points in the open-source development world, too. Kudos.)

錯誤七：代碼沒有匹配正確的jQuery版本

jQuery 和其它的代碼類庫類似，也有不同的版本。大多數的方法即使被遺棄也會被保留。但是新的方法會被添加。一個非常典型的例子是.on方法。它是jQuery新 版本中事件處理的一個全新的all-in-one解決方案。如果你書寫使用到.on()方法的插件的話，需要使用到jQuery1.6或者以上版本。

一 個比較好的習慣是在你的文檔中說明，你要求的jQuery版本，例如，1.7或者以上，作為我個人來說，在使用jQuery插件中也有類似不愉快的體驗。 所以為了讓更多的開發人員喜歡你的插件，一定要很好的說明。并且提供一個不再支持的舊版本下載也是一個相當不錯的方法。

問題。

鼓勵大家使用新的jQuery類庫，但是不要讓你的插件失效的太頻繁了！提供一個不再支持的舊版本下載也是一個相當不錯的選擇。

錯誤八：找不到修正說明

除了保證你的jQuery版本的支持和兼容性，你還需要版本控制（例如， Github ）。 如果你希望你開發的jQuery插件最后能夠公開發布的話，你最好保存在Github中。使用版本控制有諸多的好處，具體就不在這篇文章中詳細說明。但是 最重要的在于允許使用你的插件的開發人員看到相關的修改，提升或者兼容性的bug修正。這同時能夠幫助你擴展/提高你的插件的用戶體驗。

更多資源：

• The Git Book
  
• The Perfect Workflow With Git, GitHub, and SSH
  
• Getting Good With Git ($19)
  
• GitCasts
  

錯誤九：開發的插件并沒有人使用

這里我們得提一下，很多插件都很簡單，或者說是膚淺，沒有任何理由來稱之為插件。這個世界不再需要幻燈插件了！

我們不需要閉門造車，很多已經存在的不錯的插件，為什么還需要再去開發呢？

這個世界不再需要幻燈插件了。

錯誤十：沒有提供一個壓縮最小化版本

這個問題非常簡單明顯，如果是一個可供使用的插件，意味著是ready to use的代碼，試問如何在產品環境中使用一個超大的js代碼呢？

請參考錯誤十三來尋找自動處理解決方案。

錯誤十一：把代碼寫的太“聰明”

當你書寫一個插件的時候，你是不是打算給別人使用的呢？如果你書寫的代碼晦澀難懂，大家如何能夠debug？

如果你給變量起名gbin1，x，y，z，你絕對犯了一個大錯。

錯誤十二：不需要使用jQuery

我 們都很喜歡使用jQuery，但是要知道它是一個類庫，肯定會有些性能代價的。一般來說，你不會太在意jQuery選擇器的性能。當然jQuery是被很 好的優化過的。 但是如果你只需要一些簡單的DOM查詢的話，你可能可以考慮使用別的技術，例如，vanilla，Zepto。

不要為了jQuery而使用jQuery，如果你使用其它技術例如，vanilla javascript，你需要 注意兼容性 ，你有可能需要書寫一些polyfill來適應新API。

錯誤十三：沒有自動化整個過程

Grunt是一個基于任務的javascript命令行編譯工具。如果有興趣可以看看這篇文章。

      grunt init:jquery
    

運行這個命令，將會提示你一系列問題，例如，title，描述，版本，git repository，許可等。

Grunt功能不止于此。它可以幫助你自定義boilerplate代碼，并且內建很多工具，例如， JSHint ， Qunit 還有 PhantomJS

定期使用Grunt做編譯工作。

錯誤十四：沒有做過測試

你是不是認真測試過你的代碼？那你怎么保證代碼正常工作？只靠刷新瀏覽器嗎？還是考慮使用一些工具吧： QUnit , Jasmine , 或者 Mocha

如果測試jQuery插件對你來說比較新的話，可以考慮多留意一些測試工具和方法。

一些有用的資源

• 30 Days To Learn jQuery
  
• Essential jQuery Plugin Patterns – Smashing Magazine
  
• Using Inheritance Patterns to Organize Large jQuery Applications
  
• Official jQuery Documentation for Plugin Authoring
  
• jQuery Boilerplate
  
• OOP jQuery Plugin Boilerplate
  
• 10 Coding Tips to Write Superior jQuery Plugins
  

希望大家喜歡我們帶來的這篇文章，如果你有任何問題和意見，請給我們留言，謝謝！

via tutsplus

分享14個jQuery插件開發人員易犯的錯誤