jQuery源码总结

jQuery是大家都会使用的js库，因其方便性而广泛使用到个网址中。

jQuery核心代码结构模拟：

(function(window){
                var A=function(ok){
                    //return this;
                    return new A.fn.init(ok);
                };
                A.fn=A.prototype={
                    init:function(ok){
                        if(!ok){
                            return this;
                        }
                    },
                    post:function(){
                        alert("my post");
                    },
                    get:function(){
                        alert("my get");
                    }
                };
                A.fn.init.prototype=A.fn;

                A.extend=A.fn.extend=function(obj,content){
                    if(typeof(obj)=="object"){
                        for(var name in obj){
                            //alert(name);
                            A.prototype[name]=obj[name];
                        }
                    }else if(typeof(obj)=="function"){
                        A.prototype=obj.prototype;
                        for(var name in content){
                            A.prototype[name]=content[name];
                        }
                    }

                }
                window.L=A;
            })(window)

    //===============================       
            L().extend({
                name:"liujian",
                love:function(){
                    alert("my love");
                }
            });

            L().love();
            L().post();

1. 首先通过闭包将window对象传人内部并通过window.L=A;将L 和A代表jQuery 和 $
2. 通过A.fn.init.prototype=A.fn; 和A.fn=A.prototype 使A.fn.init A.fn A L这四个对象都可以调用函数库
3. extend方法的模拟实现可以将自己的函数扩展到jQuery函数库

jquery源码对比：
基本框架：

(function(window){
  "use strict";
  var jQuery = window.jQuery = window.$ = function(selector){
    //定义$函数，并把$和jQuery暴露到外面
  };

  jQuery.fn = jQuery.prototype = {
    //jQuery原型
  };

  jQuery.extend = jQuery.fn.extend = function(){
    //添加扩展方法，jQuery.extend添加静态方法，也可以实现继承，jQuery.fn.extend添加动态方法
  }
})(window);

jQuery的初始化：

//由于$('#selector')得到的是一个jQuery对象，尝试直接返回jQuery对象
var jQuery = window.jQuery = window.$ = function(selector){
  return new jQuery();   //这里会导致一个死循环，所以不能这样直接构建jQuery对象
};

init()

var jQuery = window.jQuery = window.$ = function(selector){
    return new jQuery.fn.init(selector);   //执行初始化
};
jQuery.fn = jQuery.prototype = {
  constructor: jQuery,
  init: function(selector){
    var elements = document.querySelectorAll(selector);   //顺便简单的实现了选择器
    //注意querySelectorAll在老的浏览器中是不支持的，这里专注在jQuery的结构上。
    Array.prototype.push.apply(this, elements);   //构成类数组对象，引入length，并使其自增
    return this;
  },
  jQuery: "1.0.0",   //jQuery版本信息
  length: 0,    //模拟数组，即这里构成一个类数组对象
  size: function(){
    return this.length;
  }
}
jQuery.fn.init.prototype = jQuery.fn;

extend方法

jQuery.extend = jQuery.fn.extend = function(obj, srcObj){
    var target, len = arguments.length;
    if(len === 1){   //传入一个参数时实现继承
      deep(obj, this);
      return this;
    } else {
      for(var i = 1; i < len; i++){
        target = arguments[i];
        deep(target, obj);
      }
      return obj;
    }

    function deep(oldOne, newOne){   //实现深拷贝
      for(var prop in oldOne){
        if(typeof oldOne[prop] === "object" && oldOne[prop] !== null){
            newOne[prop] = oldOne[prop].constructor === Array ? [] : {};
            deep(oldOne[prop], newOne[prop]);
        }
        else{
            newOne[prop] = oldOne[prop];
        }
      }
    }
  };