我最喜欢的jQuery插件模板

　　我使用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($) {   // 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点非常强大，比如说我们希望复写这个方法，但是仍然希望保留原来的方法，我们可以看下面的例子：

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

　　你有更好的模板吗？欢迎回复。

　　原文 kolodny.github.io