【Web】Jquery插件開發之$.extend、$.fn.extend方式

Query插件的開發方式包括：

一種是類級別的插件開發，即給jQuery添加新的全局函數，相當於給jQuery類本身添加方法。jQuery的全局函數就是屬於jQuery命名空間的函數，

另一種是對象級別的插件開發，即給jQuery對象添加方法。下面就兩種函數的開發做詳細的說明。

1. 類級別的插件開發

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

1.1 添加一個新的全局函數

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

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

1.2 增加多個全局函數

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

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

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插件衝突，因此我們習慣將一些方法封裝到另一個自定義的命名空間。

jQuery.myPlugin = {          
    foo:function() {          
        alert('his 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');  

通過這個技巧（使用獨立的插件名），我們可以避免命名空間內函數的衝突。

2、對象級別的插件開發

對象級別的插件開發需要如下的兩種形式：、

形式1

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

形式2：

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

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

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

這是一個單一插件的腳本。如果你的腳本中包含多個插件，或者互逆的插件（例如： $.fn.doSomething() 和 $.fn.undoSomething()），那麼你需要聲明多個函數名字。但是，通常當我們編寫一個插件時，力求僅使用一個名字來包含它的所有內容。我們的示例插件命名爲“highlight“

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

我們的插件通過這樣被調用：

$('#myDiv').hilight();    

但是如果我們需要分解我們的實現代碼爲多個函數該怎麼辦？有很多原因：設計上的需要；這樣做更容易或更易讀的實現；而且這樣更符合面向對象。 這真是一個麻煩事，把功能實現分解成多個函數而不增加多餘的命名空間。出於認識到和利用函數是javascript中最基本的類對象，我們可以這樣做。就像其他對象一樣，函數可以被指定爲屬性。因此我們已經聲明“hilight”爲jQuery的屬性對象，任何其他的屬性或者函數我們需要暴露出來的，都可以在"hilight" 函數中被聲明屬性。

2.2 接受options參數以控制插件的行爲

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

$.fn.hilight = function(options) {    
    var defaults = {    
        foreground: 'red',    
        background: 'yellow'    
    };      

    var opts = $.extend(defaults, options);  
};    

我們的插件可以這樣被調用：

$('#myDiv').hilight({    
  foreground: 'blue'    
});     

2.3 暴露插件的默認設置

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

$.fn.hilight = function(options) {      
    var opts = $.extend({}, $.fn.hilight.defaults, options);   
};     

$.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函數下面。

$.fn.hilight = function(options) {    
    return this.each(function() {    
        var $this = $(this);      
        var markup = $this.html();    
        markup = $.fn.hilight.format(markup);    
        $this.html(markup);    
    });    
};    

$.fn.hilight.format = function(txt) {    
    return '<strong>' + txt + '</strong>';    
};     

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

2.5 保持私有函數的私有性

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

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

(function($) {    
		$.fn.hilight = function(options) {    
		    debug(this);    
		};    
		
		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”覆蓋插件的選項（這非常有用當創建例子時）。而且支持它非常簡單。更新：註釋中有一點優化建議。

$.fn.hilight = function(options) {      
    var opts = $.extend({}, $.fn.hilight.defaults, options);    
    return this.each(function() {    
        var $this = $(this); 
        var o = $.meta ? $.extend({}, opts, $this.data()) : opts;    
    });    

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

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

<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 整合

下面使我們的例子完成後的代碼：

// 創建一個閉包

(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);

3、總結

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); //return 7

10條建議讓你創建更好的 jQuery 插件

在開發過很多 jQuery 插件以後，我慢慢的摸索出了一套開發jQuery插件比較標準的結構和模式。這樣我就可以 copy & paste 大部分的代碼結構，只要專注最主要的邏輯代碼就行了。 使用相同的設計模式和架構也讓修復bug或者二次開發更容易。一套經過驗證的架構可以保證我的插件不出大的問題，不論插件簡單還是複雜。 我在這裏分享10條我總結的經驗。

1. 把你的代碼全部放在閉包裏面

這是我用的最多的一條。但是有時候在閉包外面的方法會不能調用。不過你的插件的代碼只爲你自己的插件服務，所以不存在這個問題，你可以把所有的代碼都放在閉包裏面。而方法可能應該放在Prototype方法內部，我們後面會講到這一點。

(function($){
    //code here
})(jQuery);

2. 提供插件的默認選項

你的插件應該會有一些選項是可以讓開發者設置的，所以提供恢復默認選項是以有必要的。你可以通過jQuery的extend功能來設置這些選項：

var defaultSettings = {
   mode            : 'Pencil',
   lineWidthMin    : '0',
   lineWidthMax    : '10',
   lineWidth       : '2'
};

settings = $.extend({}, defaultSettings, settings || {});

3. 使用返回一個元素

JavaScript/jQuery有一個很好的特點就是可以進行方法級聯，所以我們不應該破壞這個特性，始終在方法中返回一個元素。我在我的每一個jQuery插件中都遵守這一條。

$.fn.wPaint = function(settings)
{
   return this.each(function()
   {
       var elem = $(this);
       //run some code here
   }
}

4. 一次性代碼放在主循環以外

這一條很重要，但是常常被忽略。簡單的講，如果你有一段代碼是一堆默認值，只需要被實例化一次，而不是每次調用你插件功能的時候都實例化，你應該把這段代碼放在插件方法的外面。這樣可以讓你的插件運行的更高效，節省內存。我們將會在後面討論prototype的時候，看這個方法在實際中的運用。

var defaultSettings = {
   mode            : 'Pencil',
   lineWidthMin    : '0',
   lineWidthMax    : '10',
   lineWidth       : '2'
};

$.fn.wPaint = function(settings)
{
   settings = $.extend({}, defaultSettings, settings || {});
   return this.each(function()
   {
       var elem = $(this);
       //run some code here
   }
}

你可以注意到，上面代碼中的“defaultSettings”是完全在插件方法外面的，由於這些代碼是在閉包裏面，我們不用擔心這些變量被重寫。

5. 爲什麼要設置 Class Prototyping

作爲你代碼的血與肉，方法和函數應該放在prototype函數內。有兩個原因：

它可以節省很多內存，因爲可以不用重複創建這些方法。

引用一個現成的方法比重新創建一個好快很多。

簡單的說，prototype就是擴展了一個對象，爲它提供方法，而不用在每一個對象中實例化這些方法。這也讓你的代碼更有條理和高效。一旦你習慣這種開發方式，你會發現它在你將來的項目中爲你節省了很多時間。

6. 如何設置 Class Prototyping

設置一個 prototype 方法有兩個部分。首先我們需要創建我們最初的類定義，在多數情況下這就意味着創建一個對象。這個定義包含了每一個對象實例都不同的部分。在我的 Paint jQuery Plugin 插件中，我是這麼寫的：

function Canvas(settings)
{
   this.settings = settings;
   this.draw = false;
   this.canvas = null;      
   this.ctx = null;
   return this;
}

下面來添加全局的方法：

Canvas.prototype =
{
   generate: function()
   {
       //generate code
   }
}

這裏的關鍵是要讓prototype的方法是通用的，但是數據是每個實例自己的，可以用“this”引用。

7. 使用 “this” 對象

通過使用“$this”，我們可以向別的閉包傳遞正確的引用。我們也可能需要向別的方法傳入 $this 引用。需要注意的是， $this 這個名字是可以改的，任意的變量名都可以。

Canvas.prototype =
{
   generate: function()
   {
       //some code
       var $this = this;
       var buton = //...some code
       button.click(function(){
           //using this will not be found since it has it's own this
           //use $this instead.
           $this.someFunc($this);
       });
   },
   someFunc: function($this)
   {
       //won't know what "this" is.
       //use $this instead passed from the click event
   }
}

8. 在每一個對象中保存設置

我一直在每一個對象中保存自己的設置，然後操作它自己的設置。這樣你就不用在不同的方法中傳遞很多參數。把這些變量放在對象中，也方便你在其他地方調用這些變量。

function Canvas(settings)
{
   this.settings = settings;
   return this;
}

9. 分離你的Prototype方法邏輯

這可能是一個基本的原則。當你在猶豫是否需要提供一個方法的時候，你可以問你自己 “如果其他人要重寫這個方法的話，你的代碼是否能滿足他的需求？”或者“別人來寫這個方法有多困難？”。當然這是一個靈活性拿捏的問題。這裏列出了我的 Color Picker jQuery Plugin 的方法，你可以參考一下：

generate()
appendColors()
colorSelect()
colorHoverOn()
colorHoverOff()
appendToElement()
showPalette()
hidePalette()

10. 提供 Setter/Getter 選項

這一條不是必須的，但是我發現我所有的插件都包用到了這一條。因爲它只需要一點點代碼，就能爲別人提供一個他可能需要的功能。

基本上，我們只要讓開發者能夠設置或者獲取元素已經存在的值：

var lineWidth = $("#container").wPaint("lineWidth");

$("#container").wPaint("lineWidth", "5");

首先我們要把元素和對象關聯起來，然後我們就可以引用它。我們在返回元素之前做如下操作：

return this.each(function()
{
   var elem = $(this);
   var canvas = new Canvas(settings);
   //run some code here
   elem.data("_wPaint_canvas", canvas);
}

下面的代碼明確了我們究竟要做什麼：

$.fn.wPaint = function(option, settings)
{
   if(typeof option === 'object')
   {
       settings = option;
   }
   else if(typeof option === 'string')
   {
       if(
           this.data('_wPaint_canvas') &&
           defaultSettings[option] !== undefined
       ){
           var canvas = this.data('_wPaint_canvas');
           if(settings) {
               canvas.settings[option] = settings;
               return true;
           } else {
               return canvas.settings[option];
           }
       }else
        return false;
   }

   return this.each(function()
   {
       //run some code here
   }
}