jQuery庫擴展

最近練習一個小應用，體會到jQuery庫的強大和方便，以及將一些js代碼封裝爲jQuery插件的便利。所以簡單總結一下jQuery庫擴展的相關要素。

常見jQuery插件的形式如下：

//爲了有更好的兼容性，開始處有個分號
;(function($){    //此處將$作爲匿名函數的形參
  /*這裏放置代碼，可以使用$作爲jQuery的縮寫別名*/
})(jQuery);       // 這裏將jQuery作爲實參傳遞給了匿名函數

一.jQuery插件機制

jQuery提供了兩個用於擴展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。這兩個方法都接受一個參數，類型爲Object。Object對象的“名/值對”分別代表“函數或方法名/函數主體”。

1.jQuery.fn.extend()——封裝jQuery對象方法的插件（可以發揮jQuery選擇器的強大優勢）

（1）：

;(function($){
     $.fn.extend({
         pluginName:function(opt,callback){
          //插件代碼
         }
     })     
})(jQuery);

（2）：

;(function($){
    $.fn.pluginName = function(){        
          //插件代碼
         };   
})(jQuery);

上述定義了一個jQuery函數，形參是$，函數定義完後將jQuery這個實參傳遞進去，並且立即調用執行。這樣在寫jQuery插件時，也可以使用$這個別名，而不會和prototype引起衝突。

2.jQuery.extend()——封裝全局函數的插件（給jQuery類添加類方法，例如$.AJAX()）

（1）：

將函數放到jQuery命名空間之下。可以批量完成。

;(function($){
     $.extend({        
            pluginName1:function(value){
                //插件代碼
             }
            pluginName2:function(value){
              //插件代碼           
             }
           ......
      })     
})(jQuery);

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

調用方法：
jQuery.foo(); 
jQuery.foo2('param');

note:   a:jQuery.extend()方法除了擴展jQuery對象之外，還可以用於擴展已有的Object對象。

            b:jQuery.extend()方法常被用於設置插件方法的一系列默認參數

function foo(options){
   options = jQuery.extend({
         name: "foo",
         length:4,
         dataType:"xml"  /*默認參數*/
     },options);     /*options爲傳遞的參數*/       
};

（2）：避免某些函數或者變量名與其他jQuery插件衝突，可以將一些方法封裝到另一個自定義的命名空間。

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

調用方法：
$.myPlugin.foo(); 
$.myPlugin.foo2('param'); 

二.jQuery插件基本要點

1.jQuery插件的文件命名推薦jquery.[插件名].js。

2.所有的對象方法應當附加到jQuery.fn對象上，所有的全局函數都應當附加到jQuery對象本身上。

3.插件內部，this指向的是當前通過選擇器獲取的jQuery對象，區別於一般方法那樣，例如click()方法，內部this指代的是DOM元素。

4.可以通過this.each來遍歷所有元素。

5.jQuery插件還有一種稱爲選擇器插件，可以擴充一些自己需要的或者喜歡的選擇器。

6.避免在插件內部使用$作爲jQuery對象的別名，應當使用完整的jQuery來表示，以避免衝突。當然可以使用閉包來回避這個問題，使插件內部繼續使用$ 作爲jQuery對象的別名。