【你的jQuery？是你的jQuery】（一）——jQuery的架子

目的：

 

了解jQuery整体结构，自己构造出$(oo).xx这种东西

 

解析：

在jQuery中，你会发现整篇满眼的“$(xx)”、“$(oo).css(xx)”这种，是的，它就是构造jQuery对象的构造函数简称，你可以这样理解:$==window.$==window.jQuery

也就是说我们常用的$为widow对象下的一个属性，那么这个属性是怎么跑到window上的呢？

我们先把源码中多余的代码去掉会看到：

一：

(function(window,undefined){

　　　　//code

})(window)

说明：

1、通过定义一个匿名函数，创建了一个“私有”的命名空间，该命名空间下，你可以玩命定义你的var变量而不会破坏全局的命名空间。

2、通过传入window变量，使得window由全局变量变为局部变量，当在jQuery代码块中访问window时，不需要将作用域链回退到顶层作用域，这样可以更快的访问window；这还不是关键所在，更重要的是，将window作为参数传入，可以在压缩代码时进行优化

3、参数列表中增加undefined，确保undefined是真的未定义。因为undefined能够被重写，赋予新的值。（undefined = "123";）这样。

二：

我们将代码扩充一下

(function (window, undefined) {
　　var jQuery = window.jQuery = window.$ = function (selector, context) {
 3　　　　return new jQuery.fn.init(selector, context);
 4　　 }
 5　　 jQuery.fn = jQuery.prototype = {
 6　　　　 init: function (selector, context) {
       },
       jquery: "xxx"
    }
jQuery.fn.init.prototype = jQuery.fn;
})(window)
alert($().jquery)    //成功构造出$(oo).xx这种东西

说明：

1、selector：也就是你传入$()内的参数，形如$("#id")、$(".class")、$("div p span")

2、context:可选参数，会默认成当前节点的上下文

3、new jQuery.fn.init：jQuery真正的入口，创建出各种jQuery对象

4、jQuery.fn.init.prototype = jQuery.fn;此句为关键代码，将上一条说明中创建的jQuery实例对象的原型链连上jQuery的原型方法，原型链不太懂的同学可以看下这个【javascript继承】之——原型链继承和类式继承

 

（本篇至此，其他内容未完，待续……）

 

下一节提示：

介绍jQuery的基本组成，了解到底什么是jQuery对象，以及常说的jQuery对象的”原型方法”和“静态方法”