這篇文章主要為大家詳細(xì)介紹了jQuery插件開發(fā)的相關(guān)資料,需要的朋友可以參考下
一、jQuery插件開發(fā)兩個(gè)底層方法
jQuery.extend([deep ], target [, object1 ] [, objectN ] )
將兩個(gè)或更多對(duì)象的內(nèi)容合并到第一個(gè)對(duì)象。
1、deep 如果是true，合并成為遞歸（又叫做深拷貝）
2、target 一個(gè)對(duì)象，如果附加的對(duì)象被傳遞給這個(gè)方法將那么它將接收新的屬性，如果它是唯一的參數(shù)則將擴(kuò)展jQuery的命名空間，這對(duì)于插件開發(fā)者希望向 jQuery 中添加新函數(shù)時(shí)是很有用的。
3、object1 一個(gè)對(duì)象，它包含額外的屬性合并到第一個(gè)參數(shù)
4、包含額外的屬性合并到第一個(gè)參數(shù)
當(dāng)我們提供兩個(gè)或多個(gè)對(duì)象給\(.extend()，對(duì)象的所有屬性都添加到目標(biāo)對(duì)象（target參數(shù)） 目標(biāo)對(duì)象（第一個(gè)參數(shù)）將被修改，并且將通過\).extend()返回。然而，如果我們想保留原對(duì)象，我們可以通過傳遞一個(gè)空對(duì)象作為目標(biāo)對(duì)象：
var settings = $.extend({}, defaults, options);
在默認(rèn)情況下，通過$.extend()合并操作是不遞歸的;
var object1 = {apple: 0,banana: {weight: 52, price: 100},cherry: 97};
var object2 = {banana: {price: 200},durian: 100};
$.extend(object1, object2);
//{apple: 0, banana: {price:200}, cherry: 97, durian: 100}
$.extend(true, object1, object2);
//{apple: 0, banana: {weight: 52, price:200}, cherry: 97, durian: 100}
jQuery.fn.extend()
在jQuery源碼中有jQuery.fn = jQuery.prototype = function(){……}即指向jQuery對(duì)象的原型鏈，對(duì)其它進(jìn)行的擴(kuò)展，作用在jQuery對(duì)象上面；
總結(jié)
1、jQuery.extend()能夠創(chuàng)建全局函數(shù)或選擇器，在實(shí)際開發(fā)中常使用jQuery.extend()方法作為插件方法傳遞系列選項(xiàng)結(jié)構(gòu)的參數(shù)
2、jQuery.fn.extend()能夠創(chuàng)建jQuery對(duì)象方法，一般用此方法來擴(kuò)展jQuery的對(duì)象插件
二、jQuery插件開發(fā)通用框架
;(function($, window, document, undefined){
//Plugin code here
})(jQuery, window, document);
使用分號(hào)是為了防止因前面的代碼沒有使用分號(hào)而導(dǎo)致插件函數(shù)不能正確解析
傳入jQuery是為了確保在匿名函數(shù)中正確的使用jQuery對(duì)象，防止多庫(kù)共存時(shí)$沖突
傳入window、document并非必須，只不過為了更快的訪問window和document
傳入undefined是為了防止undefined變量被更改，確保undefined的準(zhǔn)確性
三、jQuery插件開發(fā)的3種形式
1、類級(jí)別開發(fā)(封裝全局函數(shù)的插件)
類級(jí)別寫法：
//方式1
;(function($, window, document, undefined){
$.pluginName = function(){
//Plugin implementation code here
};
})(jQuery, window, document);
//方式2 當(dāng)全局函數(shù)較多時(shí)
;(function($, window, document, undefined){
$.extend({
pluginName = function(){
//Plugin code here
};
})
})(jQuery, window, document);
調(diào)用方法：$.pluginName();
2、對(duì)象級(jí)別的插件開發(fā)
對(duì)象級(jí)別插件寫法：
//方式1
;(function($, window, document, undefined){
$.fn.pluginName = function(options) {
return this.each(function() {
//this關(guān)鍵字代表了這個(gè)插件將要執(zhí)行的jQuery對(duì)象
//return this.each()使得插件能夠形成鏈?zhǔn)秸{(diào)用
var defaults = {
//pro : value
};
var settings = $.extend({}, defaults, options);
// plugin implementationcode here
});
}
})(jQuery, window, document);
//方式2
;(function($, window, document, undefined){
$.fn.extend({
pluginName : function(){
return this.each(function(){
// plugin code here
});
};
})
})(jQuery, window, document);
//方式3 這種類型的插件架構(gòu)允許您封裝所有的方法在父包中，通過傳遞該方法的字符串名稱和額外的此方法需要的參數(shù)來調(diào)用它們。
;(function($, window, document, undefined){
// 在我們插件容器內(nèi)，創(chuàng)造一個(gè)公共變量來構(gòu)建一個(gè)私有方法
var privateFunction = function() {
// code here
}
// 通過字面量創(chuàng)造一個(gè)對(duì)象，存儲(chǔ)我們需要的公有方法
var methods = {
// 在字面量對(duì)象中定義每個(gè)單獨(dú)的方法
init: function() {
// 為了更好的靈活性，對(duì)來自主函數(shù)，并進(jìn)入每個(gè)方法中的選擇器其中的每個(gè)單獨(dú)的元素都執(zhí)行代碼
return this.each(function() {
// 為每個(gè)獨(dú)立的元素創(chuàng)建一個(gè)jQuery對(duì)象
var $this = $(this);
// 創(chuàng)建一個(gè)默認(rèn)設(shè)置對(duì)象
var defaults = {
propertyName: 'value',
onSomeEvent: function() {}
}
// 使用extend方法從options和defaults對(duì)象中構(gòu)造出一個(gè)settings對(duì)象
var settings = $.extend({}, defaults, options);
// 執(zhí)行代碼
// 例如： privateFunction();
});
},
destroy: function() {
// 對(duì)選擇器每個(gè)元素都執(zhí)行方法
return this.each(function() {
// 執(zhí)行代碼
});
}
};
$.fn.pluginName = function() {
// 獲取我們的方法，遺憾的是，如果我們用function(method){}來實(shí)現(xiàn)，這樣會(huì)毀掉一切的
var method = arguments[0];
// 檢驗(yàn)方法是否存在
if(methods[method]) {
// 如果方法存在，存儲(chǔ)起來以便使用
// 注意：我這樣做是為了等下更方便地使用each（）
method = methods[method];
// 如果方法不存在，檢驗(yàn)對(duì)象是否為一個(gè)對(duì)象（JSON對(duì)象）或者method方法沒有被傳入
} else if( typeof(method) == 'object' || !method ) {
// 如果我們傳入的是一個(gè)對(duì)象參數(shù)，或者根本沒有參數(shù)，init方法會(huì)被調(diào)用
method = methods.init;
} else {
// 如果方法不存在或者參數(shù)沒傳入，則報(bào)出錯(cuò)誤。需要調(diào)用的方法沒有被正確調(diào)用
$.error( 'Method ' + method + ' does not exist on jQuery.pluginName' );
return this;
}
// 調(diào)用我們選中的方法
// 再一次注意我們是如何將each（）從這里轉(zhuǎn)移到每個(gè)單獨(dú)的方法上的
return method.call(this);
}
})(jQuery, window, document);
//方式4 面向?qū)ο蟮牟寮_發(fā) 將原型和構(gòu)造函數(shù)組合使用，使得通過構(gòu)造函數(shù)創(chuàng)建的每個(gè)實(shí)例都能繼承相關(guān)屬性與方法
;(function($, window, document, undefined){
//定義Beautifier的構(gòu)造函數(shù)
var Beautifier = function(ele, opt) {
this.$element = ele;
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
};
this.options = $.extend({}, this.defaults, opt);
}
//定義Beautifier的原型方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
//在插件中使用Beautifier對(duì)象
$.fn.myPlugin = function(options) {
//創(chuàng)建Beautifier的實(shí)體
var beautifier = new Beautifier(this, options);
//調(diào)用其方法
return beautifier.beautify();
}
})(jQuery, window, document);
調(diào)用方法：$.fn.pluginName();
3、通過$.widget()應(yīng)用jQuery UI的部件工廠方式創(chuàng)建
用來開發(fā)更高級(jí)jQuery部件的，該模式開發(fā)出來的部件帶有很多jQuery內(nèi)建的特性，比如插件的狀態(tài)信息自動(dòng)保存，各種關(guān)于插件的常用方法等
四、編寫JQuery插件需要注意的地方：
1、插件的推薦命名方法為：jquery.[插件名].js
2、所有的對(duì)象方法都應(yīng)當(dāng)附加到JQuery.fn對(duì)象上面，而所有的全局函數(shù)都應(yīng)當(dāng)附加到JQuery對(duì)象本身上。
3、可以通過this.each() 來遍歷所有的元素
4、在jQuery開發(fā)中，this關(guān)鍵詞通常引用的是當(dāng)前正在操作的DOM元素，但在當(dāng)前的jQuery插件上下文中，this關(guān)鍵詞引用的是當(dāng)前jQuery實(shí)例自身，唯一的例外是在當(dāng)前jQuery集合中遍歷所有元素時(shí)，$.each循環(huán)體內(nèi)的this引用的是這一輪遍歷所暴露的DOM元素
5、所有方法或函數(shù)插件，都應(yīng)當(dāng)以分號(hào)結(jié)尾，否則壓縮的時(shí)候可能會(huì)出現(xiàn)問題。為了更加保險(xiǎn)寫，可以在插件頭部添加一個(gè)分號(hào)（；），以免他們的不規(guī)范代碼給插件帶來 影響。
6、插件應(yīng)該返回一個(gè)JQuery對(duì)象，以便保證插件的可鏈?zhǔn)讲僮鳌?/P>
以上就是jQuery插件開發(fā)的知識(shí)點(diǎn)匯總，希望對(duì)大家的學(xué)習(xí)有所幫助。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試