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

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

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

錯誤一：不是在開發(fā)一個jQuery插件

總的來說，這里有很多大家接受的jQuery開發(fā)的模式。 如果你沒有遵從這些設計模式，你開發(fā)的插件有可能很“垃圾“?？纯慈缦伦畛Ｓ玫哪Ｊ剑?

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

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

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

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

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

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

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

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

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

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

      $.getOddEls = 
      
        function
      
      (jQcollection){ 
      
        //

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

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

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

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

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

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

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

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

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

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

這里我們在看看另外一個例子：一個調(diào)用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);
      });
   });
}
      
    

這個插件允許我們執(zhí)行如下代碼行：

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

另 外一個執(zhí)行類似公開化的方法是提供一個”hooks"作為選項。在jQuery1.7.1及其以上版本中，我們可以在插件調(diào)用后使 用.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);
         });
   });
}
      
    

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

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

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

錯誤四：要求太多的配置

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

      $(selector).myPlugin();
    

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

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

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

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

錯誤五：將外部的CSS和行內(nèi)的CSS混淆

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

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

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

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

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

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

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

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

問題。

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

錯誤八：找不到修正說明

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

更多資源：

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

錯誤九：開發(fā)的插件并沒有人使用

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

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

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

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

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

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

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

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

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

錯誤十二：不需要使用jQuery

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

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

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

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

      grunt init:jquery
    

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

Grunt功能不止于此。它可以幫助你自定義boilerplate代碼，并且內(nèi)建很多工具，例如， 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插件開發(fā)人員易犯的錯誤