jquery外掛程式開發

標籤：代碼量   鞭策   傳參   對象   建立   選取器   實踐   名稱   預設   

今天周六，玩了一上午lol了，趁等飯點的時間淺談一下jquery外掛程式開發，望大神指教鞭策！

在軟體開發過程中需要一定的設計模式來指導開發，有了模式，我們便能更好的組織我們的代碼，並從前人的經驗中學到更好的實踐。
根據《jQuery進階編程》中的描述，jQuery外掛程式開發方式重要有三種：

1. 通過$.extend()來擴充jQuery
2. 通過$.fn向jQuery添加新的方法
3. 通過$.widget()應用jQuery UI的組件工廠方式建立（這種方式暫時很少用，估計你們也很少見吧！呵呵……）

　　通常我們使用第二種方法來進行簡單的外掛程式開發，說簡單是相對於第三種方式。第三種方式是用來開發更進階的jQuery組件的，該模式開發出來的組件帶有很多jQuery內建的特性，比如外掛程式的狀態資訊自動儲存，各種關於外掛程式的方法等，都非常的細緻。
而第一種方法又太簡單，僅僅是在jQuery命名空間或者可以理解在jQuery自身添加一個靜態方法而已。所以我們在調用通過$.extend()添加的方法時，直接通過$符號調用$.myFunction()而不需要選中DOM元素$().myFunction()。

方式一、$.extend()

//定義外掛程式    $.extend({      goTop:function(){        $(‘html,body‘).animate({scrollTop:0}, 500);      }    });//調用  $(‘.gotop‘).click(function(){    $.goTop();  });

　　上面的代碼中通過$.extend()方法向jQuery添加了一個goTop方法，然後通過$直接調用。到此已完成了一個簡單的jQuery外掛程式。
　　如你所見，通過此種方法來定義一些輔助類的方法是比較方便的，定義一次後，可以通過jQuery在程式中任何需要的地方調用它。

方式二、$.fn

　　第一種種方法，並不能使用jQuery強大的選取器，要處理DOM元素以及將開發的外掛程式運用到所選的元素上，還是要使用第二種方法。我所見到和使用的外掛程式大多也是通過$.fn的方式建立的，至少目前是。

　　第二種方式的文法樣本：

$.fn.mypluginName = function(){  //代碼內容 }

　　往$.fn上面添加一個方法，名字是我們外掛程式的名稱，然後我們的外掛程式代碼在這個方法中展開。
　　比如我們將頁面中某元素背景顏色改為紅色，則寫成：

//定義外掛程式$.fn.pluginBg = function(){        this.css(‘backgroundColor‘,‘red‘); //在這裡，this指用jQuery選中的元素,即：this = $(element),this用法再此不過多介紹    }//調用$(elment).pluginBg();

　　傳參外掛程式

　　一個強勁的外掛程式是可以讓使用者隨意定製的，這便要求我們在開發外掛程式是考慮的更加全面些，盡量提供合適的參數。在處理外掛程式參數的接收上，通常使用jQuery的extend方法，上面也有提到過，但那是給extend方法傳遞單個對象的情況下，這個對象會合并到jQuery身上，所以我們就可以在jQuery身上調用新合并對象裡包含的方法了。當給extend方法傳遞多個對象時，它會將所有參數對象合并到第一個裡。同時，如果對象中存在同名的屬性，合并時後面的會覆蓋前面的。利用這一點，我們可以在外掛程式中定義一個儲存外掛程式參數預設值的對象，同時將接收來的參數對象合并到預設對象上，最後就實現了使用者指定了值得參數使用指定值，未指定參數時使用外掛程式的預設值。　　

　　我們舉個例子，允許使用者調用外掛程式的時候設定color，代碼如下：

//定義外掛程式$.fn.pluginStyle = function(opt){　　var defaults = {　　　　‘color‘ : ‘red‘,　　};　　var settings = $.extend(defaults,opt);　　　　return this.css({　　　　　　‘color‘: settings.color,　　　　})}//不傳參調用，則color設定為預設值red                $(elm).pluginStyle();//傳參調用，則color設定為blue$(elm).pluginStyle({‘color‘:‘blue‘});

　　到此，外掛程式可以接收和處理參數後，就可以編寫出更靈活的外掛程式了。

物件導向外掛程式

　　問：

　　若要編寫一個複雜的外掛程式，代碼量會很大，如何組織代碼就成了一個需要面臨的問題，沒有一個好的方式來組織代碼，整體感覺會雜亂無章，同時也難以維護，怎麼辦呢？

　　答：

　　我們將外掛程式的所有屬性包裝到一個對象上，用物件導向的思維來進行開發，那麼，一切將迎刃而解！

　　我們將上面的例子美化一下，代碼如下：

//定義Nick對象的構造方法  var Nick = function(ele, opt){    this.$element = ele,      this.defaults = {        ‘color‘: ‘red‘      },      this.options = $.extend(this.defaults,opt);  }  //定義對象的方法  Nick.prototype = {    handsome:function(){      return this.$element.css({        ‘color‘: this.options.color      });    }  }  //在外掛程式中使用對象  $.fn.myPlugin = function(options){    //建立實體    var me = new Nick(this, options);    //調用其方法    return me.handsome();  }  //不傳參調用，則color設定為預設值red  $(elm).pluginStyle();  //傳參調用，則color設定為blue  $(elm).pluginStyle({‘color‘:‘blue‘});

　　寫到這裡我感覺已經完美了，但是在吃飯完後準備發布的時候，看了看--哎呀！好像還有進步空間吖！

匿名函數的用處到了

　　不僅是jQuery外掛程式的開發，我們在寫任何JS代碼的時都應該注意不要汙染全域命名空間，因為隨著代碼量的增加，如果有意無意在全域範圍內定義一些變數的話，最後很難維護，也會和別人寫的代碼發生衝突。
　　一個好的做法是始終使用自調用匿名函數包裹你的代碼，這樣就可以完全安全、放心的用到任何地方，絕對不會發生衝突問題。
在Javascript中無法使用花括弧方便的建立範圍，但函數卻可以形成一個範圍，域內的代碼是無法被外界訪問的，如果我們將自己的代碼放入到函數中，那麼就不會汙染全域命名空間，同時也不會和別的代碼發生衝突。所以我們將所有代碼用自調用匿名函數包裹。
　　最後的將上面的外掛程式代碼用一個匿名函數包裹起來，大功告成！

　　結束時，還是那句話--望大神指教鞭策我！

 

jquery外掛程式開發