摘要：構(gòu)成類數(shù)組對(duì)象，引入，并使其自增版本信息模擬數(shù)組，即這里構(gòu)成一個(gè)類數(shù)組對(duì)象由于這里把作為構(gòu)造函數(shù)調(diào)用，得到一個(gè)對(duì)象，所以我們把作為的原型。

本文簡(jiǎn)單實(shí)現(xiàn)jQuery框架，深入理解javascript對(duì)象。
本文的對(duì)照版本是jQuery-1.2.6.js

本文注重jquery結(jié)構(gòu)設(shè)計(jì)思路，并不側(cè)重具體功能的實(shí)現(xiàn)以及兼容性和安全性的部分。

首先建立基本框架如下：

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

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

  jQuery.extend = jQuery.fn.extend = function(){
    //添加擴(kuò)展方法，jQuery.extend添加靜態(tài)方法，也可以實(shí)現(xiàn)繼承，jQuery.fn.extend添加動(dòng)態(tài)方法
  }
})(window);

進(jìn)一步，實(shí)現(xiàn)jQuery的初始化

//上述框架中的部分代碼
//由于$("#selector")得到的是一個(gè)jQuery對(duì)象，嘗試直接返回jQuery對(duì)象
var jQuery = window.jQuery = window.$ = function(selector){
  return new jQuery();   //這里會(huì)導(dǎo)致一個(gè)死循環(huán)，所以不能這樣直接構(gòu)建jQuery對(duì)象
};

修正上述代碼中的死循環(huán)，我們可以試圖返回this，但是this明顯是window，不是我們需要的jQuery，利用原型中的this返回構(gòu)造函數(shù)實(shí)例化對(duì)象的特點(diǎn)(不理解的可以參看javascript中this詳解)，我們作以下修改:

//上述框架中的部分代碼
//由于$("#selector")得到的是一個(gè)jQuery對(duì)象，嘗試直接返回jQuery對(duì)象
var jQuery = window.jQuery = window.$ = function(){
    return jQuery.fn.init();   //執(zhí)行初始化
};
jQuery.fn = jQuery.prototype = {
  init: function(){
    return this;
  },
  jQuery: "1.0.0",   //jQuery版本信息
  length: 0,    //模擬數(shù)組，即這里構(gòu)成一個(gè)類數(shù)組對(duì)象
  size: function(){
    return this.length;
  }
}

到此$()可以返回一個(gè)jQuery對(duì)象了。但是在舊瀏覽器中有一個(gè)bug。如果用戶如下這樣使用代碼，那么什么都得不到：

var ele = $.fn.init();

這里直接調(diào)用了init(), 這樣會(huì)得到init創(chuàng)造的對(duì)象，由于$是個(gè)函數(shù)，$.fn是函數(shù)的原型，函數(shù)原型是個(gè)空函數(shù)，所以這里得到了一個(gè)以空函數(shù)為構(gòu)造函數(shù)創(chuàng)造的對(duì)象。為了解決這問(wèn)題，采用new的方式:

//上述框架中的部分代碼
var jQuery = window.jQuery = window.$ = function(selector){
    return new jQuery.fn.init(selector);   //執(zhí)行初始化
};
jQuery.fn = jQuery.prototype = {
  constructor: jQuery,
  init: function(selector){
    var elements = document.querySelectorAll(selector);   //順便簡(jiǎn)單的實(shí)現(xiàn)了選擇器
    //注意querySelectorAll在老的瀏覽器中是不支持的，這里專注在jQuery的結(jié)構(gòu)上。
    Array.prototype.push.apply(this, elements);   //構(gòu)成類數(shù)組對(duì)象，引入length，并使其自增
    return this;
  },
  jQuery: "1.0.0",   //jQuery版本信息
  length: 0,    //模擬數(shù)組，即這里構(gòu)成一個(gè)類數(shù)組對(duì)象
  size: function(){
    return this.length;
  }
}
jQuery.fn.init.prototype = jQuery.fn;

由于這里把jQuery.fn.init()作為構(gòu)造函數(shù)調(diào)用，得到一個(gè)jQuery對(duì)象，所以我們把jQuery.fn作為jQuery.fn.init()的原型。

下一步實(shí)現(xiàn)extend方法

//上述框架中的部分代碼
jQuery.extend = jQuery.fn.extend = function(obj, srcObj){
    var target, len = arguments.length;
    if(len === 1){   //傳入一個(gè)參數(shù)時(shí)實(shí)現(xiàn)繼承
      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){   //實(shí)現(xiàn)深拷貝
      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];
        }
      }
    }
  };

寫了extend，我們定義幾個(gè)簡(jiǎn)單的方法（2靜態(tài)方法，3個(gè)動(dòng)態(tài)方法）可以用來(lái)測(cè)試。

