我最喜欢的jQuery插件模板-白红宇

我最喜欢的jQuery插件模板

阅读量：6366 次

发布时间：2019-06-23

本文共 1428 字，大约阅读时间需要 4 分钟。

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