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相关的方法，实现链式调用。