Jquery的基本架構

引入

　　  以前學習原生JS然后切換到用JQ的時候總覺得很不習慣，甚至有點排斥用JQ。后來自己寫項目一直到公司實習用JQ的這段時間，才深深感受到JQ的強大~JQ不僅做到兼容很多瀏覽器，還能很方便地使用JS動畫和各種交互，所以最突出的有點就方便！方便！方便！（重要的事情說三遍）。我找到了一個關於源碼解析的很好的鏈接開始我的學習。

JQuery的基本架構

• 整體架構

　　  在學習JQuery之前，肯定有很多人都知道JQ的核心理念，那就是"The Write Less,Do More".

        以JQuery-2.1.1為例（到現在最新版本已經出到JQuery-2.1.4）,JQ   版本結構  為:

;(function(global, factory) { 
    factory(global); 
}(typeof window !== "undefined" ? window : this, function(window, noGlobal) { 
    var jQuery = function( selector, context ) { 
        return new jQuery.fn.init( selector, context ); 
    }; 
    jQuery.fn = jQuery.prototype = {}; 
    // 核心方法 
    // 回調系統 
    // 異步隊列 
    // 數據緩存 
    // 隊列操作 
    // 選擇器引 
    // 屬性操作 
    // 節點遍歷 
    // 文檔處理 
    // 樣式操作 
    // 屬性操作 
    // 事件體系 
    // AJAX交互 
    // 動畫引擎 
    return jQuery; 
})); 

JQ庫一共有多個模塊，模塊並不是獨立的，而是互相依賴的，模塊依賴網 為：

 

• 自執行匿名函數

(function(window, factory) {
    factory(window)
}(this, function() {
    return function() {
       //jQuery的調用
    }
}))

  JQ源碼里有很多這樣的函數，這種函數的寫法一看上去就讓人看暈了，來，我們換種寫法

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

這樣是不是就清楚多了？換個樣子是不是就認識了？這就是我們熟悉的自執行匿名函數啊~在自執行匿名函數剖析這篇文章里我提到過很多自執行匿名函數的寫法，但達到的效果是一樣的，讓我們再來復習一下使用自執行匿名函數的好處和這里參數window和undefined的作用

好處

　　使用匿名函數可以防止全局變量的污染，小括號可以實現立即初始化，這樣就可以形成單例模式的效果只執行一次。（這樣還學到了單例模式的一個實例喔，設計模式無處不在~）

參數作用

　　1.window

　　作用：為了防止需要window時多次在作用域鏈上去查找window，這樣將window傳入函數內可以很快就找到window

　　2.undefined

　　作用：在一些瀏覽器中undefined可以被改寫，因為它不是關鍵字

　　var undefined = '我不是undefined'
　　;(function(window) {
　　  alert(undefined);// IE8或IE7 ---> '我不是undefined'
　　})(window)

 

• 類數組對象結構

　　提到JavaScript中的類數組對象，就讓我想起了像arguments、document.getElementsByTagName等。

什么是類數組呢？

　　1.類數組具有length屬性

　　2.類數組不具有數組的方法（如.push，.join等）

　　所以，類數組不是數組，如果要使用數組的方法，要把類數組轉化為數組

     function abc(a,b,c){
         var arr = Array.prototype.slice.call(arguments);
         return arr;
     }

     var arr = abc(1,2,3);
     arr.push(0);
     arr.splice(1,2);
     alert(arr); //1,0

 

　　

　　回到JQ里的類數組對象，JQ里的類數組對象既可以像對象一樣處理，也可以像數組一樣使用數組的方法。

JQ里的類數組對象

Query的入口都是統一的$, 通過傳遞參數的不同，實現了9種方法的重載：

1. jQuery([selector,[context]])
2. jQuery(element)
3. jQuery(elementArray)
4. jQuery(object)
5. jQuery(jQuery object)
6. jQuery(html,[ownerDocument])
7. jQuery(html,[attributes])
8. jQuery()
9. jQuery(callback)

  JQ對象通過對象鍵值對的關系保存着屬性，原型保存着方法

  ------------------------------------------------------------------

* JQ對象如果想要轉換成DOM對象，可以加下標或者用.get()
eg. $('#div')[0]
    $('#div').get(0)

 

 

　　　對JQ的基本架構了解了才會讓我們更好地去讀JQ代碼~希望我能逐步提高自己的JS水平寫出有水准的js代碼~接下來我還會繼續學習JQ源碼~

 

參考資料：  

　　　　http://www.html-js.com/article/1619  類數組對象