我使用jQuery已经有相当长的时间了，并且我会常常为它写一些插件（plugin）。我尝试过用不同的方式去写，现在这个模板是我最喜欢的：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | ;(function($) {
(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);
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点非常强大，比如说我们希望复写这个方法，但是仍然希望保留原来的方法，我们可以看下面的例子：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $('.borderize').borderize({
testFor:function(elem) {
var$elem = $(elem);
if(elem.is('.inactive')) {
returnfalse;
}else{
return$.fn.borderize.defaults.testFor.apply(this, arguments);
}
}
});
We can evendothiswithregular properties likethis
varsomeVarThatMayBeSet =false;
$('.borderize').borderize({
color: someVarThatMayBeSet ?'red': $.fn.borderize.defaults.color
});
|
你有更好的模板吗？欢迎回复。
原文 kolodny.github.io
