推荐一款jQuery插件模板
推荐一款jQuery插件模板
发布时间:2016-12-30 来源:查字典编辑
摘要:我使用jQuery已经有相当长的时间了,并且我会常常为它写一些插件(plugin)。我尝试过用不同的方式去写,现在这个模板是我最喜欢的:复制...

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

复制代码 代码如下:

;(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'});

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

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

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

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

复制代码 代码如下:

$('.borderize').borderize({

testFor: function(elem) {

var $elem = $(elem);

if (elem.is('.inactive')) {

return false;

} else {

// calling "parent" function

return $.fn.borderize.defaults.testFor.apply(this, arguments);

}

}

});

We can even do this with regular properties like this

var someVarThatMayBeSet = false;

/* code ... */

$('.borderize').borderize({

color: someVarThatMayBeSet ? 'red' : $.fn.borderize.defaults.color

});

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类