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

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

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

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

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

      (
      
        function
      
      
        ($, window, undefined){
$.fn.myPlugin 
      
      = 
      
        function
      
      
        (opts) {
   
      
      
        var
      
       defaults =
      
         {
      
      
      
        //
      
      
         設(shè)置你的選項(xiàng)缺省值
      
      
           }
 
  
      
      
        //
      
      
         使用用戶的選項(xiàng)缺省值來擴(kuò)展缺省選項(xiàng)
      
      
        var
      
       options = $.extend(defaults, opts ||
      
         {});
 
   
      
      
        return
      
      
        this
      
      .each(
      
        function
      
      (){ 
      
        //
      
      
         jQuery鏈?zhǔn)讲僮?
      
      
        //
      
      
         插件的相關(guān)內(nèi)容
      
      
           });
})(jQuery, window);
      
    

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

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

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

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

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

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

這種類型的插件不可以執(zhí)行鏈?zhǔn)讲僮鳎驗(yàn)榉椒ㄔ趈Query對象中定義為屬性，不能返回jQuery對象，例如如下代碼：

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

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

      $.getOddEls = 
      
        function
      
      (jQcollection){ 
      
        //

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

在這個(gè)例子中，我們得到奇數(shù)數(shù)值，用戶可能需要jQuery對象返回$.getOddEls；因此我們返回了 filter 方法，這個(gè)方法通過傳遞的方法返回了jQuery的collection定義。一個(gè)比較好的原則是封轉(zhuǎn)返回的元素到一個(gè)jQuery方法中，特別是如果用戶希望它可以進(jìn)行鏈?zhǔn)讲僮鳎蝗绻惴祷財(cái)?shù)組，字符串，數(shù)據(jù)，方法或者其它類型，則不需要封裝。

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

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

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

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

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

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

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

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

這里我們在看看另外一個(gè)例子：一個(gè)調(diào)用API的插件應(yīng)該提供對于返回對象的訪問。看看如下這個(gè)例子：

      $.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);
      });
   });
}
      
    

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

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

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

      $.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插件并且鏈?zhǔn)狡渌袨榈奶幚怼?

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

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

錯(cuò)誤四：要求太多的配置

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

      $(selector).myPlugin();
    

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

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

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

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

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

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

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

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

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

錯(cuò)誤六：沒有提供任何在線演示

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

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.)

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

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

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

問題。

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

錯(cuò)誤八：找不到修正說明

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

更多資源：

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

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

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

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

這個(gè)世界不再需要幻燈插件了。

錯(cuò)誤十：沒有提供一個(gè)壓縮最小化版本

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

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

錯(cuò)誤十一：把代碼寫的太“聰明”

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

如果你給變量起名gbin1，x，y，z，你絕對犯了一個(gè)大錯(cuò)。

錯(cuò)誤十二：不需要使用jQuery

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

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

錯(cuò)誤十三：沒有自動化整個(gè)過程

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

      grunt init:jquery
    

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

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

定期使用Grunt做編譯工作。

錯(cuò)誤十四：沒有做過測試

你是不是認(rèn)真測試過你的代碼？那你怎么保證代碼正常工作？只靠刷新瀏覽器嗎？還是考慮使用一些工具吧： 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個(gè)jQuery插件開發(fā)人員易犯的錯(cuò)誤