jQuery插件開發(fā)模式
jQuery插件一般有三種開發(fā)方式：
- 通過$.extend來擴展jQuery
- 通過$.fn 向jQuery添加新的方法
- $.widget()應用jQuery UI的部件工廠方式創(chuàng)建
第一種$.extend()相對簡單，一般很少能夠獨立開發(fā)復雜插件慈省，第三種是一種高級開發(fā)模式踩晶，本文不做介紹。第二種則是一般插件開發(fā)用到的方式垫言，本文著重講述悯衬。
插件開發(fā)
第二種插件開發(fā)方式一般是如下定義
$.fn.pluginName=function(){
// your code here
};
插件開發(fā)一般用面向?qū)ο笏季S
例如定義一個對象
var Test=function(ele,opt){
this.ele=ele,
this.defaults={
'color':'red',
'fontSize':'12px',
'textDecoration':'none'
},
this.options=$.extend({},this.defaults,opt);
};
//定義方法
Test.prototype={
changeCss: function(){
return this.ele.css({
'color':this.options.color,
'fontSize':this.options.fontSize,
'textDecoration':this.options.textDecoration
});
}
};
$.extend({},this.defaults,opt)有{}主要是為了創(chuàng)建一個新對象肾扰，保留對象的默認值巍举。
$.fn.myPlugin=function(options){
// 創(chuàng)建test實體
var test=new Test(this,options);
return test.changeCss();
};
調(diào)用插件
$(function(){
$('a').myPlugin({
'color':'blue',
'fontSize':'20px'
});
});
上述開發(fā)方法的問題
上述的開發(fā)存在一個嚴重的問題脆荷，就是定義了一個全局的Test，這樣對于插件的兼容等方面都不好懊悯。萬一別的地方用到Test蜓谋，那就天啦擼。所有我們要把代碼包起來炭分，用自調(diào)用匿名函數(shù)（塊級作用域或者私有作用域）包裹桃焕，就不會出現(xiàn)這個問題了；包裹方法如下
;(function($,window,document,undefined){
// code
})(jQuery,window,document);
