1、jQuery总体轮廓

2016-3-13    分类: jQuery深入解剖

//请按 数字的顺序看,代码过多可以用关键词 //1 的方法去搜索代码
//1 这里用匿名函数自动用的原因是,在匿名函数里面的 变量和方法就算跟外界有相同的名称也不会用冲突,因为外界访问不到匿名函数里面的变量和方法。
// 第一个参数是传入的是window对象,第二个参数什么都不传入,在什么都不传入的情况下此参数就是纯undefined,这么做的原因是为了保证undefined的参数的值就是undefined,因为有些浏览器是这个修改undefined的值的但有些浏览器不能修改,为了兼容性,在什么都不传入的情况下此参数就是纯undefined。

//2,传入第一个参数是window,其实也可以不用传当函数里面找不到window的时候,JS会根据作用域链往父亲作用域找,还找不到就去爷爷作用域找,但是这样消耗资源,如果直接引入window的话就免去寻找的时间了,第二参数什么都不加,如果什么都不加在函数里面此参数的值肯定是undefined。

//3 声明一个函数名称是jQuery并且自调用。

//4 在window对象下声明一个$和jQuery,这样jquery就是window下扩展出来的一个对象了,同时他的作用也是为了缩写jQuery用$代替。

//5 在jQuery函数里面又定义了一个jQuery函数,在代码的41行处又返回了一个jQuery给jQuery其实都是一样的,就好像是自己的一台手机给人加工扩展了新的功能后又还给了自己,最后这手机还是你的。

//6 每声明一个函数的时候都会存在着这么一个空的原型对象,这是JS基础。这行代码的作用其实也就是简化了prototype的长度为fn而已。所以$.fn 也就是调用了jQuery.prototype等价的。这行代码也覆盖了//3处的构造函数jQuery的原型对象

//7 此代码的作用 去看https://www.xgllseo.com/wp-content/uploads/2014/09/Untitled-1.html

//8 在jq的原型对象中扩展的一个方法

//9 这里面是init自己的属性和方法也就是 //10中实例化并返回给jQuery的,所以 平时我们写的$()调用的其实就是 这里面的属性和方法了。真相终于大白了!!

//10 此处return了一个实例化对象给了jQuery,这里实例化的对象就是jQuery原型对象中的init方法,以后我们调用jQuery()的时候其实也就是调用了 jQuery.fn.init实例化后的对象,既然是对象的话我们就能以 object.xx的形式去调用里面的属性和方法。以往我们看到的 $().height() $().css() 的这样形式就是这句话的作用。

//11 这里定义的是一堆jQuery原型属性和方法

//12 之前说过$()调用的是jQuery.fn.init里面的属性和方法,但是为什么$()也能够调用//11处jQuery原型属性和方法呢?,这就是这段代码的作用了。你只需要这么理解//6 jQuery.prototype里面的代码全部给了 //8 jQuery.fn.init.prototype来继承当然也其中包括了 //11处的代码,所以$()也能够调用//11处jQuery原型属性和方法了,又一次真相大白。

//13

(function(window,undefined){ //1
  var jquery=(function(){ //3
   /*----------------------------*/
     var jquery=function(select,context){ //5
         return new jquery.fn.init(select,context,rootjquery); //10
     };
     jquery.fn=jquery.prototype={ //6
        constructor:jquery, // 7
        init:function(select,context,rootjquery){ //8
           //9
        }
        //11
     };
     jquery.fn.init.prototype=jquery.fn; //12
     jquery.extend=jquery.fn.extend=function(){}; //13
     jquery.extend({ });
     return jquery;
     /*----------------------------*/
   })();
   window.jquery=window.$=jquery; //4
})(window); //2

演示文档下载

 

别人的解剖分析(推荐看):https://github.com/chokcoco/jQuery-