//添加靜態(tài)方法
jQuery.extend({
  trim: function(text){
    return (text || "").replace(/^s+|s+$/g, "");
  },
  makeArray: function(obj){
    return Array.prototype.slice.call(obj);
  }
});

//添加動(dòng)態(tài)方法
jQuery.fn.extend({
  //get方法
  get: function(num){
    return num == null ?
    jQuery.makeArray(this):
    num < 0 ? this[ num + this.length ] : this[ num ];   //索引小于零表示倒數(shù)
  },

  //each 遍歷執(zhí)行函數(shù)
  each: function(fun){
    for(var i = 0, len = this.length; i < len; ++i){
      if(fun(i, this[i]) === false)
        break;
    }
    return this;  //用于鏈?zhǔn)秸{(diào)用
  },

  //修改css屬性
  css: function(key, value){
    var len = arguments.length;
    if(len === 1){     //傳入1個(gè)參數(shù)返回對(duì)應(yīng)值
      return this[0].style[key];
    } else if(len === 2){    //傳入2個(gè)參數(shù)設(shè)置對(duì)應(yīng)值
      this.each(function(index, ele){
        ele.style[key] = value;
      });
    }
    return this;  //用于鏈?zhǔn)秸{(diào)用
  }
});

到這里，jQuery的基本結(jié)構(gòu)就形成了，還有一個(gè)問(wèn)題需要解決，就是處理變量沖突。
當(dāng)環(huán)境中以及有jQuery和$時(shí)可以選擇釋放$或時(shí)釋放jQuery和$

(function(window){
  "use strict";
  //在框架一開(kāi)始先保留外部可能存在的$或jQuery變量，以便在后來(lái)恢復(fù)
  var _$ = window.$;
  var _jQuery = window.jQuery;

  var jQuery = window.jQuery = window.$ = function(selector){};
  jQuery.fn = jQuery.prototype = {};
  jQuery.extend = jQuery.fn.extend = function(){};
})(window);

然后寫noConflict函數(shù)

jQuery.extend({
  noConflict: function(deep){  //傳入true時(shí)同時(shí)釋放$和jQuery，否則只是釋放$
    window.$ = _$;
    if(deep) window.jQuery = _jQuery;
    return jQuery;
  }
});

到此為止，jQuery的框架已經(jīng)形成。下面是完整代碼部分:

(function(window){
  "use strict";
  var _$ = window.$;
  var _jQuery = window.jQuery;

  //定義全局接口
  var jQuery = window.jQuery = window.$ = function(selector){
    return new jQuery.fn.init(selector);
  };

  var HTMLRegex = /^(?:s*(<[wW]+>)[^>]*|#([w-]+))$/;  //用于匹配html標(biāo)簽

  var rootjQuery;   //默認(rèn)根節(jié)點(diǎn)的jQuery對(duì)象

  //原型
  jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    // init: function(selector){
    //   var elements = document.getElementsByTagName(selector);
    //   Array.prototype.push.apply(this, elements);
    //   return this;
    // },
    init: function(selector){
      if(!selector){
        return this;
      }
      var elements = document.getElementsByTagName(selector);
      Array.prototype.push.apply(this, elements);
      return this;
    },
    jQuery: "1.0.0",
    length: 0,
    size: function(){
      return this.length;
    }
  };
  jQuery.fn.init.prototype = jQuery.fn;

  //繼承
  jQuery.extend = jQuery.fn.extend = function(obj){
    var target, len = arguments.length;
    if(len === 1){   //傳入一個(gè)參數(shù)時(shí)實(shí)現(xiàn)繼承
      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];
        }
      }
    }
  };

  //靜態(tài)函數(shù)
  jQuery.extend({
    trim: function(text){
      return (text || "").replace(/^s+|s+$/g, "");
    },
    noConflict: function(deep){
      window.$ = _$;
      if(deep) window.jQuery = _jQuery;
      return jQuery;
    },
    makeArray: function(obj){
      return Array.prototype.slice.call(obj);
    }
  });

  //對(duì)象方法
  jQuery.fn.extend({
    get: function(num){
      return num == null ?
      jQuery.makeArray(this):
      num < 0 ? this[ num + this.length ] : this[ num ];   //索引小于零表示倒數(shù)第n個(gè)
    },
    each: function(fun){
      for(var i = 0, len = this.length; i < len; ++i){
        if(fun(i, this[i]) === false)
          break;
      }
      return this;  //用于鏈?zhǔn)秸{(diào)用
    },
    css: function(key, value){
      var len = arguments.length;
      if(len === 1){
        return this[0].style[key];
      } else if(len === 2){
        this.each(function(index, ele){
          ele.style[key] = value;
        });
      }
      return this;  //用于鏈?zhǔn)秸{(diào)用
    }
  });
}(window));

上述代碼源碼：Download