jQuery外掛開發基礎入門
jQuery
以及熟悉jQuery
使用的人來說,首先想到的肯定是尋找現有的jQuery
外掛來滿足相應的展示需求。目前頁面中常用的一些元件,都有多種jQuery
外掛可供選擇,網路上也有很多專門收集jQuery
外掛的網站。利用jQuery
外掛確實可以給我們的開發工作帶來便捷,但是如果只是會簡單使用,而對其中的原理不甚瞭解,那麼在使用過程中碰到問題或者對外掛進行定製開發時就會有諸多疑惑。本文的目的就是可以快速瞭解jQuery
外掛的開發原理以及掌握jQuery
開發的基本技能。
進行jQuery
外掛開發前,首先要知道兩個問題:什麼是jQuery
外掛?jQuery
外掛如何使用?
第一個問題,jQuery
外掛就是用來擴充套件jQuery
jQuery
外掛是jQuery
物件的一個方法。其實回答了第一個問題,也就知道第二個問題的答案了,jQuery
外掛的使用方式就是jQuery
物件方法的呼叫。
我們先看個例子:$("a").css("color","red")
。我們知道每個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
物件就可以通過原型繼承這些方法。
基礎版jQuery外掛
知道了上面這些知識,我們就可以來寫一個簡單的jQuery
外掛。假如我現在需要一個jQuery
外掛用來改變標籤內容顏色,就可以按下面的方式來實現這個外掛:
$.fn.changeStyle = function(colorStr){
this.css("color",colorStr);
}
然後按下面的方式來使用外掛:$("p").changeStyle("red");
外掛呼叫的時候,外掛內部的this
jQuery
物件,這樣的話每個使用$()
方法選擇的標籤,在呼叫changeStyle()
外掛時都會使用css()
方法重設color
樣式。滿足鏈式呼叫的jQuery外掛
鏈式呼叫時jQuery
的一大特色,一個通用的外掛應該遵循jQuery
風格,滿足鏈式呼叫要求。實現鏈式呼叫的方式也很簡單:
$.fn.changeStyle = function(colorStr){
this.css("color",colorStr);
return this;
}
然後使用的時候就可以鏈式呼叫其他方法了:$("p").changeStyle("red").addClass("red-color");
實現鏈式呼叫的關鍵點就一行程式碼return this
,外掛中加了這行程式碼,那麼在外掛執行完之後,就會把當前的jQuery
物件返回,然後就可以在外掛方法後面繼續呼叫其它jQuery
方法。
防止$符號汙染的jQuery外掛
有很多js
庫都會使用$
符號,雖然jQuery
可以使用jQuery.noConflict()
方法交出$符號的使用權,但是如果定義外掛的時候,使用$.fn
物件來定義的,那麼這些外掛使用的時候就會受到其它使用$
變數的js
庫的影響。對於這種情況,我們可以使用立即執行函式通過傳參的方式封裝外掛。形式如下:
(function($){
$.fn.changeStyle = function(colorStr){
this.css("color",colorStr);
return this;
}
}(jQuery));
因為使用了立即執行函式,所以此時的$
只屬於這個立即執行函式的函式作用域,這樣就可以避免$
符號的汙染。
可以接受引數的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));
PS:
$.extend
方法和$.fn.extend
方法都可以用來擴充套件jQuery
功能,通過閱讀jQuery
原始碼我們可以發現這兩個方法的本質區別,那就是$.extend
方法是在jQuery
全域性物件上擴充套件方法,$.fn.extend
方法是在$
選擇符選擇的jQuery
物件上擴充套件方法。所以擴充套件jQuery
的公共方法一般用$.extend
方法,定義外掛一般用$.fn.extend
方法。