前端入門之必會jQuery源碼架構講解

 * 無論是什麼時候入門的前端小夥伴，或多或少都會接觸過jquery,也算是前端發展的基石。
* 我所理解到的jquery源碼架構是這樣子的
* step1 經過自執行函數，建立命名空間
* step2 共享原型
* step3 經過內部extend管理代碼
* 貼架構源碼和註釋理解

(function(global){          //自執行函數 jquery裏用window 我這邊不侷限於window node上也能夠使用
    var jQuery = function (selector, context){ //構造函數
      // 平時咱們直接使用的時候，通常$.xxx或者 $().xxx 是由於jquery已經幫咱們實例了
      //這邊巧妙的設計，爲何沒有直接 new jQuery()呢，先理解實例化作了什麼，step1內存中開闢空間，step2 函數調用，若是這樣的化就會不斷的死循環，內存溢出
      //不懂jQuery.fn.init的請看下面代碼
        return new jQuery.fn.init(selector, context, rootjQuery); 

    }

    //jQuery實例上的方法定義在此
    jQuery.fn = jQuery.prototype = {   
      //構造器指向jQuery
      constructor: jQuery,     
        init:function(selector, context, rootjQuery){
          /**
           * xxx代碼
           */
          // 返回dom的數組，實現鏈式調用
          return jQuery.makeArray( selector, this );
        },
        //寫實例方法 調用時候，咱們通常經過$().first 調用
    first: function() {
      return this.eq( 0 );
    }
    }

    //經過工具函數extend管理維護代碼
    jQuery.extend = jQuery.fn.extend = function(){
        var len = arguments.length;
        var target = arguments[0]||{};
        var i = 1;
        var key;
        if(typeof target!=='object'|| typeof target!=='function'){
            target =  {};
        }

        //自己 實例
        if(len==i){
            //根據不一樣的調用改變target指向
            target = this;
            i--;
        }

        //任意對象
        for(;i<len;i++){
            for(key in arguments[i]){ //遍歷對象
                target[key]=arguments[i][key];
            }
        }
    }

    //管理維護代碼 jQuery 自身上的方法屬性定義在這個以內
    jQuery.extend({ 
        ajax:function(){}
    })

    //實現平時實例插件的擴展機制
    //爲之後的實例準備jQuery原型構造函數
    jQuery.fn.init.prototype = jQuery.fn; //jQuery.fn.init是構造函數

    //暴露給全局api
    global.$ = global.jQuery=jQuery;

})(this)
複製代碼

api調用僞代碼

$.ajax();
    $().first();

    // 標準插件 jquery自己擴展
    $.extend({
        getname:function(name){
            console.log(name);
        }
    })
    //直接掛在在$下，不推薦
    $.getname = function(name) {
      console.log(name);
    }

    // 標準實例插件
    $.fn.extend({
        getname:function(name){
            console.log(name);
        } 
    })
    //或者直接擴展，不推薦
    $.fn.getname = function(name){
            console.log(name);
    } 
    // 當成工具函數，擴展對象
    $.extend({},{a:'b'},{b:'c'})
複製代碼