jQuery外掛程式開發總結

jquery外掛程式開發兩個底層方法

jquery.extend([deep ], target [, object1 ] [, objectn ] )

將兩個或更多物件的內容合併到第乙個物件。

當我們提供兩個或多個物件給$.extend()，物件的所有屬性都新增到目標物件（target引數）

目標物件（第乙個引數）將被修改，並且將通過$.extend()返回。然而，如果我們想保留原物件，我們可以通過傳遞乙個空物件作為目標物件：

var settings = $.extend({}, defaults, options);

在預設情況下，通過$.extend()合併操作是不遞迴的;

var object2 = ,durian: 100};

$.extend(object1, object2);

$.extend(true, object1, object2);

jquery.fn.extend()

在jquery原始碼中有jquery.fn = jquery.prototype = function()即指向jquery物件的原型鏈，對其它進行的擴充套件，作用在jquery物件上面；

總結

jquery.extend()能夠建立全域性函式或選擇器，在實際開發中常使用jquery.extend()方法作為外掛程式方法傳遞系列選項結構的引數

jquery.fn.extend()能夠建立jquery物件方法，一般用此方法來擴充套件jquery的物件外掛程式

jquery外掛程式開發通用框架

;(function($, window, document, undefined))(jquery, window, document);

傳入jquery是為了確保在匿名函式中正確的使用jquery物件，防止多庫共存時$衝突

傳入window、document並非必須，只不過為了更快的訪問window和document

傳入undefined是為了防止undefined變數被更改，確保undefined的準確性

jquery外掛程式開發的3種形式

1、類級別開發(封裝全域性函式的外掛程式)

類級別寫法：

//方式1

;(function($, window, document, undefined);  
})(jquery, window, document);
//方式2 當全域性函式較多時
;(function($, window, document, undefined);  
})})(jquery, window, document);

2、物件級別的外掛程式開發

物件級別外掛程式寫法：

//方式1

;(function($, window, document, undefined);
var settings = $.extend({}, defaults, options);
// plugin implementationcode here
});}
})(jquery, window, document);
//方式2
;(function($, window, document, undefined));
};})
})(jquery, window, document);
//方式3 這種型別的外掛程式架構允許您封裝所有的方法在父包中，通過傳遞該方法的字串名稱和額外的此方法需要的引數來呼叫它們。
;(function($, window, document, undefined)  
// 通過字面量創造乙個物件，儲存我們需要的公有方法  
var methods =   
}  // 使用extend方法從options和defaults物件中構造出乙個settings物件  
var settings = $.extend({}, defaults, options);  
// 執行**  
// 例如： privatefunction();  
});  
},  
destroy: function() );  
}  };  
$.fn.pluginname = function() 來實現，這樣會毀掉一切的  
var method = arguments[0];  
// 檢驗方法是否存在  
if(methods[method])  else if( typeof(method) == 'object' || !method )  else   
// 呼叫我們選中的方法  
// 再一次注意我們是如何將each（）從這裡轉移到每個單獨的方法上的  
return method.call(this);  
}  })(jquery, window, document);
//方式4 物件導向的外掛程式開發 將原型和建構函式組合使用，使得通過建構函式建立的每個例項都能繼承相關屬性與方法
;(function($, window, document, undefined);
this.options = $.extend({}, this.defaults, opt);
}//定義beautifier的原型方法
beautifier.prototype = );}}
//在外掛程式中使用beautifier物件
$.fn.myplugin = function(options) 
})(jquery, window, document);

3、通過$.widget()應用jquery ui的部件工廠方式建立

用來開發更高階jquery部件的，該模式開發出來的部件帶有很多jquery內建的特性，比如外掛程式的狀態資訊自動儲存，各種關於外掛程式的常用方法等

編寫jquery外掛程式需要注意的地方：

所有的物件方法都應當附加到jquery.fn物件上面，而所有的全域性函式都應當附加到jquery物件本身上。

可以通過this.each() 來遍歷所有的元素

所有方法或函式外掛程式，都應當以分號結尾，否則壓縮的時候可能會出現問題。為了更加保險寫，可以在外掛程式頭部新增乙個分號（；），以免他們的不規範**給外掛程式帶來 影響。

外掛程式應該返回乙個jquery物件，以便保證外掛程式的可鏈式操作。

jquery外掛程式開發總結

類級別 就是給jquery本身加方法 物件級別 就是給jquery物件加方法 jquery.myalert function jquery function jquery 呼叫 mydiv pluginname dom pluginname options 傳引數，進行初始化 dom pluginn...

jquery外掛程式開發總結

jquery的外掛程式開發主要分三種 extend fn，widget 應用jquery ui的部件工廠方式建立 通常使用第二種方式進行開發。第一種方式如下 extend sayhello 呼叫 sayhello wayou 帶參呼叫 但這種方式無法利用jquery強大的選擇器帶來的便利，要處理do...

jQuery 外掛程式開發

一 類級別的外掛程式開發 即給jquery新增新的全域性函式，相當於給jquery類本身新增方法，jquery的全域性函式就是屬於jquery命名空間的函式。1 新增全域性函式 方法一 jquery.onetest function jquery.twotest function 方法二 jquer...