推荐一款jQuery插件模板
我使用jQuery已经有相当长的时间了,并且我会常常为它写一些插件(plugin)。我尝试过用不同的方式去写,现在这个模板是我最喜欢的:
;(function($){
//multiplepluginscangohere
(function(pluginName){
vardefaults={
color:'black',
testFor:function(div){
returntrue;
}
};
$.fn[pluginName]=function(options){
options=$.extend(true,{},defaults,options);
returnthis.each(function(){
varelem=this,
$elem=$(elem);
//heresthegutsoftheplugin
if(options.testFor(elem)){
$elem.css({
borderWidth:1,
borderStyle:'solid',
borderColor:options.color
});
}
});
};
$.fn[pluginName].defaults=defaults;
})('borderize');
})(jQuery);
//下面是用法
$('div').borderize();
$('div').borderize({color:'red'});
以下是我喜欢这种模板的原因
1.你仍然可以访问里面的默认选项,即便它被重写了(简单地通过父属性的访问)
2.通过修改pluginName即可更改插件的名字。(这种方式对代码压缩也非常有利)
第#1点非常强大,比如说我们希望复写这个方法,但是仍然希望保留原来的方法,我们可以看下面的例子:
$('.borderize').borderize({
testFor:function(elem){
var$elem=$(elem);
if(elem.is('.inactive')){
returnfalse;
}else{
//calling"parent"function
return$.fn.borderize.defaults.testFor.apply(this,arguments);
}
}
});
Wecanevendothiswithregularpropertieslikethis
varsomeVarThatMayBeSet=false;
/*code...*/
$('.borderize').borderize({
color:someVarThatMayBeSet?'red':$.fn.borderize.defaults.color
});
小伙伴们,你们也会喜欢上这款jQuery插件模板的吧,他实在是太灵活了。