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相關的方法，實現鏈式調用。