前端入门之必会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'})
复制代码