20170621-jQuery总体结构分析

jQuery总体结构

1    (function(window, undefined){
2    
3        var jQuery = (function(){
4            var jQuery = function(selector, context){
5                return new jQuery.fn.init(selector, context, rootjQuery);
6            },
7        
8            jQuery.fn = jQuery.prototype = {
9                constructor: jQuery,
10               init: function(selector, context, rootjQuery){ ... },
11               // 一些原型属性和方法
12           };
13           jQuery.fn.init.prototype = jQuery.fn;
14           jQuery.extend = jQuery.fn.textend = function() {...};
15           jQuery.extend({
16               // 一堆静态属性和方法
17           });
18       
19           return jQuery;
20       })();
21    
22       window.jQuery = window.$ = jQuery;
23   })(window)

具体分析

• 为什么要在构造函数jQuery内部(第4行)内部用运算符new创建并返回另一个构造函数的实例？

通常我们创建一个对象或实例的方式是在运算符new后紧跟一个构造函数，但是如果构造函数有返回值，运算符new所创建的对象就会被丢弃，返回值将作为new表达式的值。

jQuery利用了这一特性，通过在构造函数jQuery内部用运算符new创建并返回另一个构造函数的实例，因此当我们创建jQuery对象的时候，可以使用new jQuery(selector)的形式，也可以省略运算符，直接通过jQuery(selector)的形式得到jQuery对象。

---

• 为什么通过jQuery方法创建出来的对象(实际上并不是jQuery方法创建的，是有jQuery原型对象中的init方法创建的)，能够访问jQuery原型对象上的方法和属性？

在代码的第8行，我们可以看到jQuery的原型中包含init方法，该方法是创建jQuery对象时真正调用的方法。在代码的第13行，将init方法的原型对象重写为jQuery的原型对象，因此由init创建出来的对象能够访问jQuery原型对象上的属性和方法

---

• 为什么在第8行执行jQuery.fn = jQuery.prototype?

jQuery.fn是jQuery.prototype的简写，可以少些7个字母，方便拼写

---

• jQuery.extend和jQuery.fn.textend方法有什么作用？

jQuery.extend = jQuery.fn.extend = function([deep,] target, object1 [,objectN]){
    ....
}

jQuery.extend和jQuery.fn.textend方法用于合并两个或多个对象的属性到第一个对象，其中，参数deep是可选的布尔值，表示是否进行深度合并(即递归合并)，合并行为默认是不递归的。参数target是目标对象，参数object1和objectN是源对象；如果仅提供了一个对象，则意味着参数target被忽略，此时jQuery或jQuery.fn被当做目标对象。通过这种方式可以在jQuery或jQuery.fn上添加新的属性和方法，jQuery的其他模块大都是这么实现的。

---

• jQuery.fn和jQuery上的方法有什么不同

jQuery.fn和jQuery上的方法是不同的，jQuery.fn上的方法指的是jQuery原型对象中定义的方法，jQuery上的方法指的是jQuery作为一个Function类型的对象，它的方法属性。

例如调用$(document).ready(.....)时，ready是定义在jQuery.fn上的方法

例如调用jQuery.ajax(...)时，ajax是定义在jQuery上的方法

---

• jQuery是如何实现链式调用的

在一些方法中，在最后会返回处理的结果，如果这个结果是jQuery对象，就可以在调用该方法时，在该方法的后面直接调用其他jQuery相关的方法，实现链式调用。