jQuery總體架構的理解分析

來源:互聯網
上載者:User

jQuery指令碼總體結構來說,有如下形式:
複製代碼 代碼如下:
(function( window, undefined ) {
// Define a local copy of jQueryvar jQuery = function( selector, context
) { // The jQuery object is
actually just the init constructor
'enhanced' return new
jQuery.fn.init( selector, context ); },
// Expose jQuery to the global objectwindow.jQuery =
window.$ = jQuery;
})(window);

對這樣的結構不很理解,也沒做深究,只知道和和所謂的 Technorati 標籤: JQuery,Javascript,Web前端js閉包的概念相關,今天查了一些資料,有了些基本的理解。
實際是定義了一個全域函數,前一個括弧為一個匿名函數,後面為函數的調用。可以這樣理解:
複製代碼 代碼如下:
var fun=function(window, undefined){
... ...
}
fun(window);



整個指令碼是一個匿名函數(暫時叫它mainFn吧),函數被載入的時候便開始執行,mainFn可以接收兩個參數,執行時只傳遞一個參數window.

1. 具體解釋下這個寫法的意思:
2. window 函數執行時會傳入window,這個傳入的window是全域對象(通常為Window)的
3. 一個屬性且window=this,而傳入mainFn函數中作為其參數時,它會被儲存在
4. mainFn的調用對象中.在原型鏈中尋找變數的策略是(非嵌套函數):先尋找調用
5. 對象,再尋找全域對象,所以這使得整個mainFn中使用的window時尋找效率更高
6. undefined 由於執行時並未傳遞第二個參數,故變數undefined的值為undefined.早期版
7. 本的瀏覽器中全域對象可能沒有undefined屬性,所以不能直接使用它.通常避免
8. 這個問題的寫法是 window.undefined = window.undefined

然後在最後讓jQuery庫中最重要的對象jQuery成為了window對象的一個屬性,並可以簡寫為“$”。

其它的補充資料:
JQuery是個出色的javascript庫,最近結合它寫javascript,看了下源碼。
先從整體、全域的看,jQuery的源碼幾乎都在下面的代碼中:
複製代碼 代碼如下:
(function() {

//……

})();

第一個括弧裡面是個匿名函數,第二個括弧表示馬上執行第一個括弧裡面的代碼。
首先明白,javascript裡面是沒有命名空間的,要保證你的javascript函數、對象與其他的不衝突,這裡用了javascript的一個技巧:你的所有javascript函數、對象都在一個匿名函數裡面定義,確保了所定義的函數、對象的有效範圍,起到了命名空間的作用。既然作用範圍在這個匿名函數中,怎麼被別人使用呢?下面看它的下面代碼:

var jQuery = window.jQuery = function(selector, context) {
//……
};

這裡讓jQuery庫中最重要的對象jQuery成為了window對象的一個屬性,這樣就可以在其他地方像使用 document(document也是window的一個屬性)一樣使用jQuery了。也許使用過jQuery的朋友驚訝-我沒有使用jQuery對象,一直使用$的。沒錯,那是jQuery的同名對象:

window.$ = jQuery;

現在明白了吧。

這個庫的結構是這樣的:
複製代碼 代碼如下:
1. (function(window, undefined){
2. var document = window.document;
3. var jQuery = ...
4. ...
5. ...
6. })(window);

(function(window, undefined){ var document = window.document; var jQuery = ... ... ... })(window);

整個指令碼是一個匿名函數(暫時叫它mainFn吧),函數被載入的時候便開始執行,mainFn可以接收兩個參數,執行時只傳遞一個參數window.
1. 具體解釋下這個寫法的意思:
2. window 函數執行時會傳入window,這個傳入的window是全域對象(通常為Window)的
3. 一個屬性且window=this,而傳入mainFn函數中作為其參數時,它會被儲存在
4. mainFn的調用對象中.在原型鏈中尋找變數的策略是(非嵌套函數):先尋找調用
5. 對象,再尋找全域對象,所以這使得整個mainFn中使用的window時尋找效率更高
6. undefined 由於執行時並未傳遞第二個參數,故變數undefined的值為undefined.早期版
7. 本的瀏覽器中全域對象可能沒有undefined屬性,所以不能直接使用它.通常避免
8. 這個問題的寫法是 window.undefined = window.undefined

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.