根據(jù)《jQuery高級(jí)編程》的描述，jQuery插件開發(fā)方式主要有三種：
通過$.extend()來擴(kuò)展jQuery，添加的是靜態(tài)方法，用得不多。
通過$.fn 向jQuery添加新的方法渠脉，常用方法，下面要介紹的寫法瓶佳。
通過$.widget()應(yīng)用jQuery UI的部件工廠方式創(chuàng)建芋膘，用得不多。
;(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)用
$(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px',
'textDecoration': 'underline'
});
})
注釋
- ; 用來防止上一行沒有用 ; 結(jié)尾導(dǎo)致程序無法執(zhí)行
- (function( ){ })( );自調(diào)用匿名函數(shù)用來避免污染全局作用域
- jQuery, window, document將系統(tǒng)變量以參數(shù)形式傳遞到插件內(nèi)部window等系統(tǒng)變量在插件內(nèi)部就有了一個(gè)局部的引用霸饲，可以提高訪問速度为朋，會(huì)有些許性能的提升
- undefined我們并沒有傳遞這個(gè)參數(shù)，但卻在接收時(shí)接收了它厚脉，因?yàn)閷?shí)際并沒有傳习寸，所以‘undefined’那個(gè)位置接收到的就是真實(shí)的'undefined'了
- 使用面向?qū)ο蟮姆椒ㄟM(jìn)行插件開發(fā)，使得代碼易維護(hù)和擴(kuò)展
- $.extend方法用來合并用戶配置和默認(rèn)配置傻工，參數(shù)中使用{}空對(duì)象是為了避免修改默認(rèn)defaults配置在插件中的值
- 最后用return返回起到插件鏈?zhǔn)秸{(diào)用的作用
