jQuery基礎架構淺入剖析_jquery

一、原型模式結構

複製程式碼 代碼如下:

// 定義一個jQuery構造函數

var jQuery = function() {
};
// 擴充jQuery原型
jQuery.prototype = {
};


上面是一個原型模式結構，一個jQuery構造函數和jQuery實例化對象的的原型對象，我們一般是這樣使用的：

複製程式碼 程式碼如下:

var jq = new jQuery(); //變數jq透過new關鍵字實例化jQuery建構函式後就可以使用原型物件中的方法，但是jQuery並不是這麼使用的

二、返回選擇器實例

複製代碼 程式碼如下:

var jQuery = function() {

// 回傳選擇器實例
return new jQuery.prototype.init()
}
} ;
jQuery.prototype = {
// 選擇器建構子
init: function() {
}
};

雖然jQuery不是透過new關鍵字實例化物件,但是執行jQuery函數仍然得到的是一個透過new關鍵字實例化init選擇器的物件,如：
var navCollections = jQuery('.nav'); //變數navCollections保存的是class名為nav的DOM對象集合.

三、訪問原型方法

複製代碼 代碼如下:

var jQuery = function() {
// 回傳選擇器實例
return new jQuery.prototype.init();
};
jQuery. prototype = {
// 選擇器建構子
init: function() {
},
// 原型方法
toArray: function() {
},
get: function() {
}
};
// 共享原型
jQuery.prototype.init.prototype = jQuery.prototype;

我們一般習慣稱jQuery函數中傳回的選擇器實例物件為jQuery對象，如我們可以這樣使用:

複製程式碼 程式碼如下:

jQuery.('.nav').toArray(); // 將結果集轉換為數組

為什麼可以使用toArray方法呢? 即如何讓jQuery物件訪問jQuery.prototype物件中的方法?只要將實例化選擇器物件的原型物件共用jQuery.prototype對象，上面體現程式碼為：

複製程式碼 程式碼如下:

jQuery.prototype.init.prototype = jQuery.prototype; // 共享原型

四、自執行匿名函數

複製程式碼 程式碼如下:

var jQuery = function() {
// 回傳選擇器實例
return new jQuery.prototype.init();
};
jQuery.prototype = {
/ / 選擇器建構子
init: function() {
},
//原型方法
toArray: function() {
},
get: function() {
}
};
jQuery.prototype.init.prototype = jQuery.prototype;
// 局部變數與函數在匿名函數執行完後撤銷
var a, b, c;
function fn() {
}
// 使jQuery成為全域變數
window.jQuery = window.$ = jQuery;
})(window);

自執行匿名函數中宣告的局部變數和函數在匿名函數執行完畢後撤銷，釋放內存，對外只保留jQuery全域變數介面。 資料來源：http://www.cnblogs.com/yangjunhua/archive/2012/12/27/2835989.html