读jquery之二(两种扩展)

转自:

上一篇分析了jquery对象的组成,这次来分析下jquery的extend方法。部分如下:

Js代码  
  1. jQuery.extend = jQuery.fn.extend = function() {   
  2.      ...   
  3. };  

我们可以用$.extend去扩展自定义的对象,如:

Js代码  
  1. var myself = {name:jack};   
  2. $.extend(myself, {setName:function)(n){this.name=n;} });   
  3. 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方法,只传一个参数。如下:

Js代码  
  1. jQuery.extend({   
  2.     noConflict: function( deep ) {   
  3.         window.$ = _$;   
  4.         if ( deep )   
  5.             window.jQuery = _jQuery;   
  6.         return jQuery;   
  7.     },   
  8.         ...   
  9. });  

我们知道extend中如果只传一个参数,那么将执行该句:

Js代码  
  1. target = this;  

即扩展自己,而这里的this则是function jQuery。也就是说给function jQuery添加了许多静态方法,这些方法都可以直接通过jQuery.xx(或$.xx)方式来调用,而不是先执行(调用)jQuery方法再去调用xx,如$("#id").xx。也许下面这个例子更容易理解:

Js代码  
  1. function fun(){}//定义一个类(函数)   
  2.   
  3. //为该类(函数)添加一个静态方法extend   
  4. fun.extend=function(obj){   
  5.     for(var a in obj)   
  6.         this[a] = obj[a];//注意:这里的tihs即fun   
  7. }   
  8.   
  9. //调用extend为该类添加了静态属性name,静态方法method1   
  10. fun.extend({name:"fun",method1:function(){}});   
  11.   
  12. //输出name,prototype,extend,method1   
  13. console.dir(fun)  

因此,jquery中的isFunction, isArray, trim等都是静态方法,只能通过$.isFunction, $.isArray, $.trim来调用。而不能通过$("...").isFuction, $("...").isArray, $("...").trim调用。

2,通过jQuery.fn.extend扩展

     jQuery.fn等于jQuery.prototype,也就是说给function jQuery的原型(prototype)上挂了个extend方法。通过调用jQuery.fn.extend(object)来扩展时(注意只传一个参数object),extend函数中仍然会执行

Js代码  
  1. target = this;  

 而这时的this则是jQuery.prototype(上面则是jQuery函数自身)。即给jQuery.prototype上添加了许多属性,方法。当jQuery函数执行时,如$()或jQuery(),更多时候是$()。该函数会new一个jQuery(见上一篇jquery对象的组成)。这时则把扩展的属性,方法都附加到new生成的对象上了。也许下面这个示例更容易理解:

Js代码  
  1. function fun(){}//定义一个类(函数)   
  2.   
  3. //给该类原型上添加一个方法extned   
  4. fun.prototype.extend = function(obj){   
  5.     for(var a in obj)   
  6.         this[a] = obj[a];//注意:这里的this即是fun.prototype   
  7. }              
  8.   
  9. //调用extend方法给fun.prototype上添加属性,方法   
  10. fun.prototype.extend({name:"fun2",method1:function(){}})   
  11.   
  12. //输出name,extend,method1   
  13. console.dir(new fun())  

因此扩展的属性或方法都添加到jquery对象上了。

如bind, one, unbind等可以通过$("...").bind, $("...").one, $("...").unbind方式调用。却不能通过 $.bind, $.one, $.unbind方式调用。

jquery库与prototype库一样都是通过extend方法扩展出整个库的。相对来说jqueyr的扩展方式更难理解一些。

总结如下:

a,jQuery.extend({...})是给function jQuery添加静态属性或方法

b,jQuery().extend({...})是给jquery对象添加属性或方法。

ps:这里的jQuery即为$。

原文地址:https://www.cnblogs.com/beijia/p/jquery2.html