淺談jquery插件開發模式**************************************************************************************

首先根據《jQuery高級編程》的描述來看，jQuery插件開發方式主要有三種：

     

1. 經過$.extend()來擴展jQuery
2. 經過$.fn 向jQuery添加新的方法
3. 經過$.widget()應用jQuery UI的部件工廠方式建立

第一種比較常見，個人理解是$.extend()至關於一種靜態方法

上述例子狠典型，並且也列舉了帶參和不帶參的調用，經過$.extend()向jQuery添加了一個sayHello函數，而後經過$直接調用。這是最簡單的調用。

第二種是比較經常使用的，先來講說第三種

     第三種方式是用來開發更高級jQuery部件的，該模式開發出來的部件帶有不少jQuery內建的特性，好比插件的狀態信息自動保存，各類關於插件的經常使用方法等等。

他相對於基本的jquery插件來講，

     a.方便實現繼承，代碼重用

     b.他的默認模式是單例模式

由於這個模式我不經常使用，之後用到了再補充。

重頭戲，第二種：

       他能夠處理DOM元素以及將插件更好地運用於所選擇的元素身上

格式 $.fn.pluginName = function(){}

     最簡潔的寫法

 

簡單的理解就是      

$(‘a’).myPlugin  == $(‘a’).css(‘color’,’red’);  

可是，這裏的 this 是對調用該方法的頁面的全部的a標籤所在的這麼一個集合進行操做，可是這樣的話，顯然是不合邏輯的，能夠加一個each，對a集合裏的達到要求的a標籤進行操做

在每一個連接顯示連接的真實地址，首先經過each遍歷全部a標籤，而後獲取href屬性的值再加到連接文本後面。

固然還能優化，在這以前，說一下鏈式調用

 

 

很簡潔的兩個例子，一目瞭然瞭解什麼事鏈式調用，選擇好DOM元素後能夠不斷地調用其餘方法。

可是以前的寫法，沒法完成鏈式調用，因此須要優化一下，要讓插件不打破這種鏈式調用，只需return一下便可。

以前只是變顏色，再加上個字體大小

一種調用只是指定顏色，字體採用默認

可是這麼寫有個缺陷：調用extend時會將defaults的值改變。

這改變咱們的初衷了，咱們只是插件的使用者，不是修改者。

 

在defaults中加一個空的引用對象便可，這樣咱們傳的參數都會存到這個空對象裏，保護了插件裏面的默認值。

這時候又遇到問題了，若要編寫一個複雜的插件，代碼量會很大，如何組織代碼就成了一個須要面臨的問題，沒有一個好的方式來組織這些代碼，

總體感受會雜亂無章，同時也很差維護，因此將插件的全部方法屬性包裝到一個對象上，用面向對象的思惟來進行開發，無疑會使工做輕鬆不少。

在網上查到了這樣一個例子

 

1.初始化

2.定義

3.如何調用

經過上面這樣一改造，咱們的代碼變得更面向對象了，也更好維護和理解，

之後要加新功能新方法，只需向對象添加新變量及方法便可，而後在插件裏實例化後便可調用新添加的東西。

固然，插件的調用是不變的。

可是，如今的問題又來了：    

      這樣的寫法污染了全局的命名空間.

隨着代碼的增多，若是有意無心在全局範圍內定義一些變量的話，最後很難維護，也容易跟別人寫的代碼有衝突。

 好比:

       　　

    在代碼中向全局window對象添加了一個變量status用於存放狀態，同時頁面中引用了另外一個別人寫的庫，也向全局添加了這樣一個同名變量，最後的結果確定不是咱們想要的。

    最好的作法是：自調用匿名函數

  （function(){
          //代碼
        })();

JavaScript中沒法用花括號方便地建立做用域，但函數卻能夠造成一個做用域，域內的代碼是沒法被外界訪問的。若是咱們將本身的代碼放入一個函數中，那麼就不會污染全局命名空間，同時不會和別的代碼衝突。

 

  

       如上面咱們定義了一個Beautifier全局變量，它會被附到全局的window對象上，爲了防止這種事情發生，（可能的解決方法：把全部代碼放到jQuery的插件定義代碼裏面去，也就是放到$.fn.myPlugin裏面。）。

可是在$.fn.myPlugin裏面咱們其實應該更專一於插件的調用，以及如何與jQuery互動，由於咱們不用呢種方法來解決問題。

 

這裏有一個小問題：

或者是window，undefined等的這些系統變量或者關鍵字改變了，正好咱們又在本身的代碼裏面進行了使用.

很簡單，在本身的插件前的 ( 加上一個 ;

 

進階

訪問速度，性能的提高:

這樣的作法是將系統變量在局部引用  ----- 有點像 hack的意思.

最終版：

 

 

 

 以上就是我對jquery插件開發模式的理解。

最近在看jquery插件的開發，從網上查了好多資料，特此記錄一下，僅做學習使用，由於查詢了許多前輩的資料，有些是直接複製過來的，若是做者本人以爲侵權了，請通知我刪除，謝謝。

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。