复制代码 代码如下:
jquery.extend = jquery.fn.extend = function() {
...
};
我们可以用$.extend去扩展自定义的对象,如
复制代码 代码如下:
var myself = {name:jack};
$.extend(myself, {setname: function(n){this.name=n;} });
myself.setname(tom);
通过$.extend为对象myself添加了setname方法。但这里主要讨论$.extend如何构建jquery库的。不知注意到上面代码中jquery.extend和jquery.fn.extend是同一个函数。我们浏览下jquery库,发现有些方法是通过调用jquery.extend扩展的,有些则是通过调用jquery.fn.extend扩展的。
下面分别讨论:
1,通过jquery.extend扩展
我们知道jquery.extend中的jquery类型是function,即typeof jquery值为字符串“function”。如果把jquery当成一个类,jquery.extend相当于为该类添加了静态方法extend。静态方法是不需要new一个实例再去调用的,通过“类名+方法名”直接调用。即jquery.extend(...),jquery又被赋值给$。因此我们更习惯$.extend(...)。
源码中直接调用jquery.extend方法,只传一个参数。如下
复制代码 代码如下:
jquery.extend({
noconflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jquery = _jquery;
return jquery;
},
...
});
我们知道extend中如果只传一个参数,那么将执行该句
复制代码 代码如下:
if ( length === i ) {
target = this;
--i;
}
即扩展自己,而这里的this则是function jquery。也就是说给function jquery添加了许多静态方法,这些方法都可以直接通过jquery.xx(或$.xx)方式来调用,而不是先执行(调用)jquery方法再去调用xx,如$(#id).xx。也许下面这个例子更容易理解
复制代码 代码如下:
function fun(){}//定义一个类(函数)
//为该类(函数)添加一个静态方法extend
fun.extend=function(obj){
for(var a in obj)
this[a] = obj[a];//注意:这里的tihs即fun
}
//调用extend为该类添加了静态属性name,静态方法method1
fun.extend({name:fun,method1:function(){}});
//输出name,prototype,extend,method1
console.dir(fun)
因此,jquery中的isfunction, isarray, iswindow等都是静态方法,只能通过$.isfunction, $.isarray, $.window引用。而不能通过$(...).isfuction, $(...).isarray, $(...).iswindow方式引用。
2,通过jquery.fn.extend扩展
jquery.fn等于jquery.prototype,也就是说给function jquery的原型(prototype)上挂了个extend方法。通过调用jquery.fn.extend(object)来扩展时(注意只传一个参数object),extend函数中仍然会执行
复制代码 代码如下:
if ( length === i ) {
target = this;
--i;
}
而这时的this则是jquery.prototype(第一条提到的则是jquery函数自身)。即给jquery.prototype上添加了许多属性,方法。当jquery函数执行时,如$()或jquery(),更多时候是$()。该函数会new一个jquery(见上一篇jquery对象的组成)。这时则把扩展的属性,方法都附加到new生成的对象上了。也许下面这个示例更容易理解
复制代码 代码如下:
function fun(){}//定义一个类(函数)
//给该类原型上添加一个方法extned
fun.prototype.extend = function(obj){
for(var a in obj)
this[a] = obj[a];//注意:这里的this即是fun.prototype
}
//调用extend方法给fun.prototype上添加属性,方法
fun.prototype.extend({name:fun2,method1:function(){}})
//输出name,extend,method1
console.dir(new fun())
因此扩展的属性或方法都添加到jquery对象上了。如bind, one, unbind等可以通过$(...).bind, $(...).one, $(...).unbind方式调用。却不能通过 $.bind, $.one, $.unbind方式调用。
jquery与prototype一样都是通过extend方法扩展出整个库的。相对来说jquery的扩展方式更难理解一些。
总结如下:
1,jquery.extend({...})是给function jquery添加静态属性或方法。
2,jquery().extend({...})是给jquery对象添加属性或方法。
/js/2011/zchain/zchain-0.2.js
