jquery

進(jìn)行jQuery插件開發(fā)前，首先要知道兩個(gè)問題：什么是jQuery插件博脑？jQuery插件如何使用憎乙？
第一個(gè)問題，jQuery插件就是用來擴(kuò)展jQuery原型對(duì)象的一個(gè)方法叉趣，簡(jiǎn)單來說就是jQuery插件是jQuery對(duì)象的一個(gè)方法泞边。其實(shí)回答了第一個(gè)問題，也就知道第二個(gè)問題的答案了疗杉，jQuery插件的使用方式就是jQuery對(duì)象方法的調(diào)用阵谚。

我們先看個(gè)例子：$("a").css("color","red")。我們知道每個(gè)jQuery對(duì)象都會(huì)包含jQuery中定義的DOM操作方法,這里使用$方法來選擇a元素烟具，返回一個(gè)a元素的jQuery對(duì)象梢什，這個(gè)對(duì)象就可以使用jQuery中定義的DOM操作方法。那么jQuery對(duì)象是如何獲取這些方法的呢朝聋？其實(shí)jQuery內(nèi)部定義了一個(gè)jQuery.fn對(duì)象嗡午，查看jQuery源碼可以發(fā)現(xiàn)jQuery.fn=jQuery.prototype，也就是說jQuery.fn對(duì)象是jQuery的原型對(duì)象,jQuery的DOM操作方法都在jQuery.fn對(duì)象上定義的冀痕，然后jQuery對(duì)象就可以通過原型繼承這些方法荔睹。

基礎(chǔ)版jQuery插件
知道了上面這些知識(shí)，我們就可以來寫一個(gè)簡(jiǎn)單的jQuery插件言蛇。假如我現(xiàn)在需要一個(gè)jQuery插件用來改變標(biāo)簽內(nèi)容顏色僻他，就可以按下面的方式來實(shí)現(xiàn)這個(gè)插件：

$.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);
}

然后按下面的方式來使用插件：
$("p").changeStyle("red");
插件調(diào)用的時(shí)候，插件內(nèi)部的this就是當(dāng)前調(diào)用插件的jQuery對(duì)象腊尚，這樣的話每個(gè)使用$()方法選擇的標(biāo)簽吨拗，在調(diào)用changeStyle()插件時(shí)都會(huì)使用css()方法重設(shè)color樣式。

滿足鏈?zhǔn)秸{(diào)用的jQuery插件
鏈?zhǔn)秸{(diào)用時(shí)jQuery的一大特色，一個(gè)通用的插件應(yīng)該遵循jQuery風(fēng)格丢胚，滿足鏈?zhǔn)秸{(diào)用要求翩瓜。實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的方式也很簡(jiǎn)單：

$.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);
         return this;
}

然后使用的時(shí)候就可以鏈?zhǔn)秸{(diào)用其他方法了：
$("p").changeStyle("red").addClass("red-color");
實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的關(guān)鍵點(diǎn)就一行代碼return this，插件中加了這行代碼携龟，那么在插件執(zhí)行完之后兔跌，就會(huì)把當(dāng)前的jQuery對(duì)象返回，然后就可以在插件方法后面繼續(xù)調(diào)用其它jQuery方法峡蟋。

**防止符號(hào)污染的jQuery插件** 有很多`js`庫都會(huì)使用`符號(hào)坟桅，雖然jQuery可以使用jQuery.noConflict()方法交出$符號(hào)的使用權(quán)，但是如果定義插件的時(shí)候蕊蝗，使用.fn`對(duì)象來定義的仅乓，那么這些插件使用的時(shí)候就會(huì)受到其它使用`變量的js`庫的影響。對(duì)于這種情況蓬戚，我們可以使用立即執(zhí)行函數(shù)通過傳參的方式封裝插件夸楣。形式如下：

(function($){
     $.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);        
         return this;
     }
}(jQuery));

因?yàn)槭褂昧肆⒓磮?zhí)行函數(shù)，所以此時(shí)的$只屬于這個(gè)立即執(zhí)行函數(shù)的函數(shù)作用域子漩，這樣就可以避免$符號(hào)的污染豫喧。

可以接受參數(shù)的jQuery插件
繼續(xù)上面的例子，假如我還想為這個(gè)插件添加一個(gè)設(shè)置標(biāo)簽元素內(nèi)容文字大小的功能幢泼，那么我可以這么來實(shí)現(xiàn)：

(function($){
     $.fn.changeStyle = function(colorStr紧显，fontSize){
         this.css("color",colorStr).css("fontSize",fontSize+"px");        
         return this;
     }
}(jQuery));

上面這種插件傳參方式適用于參數(shù)比較少的情況，如果需要傳給插件內(nèi)部的參數(shù)比較多缕棵，我們可以定義一個(gè)參數(shù)對(duì)象孵班，然后把需要傳給插件的參數(shù)放在參數(shù)對(duì)象中。插件定義時(shí)如下：

(function($){
     $.fn.changeStyle = function(option){
         this.css("color",option.colorStr).css("fontSize",option.fontSize+"px");        
         return this;
     }

}(jQuery));

使用方式：$("p").changeStyle({colorStr:"red",fontSize:14});
把參數(shù)放到一個(gè)對(duì)象中傳給插件還有一個(gè)好處就是我們可以在插件內(nèi)部為一些參數(shù)定義一些缺省值招驴，例如：

(function($){

     $.fn.changeStyle = function(option){
          var defaultSetting = { colorStr:"green",fontSize:12};
          var setting = $.extend(defaultSetting,option);
          this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this;
     }
}(jQuery));

上面的代碼用到了$.extend方法篙程，這個(gè)方法在這里的用法就是合并兩個(gè)對(duì)象，即把后面一個(gè)對(duì)象的存在的屬性值賦值給第一個(gè)對(duì)象忽匈，具體用法可以參考這里房午。$.extend方法還有一種作用是用來擴(kuò)展jQuery對(duì)象本身。
這樣定義的插件丹允，我們?cè)谑褂脮r(shí)如果不傳fontSize郭厌，那么使用這個(gè)插件的jQuery對(duì)象標(biāo)簽的內(nèi)容會(huì)被設(shè)置成默認(rèn)的12px。
使用方式：$("p").changeStyle({colorStr:"red"});
注意：在為插件定義默認(rèn)參數(shù)時(shí)雕蔽，一定要把默認(rèn)參數(shù)寫在插件方法內(nèi)部折柠，這樣默認(rèn)參數(shù)的作用域就在插件內(nèi)部。

總結(jié)
定義插件的方式除了上面說的用$.fn來定義批狐，還有另外一種方式來定義插件扇售，那就是使用$.fn.extend方法前塔。類似下面的寫法：

(function($){
     $.fn.extend({         
         changeStyle:function(option){             
         var defaultSetting = { colorStr:"green",fontSize:12};
         var setting = $.extend(defaultSetting,option);
         this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this; 
          }
     });
}(jQuery));

PS:$.extend方法和$.fn.extend方法都可以用來擴(kuò)展jQuery功能，通過閱讀jQuery源碼我們可以發(fā)現(xiàn)這兩個(gè)方法的本質(zhì)區(qū)別承冰，那就是$.extend方法是在jQuery全局對(duì)象上擴(kuò)展方法华弓，$.fn.extend方法是在$選擇符選擇的jQuery對(duì)象上擴(kuò)展方法。所以擴(kuò)展jQuery的公共方法一般用$.extend方法困乒，定義插件一般用$.fn.extend方法寂屏。

參考資料
jQuery源碼
How to Create a Basic Plugin