jQuery插件開發全解析

 

From： http://www.iteye.com/topic/545971

jQuery插件的開發包括兩種：

一種是類級別的插件開發，即給jQuery添加新的全局函數，至關於給jQuery類自己添加方法。jQuery的全局函數就是屬於jQuery命名空間的函數，另外一種是對象級別的插件開發，即給jQuery對象添加方法。下面就兩種函數的開發作詳細的說明。

 

一、類級別的插件開發

類級別的插件開發最直接的理解就是給jQuery類添加類方法，能夠理解爲添加靜態方法。典型的例子就是$.AJAX()這個函數，將函數定義於jQuery的命名空間中。關於類級別的插件開發能夠採用以下幾種形式進行擴展：

 

1.1 添加一個新的全局函數

添加一個全局函數，咱們只需以下定義：  

Java代碼： 

jQuery.foo = function() {
alert('This is a test. This is only a test.');
};

 

  1.2 增長多個全局函數

添加多個全局函數，可採用以下定義： 

Java代碼 ： 

jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
jQuery.bar = function(param) {
alert('This function takes a parameter, which is "' + param + '".');
};

調用時和一個函數的同樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

1.3 使用jQuery.extend(object);　 

Java代碼 ： 

jQuery.extend({
foo: function() {
alert('This is a test. This is only a test.');
},
bar: function(param) {
alert('This function takes a parameter, which is "' + param +'".');
}
});

 

1.4 使用命名空間

雖然在jQuery命名空間中，咱們禁止使用了大量的javaScript函數名和變量名。可是仍然不可避免某些函數或變量名將於其餘jQuery插件衝突，所以咱們習慣將一些方法封裝到另外一個自定義的命名空間。 

Java代碼： 

jQuery.myPlugin = {
foo:function() {
alert('This is a test. This is only a test.');
},
bar:function(param) {
alert('This function takes a parameter, which is "' + param + '".');
}
};

 

  採用命名空間的函數仍然是全局函數，調用時採用的方法：

 

$.myPlugin.foo(); 

 

$.myPlugin.bar( 'baz' );

經過這個技巧（使用獨立的插件名），咱們能夠避免命名空間內函數的衝突。

 

二、對象級別的插件開發

對象級別的插件開發須要以下的兩種形式：

形式1： 

 

Java代碼： 

(function($){
$.fn.extend({
pluginName:function(opt,callback){
          // Our plugin implementation code goes here.
}
})
})(jQuery);

形式2：  

Java代碼： 

(function($) {
$.fn.pluginName = function() {
     // Our plugin implementation code goes here.
};
})(jQuery);

 

上面定義了一個jQuery函數,形參是$，函數定義完成以後,把jQuery這個實參傳遞進去.當即調用執行。這樣的好處是,咱們在寫jQuery插件時,也可使用$這個別名,而不會與prototype引發衝突.

 

2.1 在JQuery名稱空間下申明一個名字

這是一個單一插件的腳本。若是你的腳本中包含多個插件，或者互逆的插件（例如： $.fn.doSomething() 和 $.fn.undoSomething()），那麼你須要聲明多個函數名字。可是，一般當咱們編寫一個插件時，力求僅使用一個名字來包含它的全部內容。咱們的示例插件命名爲「highlight「    

Java代碼： 

$.fn.hilight = function() {
  // Our plugin implementation code goes here.
};

 咱們的插件經過這樣被調用：

$('#myDiv').hilight();
可是若是咱們須要分解咱們的實現代碼爲多個函數該怎麼辦？有不少緣由：設計上的須要；這樣作更容易或更易讀的實現；並且這樣更符合面向對象。 這真是一個麻煩事，把功能實現分解成多個函數而不增長多餘的命名空間。出於認識到和利用函數是javascript中最基本的類對象，咱們能夠這樣作。就像其餘對象同樣，函數能夠被指定爲屬性。所以咱們已經聲明「hilight」爲jQuery的屬性對象，任何其餘的屬性或者函數咱們須要暴露出來的，均可以在"hilight" 函數中被聲明屬性。稍後繼續。
2.2 接受options參數以控制插件的行爲

讓咱們爲咱們的插件添加功能指定前景色和背景色的功能。咱們也許會讓選項像一個options對象傳遞給插件函數。例如：    

Java代碼： 

// plugin definition
$.fn.hilight = function(options) {
  var defaults = {
    foreground: 'red',
    background: 'yellow'
  };
  // Extend our default options with those provided.
  var opts = $.extend(defaults, options);
  // Our plugin implementation code goes here.
};

  咱們的插件能夠這樣被調用：
