jQuery外掛程式的開發

2021-07-04 03:50:08 字數 2966 閱讀 4717

jquery外掛程式開發方式主要有三種:

通過$.extend()來擴充套件jquery

通過$.fn 向jquery新增新的方法

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

通常我們使用第二種方法來進行簡單外掛程式開發,說簡單是相對於第三種方式。第三種方式是用來開發更高階jquery部件的,該模式開發出來的部件帶有很多jquery內建的特性,比如外掛程式的狀態資訊自動儲存,各種關於外掛程式的常用方法等,非常貼心,這裡不細說。

而第一種方式又太簡單,僅僅是在jquery命名空間或者理解成jquery身上新增了乙個靜態方法而以。所以我們呼叫通過$.extend()新增的函式時直接通過$符號呼叫($.myfunction())而不需要選中dom元素($('#example').myfunction())。請看下面的例子

$.extend(

})$.sayhello(); //呼叫

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

$.extend(

})$.log('initializing...'); //呼叫

下面我們就來看第二種方式的jquery外掛程式開發。

基本格式:

$.fn.pluginname = function()

$.fn.myplugin = function()

在上面外掛程式**中,我們在this身上呼叫jquery的css()方法,也就相當於在呼叫 $('a').css()。

更改後我們的外掛程式**為:

$.fn.myplugin = function() ))

}支援鏈式呼叫只需return一下即可

$.fn.myplugin = function() ))

}讓外掛程式接收引數

$.fn.myplugin = function(options) ;

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

return this.css();

}呼叫的時候指定顏色,字型大小未指定,會運用外掛程式裡的預設值12px。

$('a').myplugin();

同時指定顏色與字型大小:

$('a').myplugin();

保護好預設引數

乙個好的做法是將乙個新的空物件做為$.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() );

})用自呼叫匿名函式包裹你的**

(function() ,

this.options = $.extend({}, this.defaults, opt)

}//定義beautifier的方法

beautifier.prototype = );}}

//在外掛程式中使用beautifier物件

$.fn.myplugin = function(options)

})();

將系統變數以變數形式傳遞到外掛程式內部

var foo=function()//注意這裡沒有用分號結尾

//開始我們的**。。。

(function())();

本來別人的**也正常工作,只是最後定義的那個函式沒有用分號結尾而以,然後當頁面中引入我們的外掛程式時,報錯了,我們的**無法正常執行。

原因是我們用來充當自呼叫匿名函式的第一對括號與上面別人定義的函式相連,因為中間沒有分號嘛,總之我們的**無法正常解析了,所以報錯。

所以好的做法是我們在**開頭加乙個分號,這在任何時候都是乙個好的習慣。

var foo=function()//注意這裡沒有用分號結尾

//開始我們的**。。。

;(function())();

同時,將系統變數以引數形式傳遞到外掛程式內部也是個不錯的實踐。

當我們這樣做之後,window等系統變數在外掛程式內部就有了乙個區域性的引用,可以提高訪問速度,會有些許效能的提公升

最後我們得到乙個非常安全結構良好的**:

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

而至於這個undefined,稍微有意思一點,為了得到沒有被修改的undefined,我們並沒有傳遞這個引數,但卻在接收時接收了它,因為實際並沒有傳,所以『undefined』那個位置接收到的就是真實的'undefined'了。是不是有點hack的味道,值得細細體會的技術,當然不是我發明的,都是從前人的經驗中學習。

所以最後我們的外掛程式成了這樣:

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

this.options = $.extend({}, this.defaults, opt)

}//定義beautifier的方法

beautifier.prototype = );}}

//在外掛程式中使用beautifier物件

$.fn.myplugin = function(options)

})(jquery, window, document);

乙個安全,結構良好,組織有序的外掛程式編寫完成。

jQuery 外掛程式開發

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

jquery 外掛程式開發

自定義主要通過兩種方式實現 extend fn.extend 呼叫的方法分別是 aa this aa 注意 建立函式時不要放在 function 中,呼叫時候要放在事件裡面 this click function jquery.extend 函式詳解 jquery的extend擴充套件方法 jque...

jquery 外掛程式開發

jquery外掛程式開發一般通過兩種框架方式 一種是在jquery物件上直接定義新成員,形成外掛程式 另一種是封裝完整的外掛程式 然後將jqeury作為引數自身呼叫,達到給jquery物件擴充套件功能目的,形成外掛程式。其實兩種方式都是給jqeury物件擴充套件成員來實現外掛程式功能的,所以本質上功...