最近在学写jQuery插件,记录一下写插件的方式。
jQuery为用户提供了jQuery.extend()和jQuery.fn.extend()的方法。
jQuery.extend()方法将两个或多个对象的内容合并到第一个对象中。一般jQuery.extend()方法用来合并参数。
用法:<code>jQuery.extend(target [, object1 ] [, objectN ]);</code>
或<code>jQuery.extend([deep],target [, object1 ] [, objectN ]);</code>
如果deep为true,则递归合并,会进行深拷贝.
jQuery.extend(target [, object1 ] [, objectN ])示例:
<pre>
var person1 = {
name:'who',
age:18,
parents:{father: 'someone', mom: 'anybody'}
};
var person2= {
parents:{mom:'someone'},
sex:'boy'
};
$.extend(person1,person2);//person1={name:'who',age:18,parents:{mom:'someone'},sex:'boy'};
</pre>
jQuery.extend([deep],target [, object1 ] [, objectN ])示例:
<pre>
var person1 = {
name:'who',
age:18,
parents:{father: 'someone', mom: 'anybody'}
};
var person2= {
parents:{mom:'someone'},
sex:'boy'
};
$.extend(true,person1,person2);//person1={name:'who',age:18,parents:{father:'someone',mom:'someone'},sex:'boy'};
</pre>
一般在写插件时,不会覆盖掉默认参数defaults,所以在扩展参数时一个好的写法是$.extend({},defaults,options),用一个空对象{}作为第一个参数,这样能将所有值合并到{}中,并且保护好默认参数。
jQuery.fn.extend()方法将对象的内容合并到jQuery原型上以提供新的jQuery实例方法。该方法扩展jQuery prototype($.fn)对象以提供可以链接到该jQuery()函数的新方法。
插件一般有两种书写形式:
<pre>
//第一种
$.fn.functionName = function([options]){};//这个一次只能声明一个函数
//第二种
$.fn.extend({func1:function{},funcN:function{}});//这个可以声明多个函数
</pre>
可以这样写插件:
<pre>
$.fn.myPlugin = function(options){
var defaults={attr1:value1,attrN:valueN};//默认参数
var settings=$.extend({},defaults,options);//扩展参数
return this.each(function(){
//some operations use settings you want
});//加return返回jQuery对象本身,这样是为了能支持jQuery的链式调用
}
//调用方式
$(obj).myPlugin({prop1:value1,propN:valueN});
</pre>
或者这样:
<pre>
$.fn.extend({
func1:function(options){
//something like $.fn.functionName
},
func2:function(options){
//something like $.fn.functionName
}
});
//调用方式
$(obj).func1(options);
$(obj).func2(options);
</pre>
一种较好的写法是将代码写在一个自调用匿名函数里面,例如:
<pre>
;(function($,window,document,undefined){
//our code
})(jQuery,window,document);
</pre>
说明几点:
- 在最前面加分号
;
是为了防止别人在引用该插件时,别人在之前编写的代码结尾没有加;
会导致该匿名函数与别人的代码相连,代码无法正常解析而报错。 - $实参接受jQuery对象;window, document实参分别接受window, document对象,window, document对象都是全局环境下的,而将window等系统变量以参数形式传递到插件内部时,这些变量在插件内部是一个局部的引用,这样可以减少作用域链的查询时间,提高访问速度。
- undefined形参可能是为了兼容性,实际上并没有传递这个参数。