前一段時間,老大讓我封裝插件,開始翻看之前的筆記和例子,今天天氣很好,開始寫一段插件機制。jquery有成千上萬種的第三方插件,有時候自己寫好了一個獨立的功能,想將它與jquery結合起來,可以用jquery鏈式調用,這就需要擴展jquery,下成jquery插件形式了。先來一個小小的例子吧
(function($){
? ? ? ? ? ? $.fn.extend({
? ? ? ? ? ? ? ? ? ? ? ? ?'bold':function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return this.css({fontWeight:'bold'
? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ?}
? ? ? ? ? ? });
})(jquery);
調用的方式:
$(function(){
? ? ? ? ? ? ? ? ?//鏈式調用,加粗p標簽中的字體
? ? ? ? ? ? ? ? ? $('p').bold();
})
這是一個很簡單的擴展。
現(xiàn)在開始解釋上邊的代碼:
1,jquery的插件機制
創(chuàng)建插件,jquery提供了兩種方法,jquery.extend() ?和 ?jquery.fn.extend()
jquery.extend()方法有一個重載
jquery.extend(object),一個參數(shù)的用于擴展jquery類本身,也就是用來在jquery類/命名空間上增加新函數(shù),或者叫靜態(tài)方法,例如jquery內置的ajax方法都是用jquery.ajax()這個樣子來調用,有點像“類名.方法名”靜態(tài)方法的調用方式。下邊來寫個jquery.extend(object)的例子:
//擴展jquery對象本身
jquery.extend({
'minValue':function(a,b){
return a < b ? a : b;
},
'maxValue':function(a,b){
return a > b ? a : b;
}
});
//調用
var i = 100;j = 101;
var min_v = $.minValue(i,j);//min_v等于100
var max_v = $.maxValue(i,j);//max_v等于101
重載版本:jquery.extend([deep],target,object1,[objectN])
也許你剛看到這幾個參數(shù)會有一種懵逼的感覺,沒關系,先來解釋一下:
deep: ? ? 可選 ? ? ? 如果設為true,則遞歸合并
target: ? ? 待修改的對象
object1 ? ? ?待合并到第一個對象的對象
objectN ? ? ? ? 可選 ?待合并到第一個對象的對象
用一個或多個其他對象來擴展一個對象,返回被擴展的對象
如果不指定target,則對jquery命名空間本身進行擴展。這有助于我為jquery增加新方法
如果第一個參數(shù)設置為true,則jquery返回一個深層次的副本,遞歸地復制找到的任何對象。否則的話,副本會與原對象共享結構。
未定義的屬性將不會被復制,然而從對象的原型繼承的屬性將會被復制
演示一下:
合并settings 和 options ,修改并返回settings
var settings = { validate:false,limit:5,name:'foo'};
var options = {validate:true,name:'bar'};
jquery.extend(settings,options);
那么結果呢就是seetings == {validate:true