如何理解Jquery插件

在實際開發工作中，總是會碰到像滾動，分頁，日曆等展示效果的業務需求，對於接觸過#jQuery以及熟悉jQuery使用的人來說，首先想到的肯定是尋找現有的jQuery外掛來滿足對應的展示需求。目前頁面中常用的一些元件，都有多種jQuery外掛程式可供選擇，網路上也有很多專門收集jQuery外掛程式的網站。利用jQuery外掛確實可以為我們的開發工作帶來便捷，但是如果只是會簡單使用，而對其中的原理不甚了解，那麼在使用過程中碰到問題或者對插件進行定制開發時就會有許多疑惑。本文的目的就是可以快速了解jQuery外掛程式的開發原理以及掌握jQuery開發的基本技能。

---

在進行jQuery外掛程式開發前，首先要知道兩個問題：什麼是jQuery外掛？ jQuery插件如何使用？
第一個問題，jQuery外掛就是用來擴充jQuery原型物件的一個方法，簡單來說就是jQuery外掛是jQuery物件的一個方法。其實回答了第一個問題，也就知道第二個問題的答案了，jQuery外掛程式的使用方式就是jQuery物件方法的呼叫。

我們先來看個例子：$("a").css("color","re​​d")。我們知道每個jQuery物件都會包含jQuery中定義的DOM操作方法,這裡使用$方法來選擇a元素，傳回一個a元素的jQuery對象，這個物件就可以使用jQuery中定義的DOM操作方法。那麼jQuery物件是如何取得這些方法的呢？其實jQuery內部定義了一個jQuery.fn對象，檢視jQuery原始碼可以發現jQuery.fn=jQuery.prototype，也就是說jQuery.fn物件是jQuery的原型物件,jQuery的DOM操作方法都在jQuery.fn物件上定義的，然後jQuery物件就可以透過原型繼承這些方法。

1.基礎版jQuery外掛

知道上面這些知識，我們就可以來寫一個簡單的jQuery外掛。假如我現在需要一個jQuery外掛程式用來改變標籤內容顏色，就可以用下面的方式來實作這個外掛：

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

然後按下面的方式使用外掛程式：

$("p").changeStyle("red");

插件呼叫的時候，插件內部的this就是目前呼叫插件的jQuery對象，這樣的話每個使用$()方法選擇的標籤，在呼叫changeStyle()外掛程式時都會使用css()方法重設color樣式。

2.滿足鍊式呼叫的jQuery插件

鍊式呼叫時jQuery的一大特色，一個通用的插件應該遵循jQuery風格，滿足鍊式呼叫要求。實作鍊式呼叫的方式也很簡單：

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

然後使用的時候就可以鍊式呼叫其他方法了：

$("p").changeStyle("red").addClass("red-color");

實作鍊式呼叫的關鍵點就一行程式碼 return this，外掛程式加了這行程式碼，那麼在外掛執行完之後，就會把目前的jQuery物件傳回，然後就可以在外掛方法後面繼續呼叫其它jQuery 方法。

3.防止$符號污染的jQuery外掛

有許多js函式庫都會使用$符號，雖然jQuery可以使用jQuery.noConflict()方法交出$符號的使用權，但是如果定義插件的時候，使用$.fn物件來定義的，那麼這些插件使用的時候就會受到其它使用$變數的js函式庫的影響。對於這種情況，我們可以使用立即執行函數透過傳參的方式來封裝外掛程式。形式如下：

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

因為使用了立即執行函數，所以此時的$只屬於這個立即執行函數的函數作用域，這樣就可以避免$符號的污染。

4.可以接受參數的jQuery外掛

繼續上面的例子，假如我還想為這個外掛程式添加一個設定標籤元素內容文字大小的功能，那麼我可以這麼來實現：

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

上面這種插件傳參方式適用於參數比較少的情況，如果需要傳給插件內部的參數比較多，我們可以定義一個參數對象，然後把需要傳給插件的參數放在參數物件中。外掛定義時如下：

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

}(jQuery));

使用方式：
$("p").changeStyle({colorStr:"red",fontSize:14});
把參數放到一個物件中傳給外掛還有一個好處就是我們可以在外掛內部為一些參數定義一些預設值，例如：

(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方法，这个方法在这里的用法就是合并两个对象，即把后面一个对象的存在的属性值赋值给第一个对象，具体用法可以参考这里。$.extend方法还有一种作用是用来扩展jQuery对象本身。
这样定义的插件，我们在使用时如果不传fontSize，那么使用这个插件的jQuery对象标签的内容会被设置成默认的12px。
使用方式：
$("p").changeStyle({colorStr:"red"});
注意：在为插件定义默认参数时，一定要把默认参数写在插件方法内部，这样默认参数的作用域就在插件内部。

---

总结

定义插件的方式除了上面说的用$.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));//这里将Jquery作为实参传递给匿名函数

PS: $.extend方法和$.fn.extend方法都可以用来扩展jQuery功能，通过阅读jQuery源码我们可以发现这两个方法的本质区别，那就是$.extend方法是在jQuery全局对象上扩展方法，$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩展jQuery的公共方法一般用$.extend方法，定义插件一般用$.fn.extend方法。

以上是如何理解Jquery插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！