$('#myDiv').hilight({ 
  foreground: 'blue' 
});  

 

2.3 暴露插件的默認設置

咱們應該對上面代碼的一種改進是暴露插件的默認設置。這對於讓插件的使用者更容易用較少的代碼覆蓋和修改插件。接下來咱們開始利用函數對象。

Java代碼： 

// plugin definition
$.fn.hilight = function(options) {
  // Extend our default options with those provided.
  // Note that the first arg to extend is an empty object -
  // this is to keep from overriding our "defaults" object.
  var opts = $.extend({}, $.fn.hilight.defaults, options);
  // Our plugin implementation code goes here.
};
// plugin defaults - added as a property on our plugin function
$.fn.hilight.defaults = {
  foreground: 'red',
  background: 'yellow'
};

  如今使用者能夠包含像這樣的一行在他們的腳本里：
//這個只須要調用一次，且不必定要在ready塊中調用
$.fn.hilight.defaults.foreground = 'blue'; 
接下來咱們能夠像這樣使用插件的方法，結果它設置藍色的前景色：
$('#myDiv').hilight(); 

如你所見，咱們容許使用者寫一行代碼在插件的默認前景色。並且使用者仍然在須要的時候能夠有選擇的覆蓋這些新的默認值：

// 覆蓋插件缺省的背景顏色  

$.fn.hilight.defaults.foreground = 'blue';

// ... 

// 使用一個新的缺省設置調用插件 

$('.hilightDiv').hilight(); 

// ... 

// 經過傳遞配置參數給插件方法來覆蓋缺省設置 

$('#green').hilight({ 

  foreground: 'green'  

});   

 

2.4 適當的暴露一些函數

這段將會一步一步對前面那段代碼經過有意思的方法擴展你的插件（同時讓其餘人擴展你的插件）。例如，咱們插件的實現裏面能夠定義一個名叫"format"的函數來格式化高亮文本。咱們的插件如今看起來像這樣，默認的format方法的實現部分在hiligth函數下面。 

Java代碼： 

// plugin definition
$.fn.hilight = function(options) {
  // iterate and reformat each matched element
  return this.each(function() {
    var $this = $(this);
    // ...
    var markup = $this.html();
    // call our format function
    markup = $.fn.hilight.format(markup);
    $this.html(markup);
  });
};
// define our format function
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};

      咱們很容易的支持options對象中的其餘的屬性經過容許一個回調函數來覆蓋默認的設置。這是另一個出色的方法來修改你的插件。這裏展現的技巧是進一步有效的暴露format函數進而讓他能被從新定義。經過這技巧，是其餘人可以傳遞他們本身設置來覆蓋你的插件，換句話說，這樣其餘人也可以爲你的插件寫插件。 

      考慮到這個篇文章中咱們創建的無用的插件，你也許想知道究竟何時這些會有用。一個真實的例子是Cycle插件.這個Cycle插件是一個滑動顯示插件，他能支持許多內部變換做用到滾動，滑動，漸變消失等。可是實際上，沒有辦法定義也許會應用到滑動變化上每種類型的效果。那是這種擴展性有用的地方。 Cycle插件對使用者暴露"transitions"對象，使他們添加本身變換定義。插件中定義就像這樣：

$.fn.cycle.transitions = {  

// ...  

};  

這個技巧使其餘人能定義和傳遞變換設置到Cycle插件。

 

2.5 保持私有函數的私有性

這種技巧暴露你插件一部分來被覆蓋是很是強大的。可是你須要仔細思考你實現中暴露的部分。一但被暴露，你須要在頭腦中保持任何對於參數或者語義的改動也許會破壞向後的兼容性。一個通理是，若是你不能確定是否暴露特定的函數，那麼你也許不須要那樣作。

那麼咱們怎麼定義更多的函數而不攪亂命名空間也不暴露實現呢？這就是閉包的功能。爲了演示，咱們將會添加另一個「debug」函數到咱們的插件中。這個 debug函數將爲輸出被選中的元素格式到firebug控制檯。爲了建立一個閉包，咱們將包裝整個插件定義在一個函數中。 

Java代碼： 

(function($) {
  // plugin definition
  $.fn.hilight = function(options) {
    debug(this);
    // ...
  };
  // private function for debugging
  function debug($obj) {
    if (window.console && window.console.log)
      window.console.log('hilight selection count: ' + $obj.size());
  };
//  ...
})(jQuery);

  咱們的「debug」方法不能從外部閉包進入,所以對於咱們的實現是私有的。

 

