jquery整体架构分析

【参考书籍：<<犀利开发——jQuery内核详解与实践>>，尽信书不如无书】

任何复杂的技术都是从最简单的问题开始的，如果你被jQuery几千行庞杂结构的源代码所困惑，那么建议你阅读本文，我们将探索jQuery是如何从最简单的问题开始，并逐步实现羽翼渐丰的演变过程，从jQuery核心技术的还原过程来理解jQuery框架的搭建原理。

原型继承

在JavaScript中，函数无处不在，它可以归置代码段，把相对独立的功能封装在一个函数包中；它可以作为一个对象；它也可以用来实现类。

例如，定义一个最初的jQuery类：

var jQuery = function() {     };

上面定义了一个类，类名叫jQuery，我们可以把它当做一个函数，函数名为jQuery，当然，我们也可以把它当做一个对象，对象名就叫jQuery，在JavaScript，一切都是对象。

上面定义的是jQuery一个空函数，啥都没做，实际上，这个函数就是面向对象语言中所谓的构造函数，是用来创建类的。

JavaScript中就是使用function关键字来定义类的，类最基本的特性就是封装、继承、多态等，JavaScript没有extends、implement等关键字，它的继承是通过原型（prototype）来实现的，js中的每个函数都具有一个prototype属性（不同于__proto__），这个属性指向一个原型对象，原型对象中可以定义类的继承方法和属性等。

所以，我们可以扩展jQuery的原型：

var jQuery = function() {};jQuery.prototype = {     };

原型是JavaScript实现继承的基本机制。

如果你觉得jQuery.prototype名称太长，木有关系，你可以为其重新命名，如fn，当然你可以随便命名。

john resig给jQuery.prototype起了这么个别名：

jQuery.fn = jQuery.prototype = { }

当然，如果你还觉得jQuery名称太长，你也可以给jQuery定义一个别名，比如$：

var $ = jQuery = function() {};

ok，现在给jQuery的原型对象添加一个方法size和一个属性jquery：

var $ = jQuery = function() {}; jQuery.fn = jQuery.prototype = {    jquery: '1.3.2',    size: function() {        return this.length;     }};

实例化

如何调用刚才添加的方法和属性呢？回想一下jquery的调用方式：

$('xxx').jquery$('xxx').size();

很显然，现在的代码并不支持这样的调用方式，如果按以上方式来调用，直接抛错误，那么到底该如何调用呢？

既然jquery属性和size方法是jQuery原型对象中的方法，很明显，我们必须先实例化jQuery类，才能成功调用，那么”$()“是如何实例化的呢？

实例化，当然少不了new操作符，如果按以下方式实现，是不是可以做到实例化呢？

var $ = jQuery = function() {    return new jQuery();}; 

在浏览器试一下就知道，毫无疑问内存溢出了！

仔细观察一下，$()与new jQuery()调用的是同一个函数，只不过是以不同方法调用而已（一个js函数可以有多种调用方式，比如new、call、apply等），所以如果按以上方式实现实例化，一旦调用$()就陷入了死循环。

假如在jQuery中使用一个工厂方法来创建一个实例，把这个方法放在jQuery.prototype原型对象中, 然后在jQuery()函数中返回这个原型方法的调用，是不是就可以达到实例化的目的？

var $ = jQuery = function() {    return jQuery.fn.init();};  jQuery.fn = jQuery.prototype = {    init: function() {        return this;  //        },    jquery: '1.3.2',    size: function() {        return this.length;     }}; alert($().jquery);   //1.3.2alert($().size());  //undefined

现在貌似已经有点jquery雏形了。

分隔原型

【个人感觉，书中关于这部分的分析有点牵强，下面的分析为我本人的一点理解】

jQuery.fn.init方法中，返回的是this关键字，该关键字实际上并非jQuery实例，而仅仅是jQuery.prototype这个对象（脑袋秀逗了？no，no，事实就是如此，我们在这些代码中根本没有new jQuery这个构造器，当然也就不存在jQuery实例这么一说，如果你new了一个jQuery实例，那么此时jQuery.prototype中的this指针才会引用jQuery实例，否则，该this关键字就只是jQuery.prototype这个对象的一个引用）。

还记不记得这么一段话：

You cannot delete a property on an object that it inherits from a prototype.

不妨来做一个小测试：

var A = function() {}; A.prototype = {    x: 1,    del: function() {        delete this.x;    }}; var a = new A(); a.del();  //此时del中的this指向了a对象alert(A.prototype.x); //输出1，说明del中this指向子对象a时，delete对于A.prototype无效 A.prototype.del(); //此时del中的this指向A.prototypealert(A.prototype.x); //undefined

可以看到，子对象确实无法删除继承成员（但是能覆盖），对象本身可以删除自身非继承成员。

回到jQuery.prototype.init，在该函数中，通过this关键字，可以直接增删改jQuery.prototype中的任何属性和方法，那说明this肯定不是个子对象，不信？请看：

var $ = jQuery = function() {    return jQuery.fn.init();};  jQuery.fn = jQuery.prototype = {    init: function(args) {        this.length = 0;  //修改length         this.test = function() { //添加test方法            return this.length;        };        delete this.jquery;  //删除jquery属性                 return this;  //指向jQuery实例          },    jquery: '1.3.2',    length: 1,    size: function() {        return this.length;     }}; alert($().jquery);   //undefinedalert($().test());   //0alert($().size());  //0

确实已经删除掉了jquery属性，所以可以很确定地说：这里的this关键字并非jQuery实例。

所以，为了隔离jQuery.prototype，保护jQuery.prototype（个人理解而已，john resig可能有更高深的想法），john resig是这么干的：

var $ = jQuery = function() {    return new jQuery.fn.init();}; 

jQuery.fn.init被当作一个构造器来调用了，这样一来，jQuery.fn.init中的this关键字则不再指向jQuery.prototype，而是一个jQuery.prototype.init实例了。

但是此时$()返回的是一个jQuery.prototype.init对象，访问不到jQuery.prototype中的成员了，怎么办呢？

跨域访问

兵来将挡水来土掩，小菜一碟。

既然是不同的对象，但又想整出点关系来？那就继承呗，于是john resig又很神奇地干了这么一件事：

jQuery.fn.init.prototype = jQuery.fn;  //点睛之笔，看到这里，真是让人叹为观止

就这样很神来地给打通了任督二脉，于是乎，问鼎江湖，不在话下！