我最喜欢的jQuery插件模板-优快云博客

本文介绍了一种作者常用的jQuery插件编写模板，该模板通过闭包保护默认配置，并允许覆盖默认行为同时保持对原始功能的访问。此外，还展示了如何根据不同条件定制插件的行为。

　　我使用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 
        
         });