jQuery基礎框架淺入剖析

更新時間：2012年12月27日 17:23:32 作者：

jQuery基礎框架:原型模式結構、返回選擇器實例、訪問原型方法、自執(zhí)行匿名函數詳細介紹，需要了解的朋友可以參考下

一、原型模式結構

復制代碼代碼如下:

 
// 定義一個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關鍵字實例化對象,但是執(zhí)行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; // 共享原型

四、自執(zhí)行匿名函數

復制代碼代碼如下:

 
(function(window, undefined) { 
var jQuery = function() { 
// 返回選擇器實例 
return new jQuery.prototype.init(); 
}; 
jQuery.prototype = { 
// 選擇器構造函數 
init: function() { 
}, 
//原型方法 
toArray: function() { 
}, 
get: function() { 
} 
}; 
jQuery.prototype.init.prototype = jQuery.prototype; 
// 局部變量和函數在匿名函數執(zhí)行完后撤銷 
var a, b, c; 
function fn() { 
} 
// 使jQuery成為全局變量 
window.jQuery = window.$ = jQuery; 
})(window); 