2.6 支持Metadata插件

在你正在寫的插件的基礎上，添加對Metadata插件的支持能使他更強大。我的來講，我喜歡這個Metadata插件，由於它讓你使用很少的"markup」覆蓋插件的選項（這很是有用當建立例子時）。並且支持它很是簡單。更新：註釋中有一點優化建議。 

Java代碼： 

$.fn.hilight = function(options) {
  // ...
  // build main options before element iteration
  var opts = $.extend({}, $.fn.hilight.defaults, options);
  return this.each(function() {
    var $this = $(this);
    // build element specific options
    var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
     //...

   這些變更行作了一些事情：它是測試Metadata插件是否被安裝若是它被安裝了，它能擴展咱們的options對象經過抽取元數據這行做爲最後一個參數添加到JQuery.extend，那麼它將會覆蓋任何其它選項設置。如今咱們能從"markup」處驅動行爲,若是咱們選擇了「markup」：

調用的時候能夠這樣寫： jQuery.foo(); 或 $.foo();  

Java代碼： 

<!--  markup  -->
<div class="hilight { background: 'red', foreground: 'white' }">
  Have a nice day!
</div>
<div class="hilight { foreground: 'orange' }">
  Have a nice day!
</div>
<div class="hilight { background: 'green' }">
  Have a nice day!
</div>

 

如今咱們能高亮哪些div僅使用一行腳本：
$('.hilight').hilight();  

2.7 整合
下面使咱們的例子完成後的代碼：    

 

Java代碼： 

// 建立一個閉包
(function($) {
  // 插件的定義
  $.fn.hilight = function(options) {
    debug(this);
    // build main options before element iteration
    var opts = $.extend({}, $.fn.hilight.defaults, options);
    // iterate and reformat each matched element
    return this.each(function() {
      $this = $(this);
      // build element specific options
      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
      // update element styles
      $this.css({
        backgroundColor: o.background,
        color: o.foreground
      });
      var markup = $this.html();
      // call our format function
      markup = $.fn.hilight.format(markup);
      $this.html(markup);
    });
  };
  // 私有函數：debugging
  function debug($obj) {
    if (window.console && window.console.log)
      window.console.log('hilight selection count: ' + $obj.size());
  };
  // 定義暴露format函數
  $.fn.hilight.format = function(txt) {
    return '<strong>' + txt + '</strong>';
  };
  // 插件的defaults
  $.fn.hilight.defaults = {
    foreground: 'red',
    background: 'yellow'
  };
// 閉包結束
})(jQuery);

  這段設計已經讓我建立了強大符合規範的插件。我但願它能讓你也能作到。

 

三、總結

jQuery爲開發插件提拱了兩個方法，分別是：

jQuery.fn.extend(object);  給jQuery對象添加方法。
jQuery.extend(object);  爲擴展jQuery類自己.爲類添加新的方法。 

 

3.1 jQuery.fn.extend(object);  

fn 是什麼東西呢。查看jQuery代碼，就不難發現。

jQuery.fn = jQuery.prototype = {   

init: function( selector, context ) {//....　

//......   

};    

原來 jQuery.fn = jQuery.prototype.對prototype確定不會陌生啦。雖然 javascript　沒有明確的類的概念，可是用類來理解它，會更方便。jQuery即是一個封裝得很是好的類，好比咱們用 語句　$("#btn1") 會生成一個 jQuery類的實例。 

jQuery.fn.extend(object); 對jQuery.prototype進得擴展，就是爲jQuery類添加「成員函數」。jQuery類的實例可使用這個「成員函數」。

好比咱們要開發一個插件，作一個特殊的編輯框，當它被點擊時，便alert 當前編輯框裏的內容。能夠這麼作：

$.fn.extend({         

     alertWhileClick:function(){      

         $(this).click(function(){       

              alert($(this).val());        

          });       

      }     

});    

$("#input1").alertWhileClick(); //頁面上爲：<input id="input1" type="text"/> 

$("#input1")　爲一個jQuery實例，當它調用成員方法 alertWhileClick後，便實現了擴展，每次被點擊時它會先彈出目前編輯裏的內容。

 

3.2 jQuery.extend(object);

爲jQuery類添加添加類方法，能夠理解爲添加靜態方法。如：

$.extend({   

    add:function(a,b){return a+b;}  

});  

爲　jQuery　添加一個爲 add　的　「靜態方法」，以後即可以在引入 jQuery　的地方，使用這個方法了，$.add(3,4);