推荐一款jQuery插件模板

前端之家收集整理的这篇文章主要介绍了推荐一款jQuery插件模板前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_301_0@我使用jQuery已经有相当长的时间了,并且我会常常为它写一些插件(plugin)。我尝试过用不同的方式去写,现在这个模板是我最喜欢的:


@H_301_0@<div class="codetitle"><a style="CURSOR: pointer" data="19051" class="copybut" id="copybut19051" onclick="doCopy('code19051')"> 代码如下:
<div class="codebody" id="code19051">
;(function($) {
// multiple plugins can go here
(function(pluginName) {
var defaults = {
color: 'black',
testFor: function(div) {
return true;
}
};
$.fn[pluginName] = function(options) {
options = $.extend(true,{},defaults,options);

return this.each(function() {
var elem = this,
$elem = $(elem);

// heres the guts of the plugin
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'});

@H_301_0@  以下是我喜欢这种模板的原因

@H_301_0@  1. 你仍然可以访问里面的默认选项,即便它被重写了(简单地通过父属性的访问)

@H_301_0@  2. 通过修改pluginName即可更改插件的名字。(这种方式对代码压缩也非常有利)

@H_301_0@  第#1点非常强大,比如说我们希望复写这个方法,但是仍然希望保留原来的方法,我们可以看下面的例子:

@H_301_0@
代码如下:
var someVarThatMayBeSet = false;
/ code ... /

$('.borderize').borderize({
color: someVarThatMayBeSet ? 'red' : $.fn.borderize.defaults.color
});

@H_301_0@小伙伴们,你们也会喜欢上这款jQuery插件模板的吧,他实在是太灵活了。

猜你在找的jQuery相关文章