詳解jQuery插件開發(fā)方式
jQuery插件開發(fā)
一般來說,jQuery插件的開發(fā)分為兩種:一種是掛在jQuery命名空間下的全局函數(shù),也可稱為靜態(tài)方法;另一種是jQuery對象級別的方法,即掛在jQuery原型下的方法,這樣通過選擇器獲取的jQuery對象實例也能共享該方法。
一、jQuery擴(kuò)展
1、$.extend(object)
類似于.Net的擴(kuò)展方法,用于擴(kuò)展jQuery。然后就可以用$.的方式調(diào)用。
$(function(){ $.extend({ fun1: function () { alert("為jQuery擴(kuò)展一個fun1函數(shù)!"); } }); $.fun1(); })
2、$.fn.extend(object)
擴(kuò)展jQuery的對象。
$.fn.extend({ fun2: function () { alert("執(zhí)行方法2"); } }); $("#id1").fun2();
可以用google來看看:
上面的寫法等同于:
$.fn.fun2 = function () { alert("執(zhí)行方法2"); } $(this).fun2();
二、私有域
其定義方式如下:
(function ($) { })(jQuery); //相當(dāng)于 var fn = function (xxoo) { }; fn(jQuery);
以下代碼彈出123。
$(function(){ var fn = function (xxoo) { }; fn(alert(123)); })
三、定義插件的基本步驟
1、定義作用域
開發(fā)一個jQuery插件,首先要把插件的代碼與外界隔離開來,外部的代碼不允許直接訪問插件內(nèi)部的代碼,插件內(nèi)部的代碼也不影響外部。
//步驟1 定義插件私有作用域
(function ($) { })(jQuery);
這樣就能保證插件內(nèi)部的代碼與外界隔離了。
2、擴(kuò)展jQuery
定義了作用域之后,為了能夠讓外部調(diào)用,就需要將插件擴(kuò)展到j(luò)Query。
//步驟1 定義私有作用域 (function ($) { //步驟2 插件的擴(kuò)展方法名稱 $.fn.MyFrame = function (options) { } })(jQuery);
3、默認(rèn)值
定義了jQuery插件之后,如果希望某些參數(shù)具有默認(rèn)值,那么可以以這種方式來指定。
//步驟1 定義私有作用域 (function ($) { //步驟3 插件的默認(rèn)值屬性 var defaults = { Id: '#id1', }; //步驟2 插件的擴(kuò)展方法名稱 $.fn.MyFrame = function (options) { //步驟3 合并用戶自定義屬性,默認(rèn)屬性(如果options為空,則使用defaults) var options = $.extend(defaults, options); } })(jQuery);
4、支持jQuery選擇器
//步驟1 定義私有作用域 (function ($) { //步驟3 插件的默認(rèn)值屬性 var defaults = { Id: '#id1', }; //步驟2 插件的擴(kuò)展方法名稱 $.fn.MyFrame = function (options) { //步驟3 合并用戶自定義屬性,默認(rèn)屬性(如果options為空,則使用defaults) var options = $.extend(defaults, options); } //步驟4 支持jQuery選擇器 this.each(function () { }); })(jQuery);
5、支持jQuery的鏈?zhǔn)秸{(diào)用
//步驟1 定義私有作用域 (function ($) { //步驟3 插件的默認(rèn)值屬性 var defaults = { Id: '#id1', }; //步驟2 插件的擴(kuò)展方法名稱 $.fn.MyFrame = function (options) { //步驟3 合并用戶自定義屬性,默認(rèn)屬性(如果options為空,則使用defaults) var options = $.extend(defaults, options); } //步驟4 支持jQuery選擇器 //步驟5 支持鏈?zhǔn)秸{(diào)用(將步驟4返回) return this.each(function () { }); })(jQuery);
6、插件內(nèi)部方法
//步驟1 定義私有作用域 (function ($) { //步驟3 插件的默認(rèn)值屬性 var defaults = { Id: '#id1', }; //步驟6 在插件里定義函數(shù) var MyFun = function (obj) { alert(obj); } //步驟2 插件的擴(kuò)展方法名稱 $.fn.MyFrame = function (options) { //步驟3 合并用戶自定義屬性,默認(rèn)屬性(如果options為空,則使用defaults) var options = $.extend(defaults, options); } //步驟4 支持jQuery選擇器 //步驟5 支持鏈?zhǔn)秸{(diào)用(將步驟4返回) return this.each(function () { //步驟6 在插件里定義函數(shù) MyFun(this); }); })(jQuery);
由于作用域關(guān)系,步驟6的私有函數(shù)目前允許的插件內(nèi)部使用。
以上就是本文的全部內(nèi)容,希望對大家有所幫助,謝謝對腳本之家的支持!
相關(guān)文章
JS實現(xiàn)title標(biāo)題欄文字不間斷滾動顯示效果
這篇文章主要介紹了JS實現(xiàn)title標(biāo)題欄文字不間斷滾動顯示效果,通過javascript時間函數(shù)定時操作動態(tài)修改頁面元素實現(xiàn)滾動效果,需要的朋友可以參考下2016-09-09JavaScript實現(xiàn)同步于本地時間的動態(tài)時間顯示方法
這篇文章主要介紹了JavaScript實現(xiàn)同步于本地時間的動態(tài)時間顯示方法,實例分析了javascript獲取本地時間及動態(tài)顯示的技巧,并對實現(xiàn)代碼進(jìn)行了較為詳盡的分析說明,需要的朋友可以參考下2015-02-02小程序按鈕避免多次調(diào)用接口和點擊方案實現(xiàn)(不用showLoading)
這篇文章主要介紹了小程序按鈕避免多次調(diào)用接口和點擊方案實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04