jquery外掛程式開發總結

jquery的外掛程式開發主要分三種：$.extend()， $.fn，$.widget()應用jquery ui的部件工廠方式建立

通常使用第二種方式進行開發。

第一種方式如下： 

$.extend(

})$.sayhello(); 
//呼叫
$.sayhello('wayou'); //
帶參呼叫

但這種方式無法利用jquery強大的選擇器帶來的便利，要處理dom元素以及將外掛程式更好地運用於所選擇的元素身上，還是需要使用第二種開發方式。

第二種開發方式如下：

$.fn.myplugin = function

()

jquery乙個時常優雅的特性是支援鏈式呼叫，選擇好dom元素後可以不斷地呼叫其他方法，要讓外掛程式不打破這種鏈式呼叫，只需return一下即可。

$.fn.myplugin = function

() ))
}

需要傳參的時候。。

$.fn.myplugin = function

(options) ;
var settings =$.extend(defaults, options);
return
this
.css();
}

上面**呼叫extend時會將defaults的值改變，好的做法是將乙個新的空物件做為$.extend的第乙個引數，defaults和使用者傳遞的引數物件緊隨其後，這樣做的好處是所有值被合併到這個空物件上，保護了外掛程式裡面的預設值。

$.fn.myplugin = function

(options) ;
var settings = $.extend({},defaults, options);//
將乙個空物件做為第乙個引數
return
this
.css();
}

用物件導向的程式設計思想更好對**進行維護

//

定義beautifier的建構函式
var beautifier = function
(ele, opt) ,
this.options = $.extend({}, this
.defaults, opt)}//
定義beautifier的方法
beautifier.prototype =);
}}//在外掛程式中使用beautifier物件
$.fn.myplugin = function
(options)

為了避免汙染全域性變數，我們可以使用自呼叫匿名函式包裹**：

(function

() ,
this.options = $.extend({}, this
.defaults, opt)
} //定義beautifier的方法
beautifier.prototype =);
}} 
//在外掛程式中使用beautifier物件
$.fn.myplugin = function
(options) 
})();

在**的開頭加上；以避免和別的**產生衝突，同時，將系統變數以引數形式傳遞到外掛程式內部。

;(function

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

jquery外掛程式開發總結

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

jQuery外掛程式開發總結

jquery外掛程式開發兩個底層方法 jquery.extend deep target object1 objectn 將兩個或更多物件的內容合併到第乙個物件。當我們提供兩個或多個物件給 extend 物件的所有屬性都新增到目標物件 target引數 目標物件 第乙個引數 將被修改，並且將通過 e...

jQuery 外掛程式開發

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