//源码剖析都基于jQuery-2.0.3版本,主要考虑到兼容IE
一、关于jQuery对象实例化的逻辑:
整个jQuery程序被包裹在一个匿名自执行行数内:
(function(window,undefined){ //...... })(window);
外部程序不能直接调用jQuery对象的属性和方法,jQuery所有方法和属性被变成局部私有的。例如:
1 (function(window,undefined){ 2 var a = "我是a"; 3 var b = function(a){ 4 alert("我是b"); 5 } 6 })(window); 7 console.log(a); 8 //报错:a is not defined(a未定义) 9 b(); 10 //报错:b is not defined(b未定义)
既然所有方法和属性都是私有的,就存在一个问题,如何使用jQuery对象和对象的方法和属性呢?
这就产生了jQuery的接口$:(8825~8827行)
if ( typeof window === "object" && typeof window.document === "object" ) { window.jQuery = window.$ = jQuery; }
这个逻辑处理了jQuery的对外接口,将自身赋给window对象下的$属性,同时还赋给了window对象下的jQuery属性,这样在全局下(window对象)就有了两个属性可以调取jQuery,分别是$和jQuery;
然后jQuery又是通过一个构造方法实现的(61~64行)
1 jQuery = function( selector, context ) { 2 // The jQuery object is actually just the init constructor 'enhanced' 3 return new jQuery.fn.init( selector, context, rootjQuery ); 4 }
通过上面的源码可以看到,jQuery是将两个参数selector,context传入一个init()方法(init()方法会返回一个对象);
init立即执行获后获得的就是一个jQuery对象初始化对象。 193行 //return jQuery.makeArray( selector, this );
//通常的jQuery对象初始化 $(fuction(){ //通过jQuery实现的具体业务逻辑 });
暂且不说写入自己的这个匿名方法参数的原理,$()就等于实现了jQuery(),也同等于init()执行并返回对象,这个对象就是jQuery对象的实例化。
还记得在jQuery通过window的自身扩展的$属性和jQuery属性来实现jQuery的接口,也就是说,jQuery实例化的方法还可以写成:
//通常的jQuery对象初始化 jQuery(fuction(){ //通过jQuery实现的具体业务逻辑 });
以上就是jQuery对象实初始化的全部过程和内容,接下来正式进入jQuery原型的构建原理和extend内部扩展方法说明的内容:
继续剖析jQuery原型的构建原理:
从上面对象实例化的jQuery的过程可以知道,jQuery的对象原型是通过init()方法构造的,然而下面一段代码一定会让很多人疑惑(96~279行)。
jQuery.fn = jQuery.prototype = {......}
前面的构造逻辑已经表明了,jQuery对象是通过init()方法构造的,
那么jQuery的原型应该就是基于init构造方法的,为什么还要在这里写jQuery的原型呢?
所以往后看,源码283行有如下代码:
jQuery.fn.init.prototype = jQuery.fn;
这行代码就是将前面写的jQuery原型赋给了init的原型,
所以,jQuery通过init()构造实例对象,最后还是基于自身的原型构造的。最终的原型链指向的还是jQuery.proptotype;
在源码96行可以看到,jQuery的原型是一个自定义的对象(前面有提到);
jQuery.fn = jQuery.prototype = {......}
所以在源码的100行有这样的代码,重新将构造方法指向了jQuery,实现了jQuery的构造逻辑。
constructor: jQuery,
二、jQuery构建模型分析图
三、jQuery构建逻辑的实现过程(仿写jQuery)
1.创建一个闭包环境