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  類數組對象