jQuery 对象的简化山寨版

jQuery 是个很流行的 JavaScript 库，最近研究了下，尝试写一个 jQuery 对象的简化山寨版，命名为 jsquick。

jQuery 这个对象也不简单，因此我们首先实现 $.each 和 $.extend 这两个最基本的功能。代码如下：

(function(){
  var jsquick = {
    each: function(collection, callback) {
      var i, arr = [];
      if (Object.prototype.toString.call(collection) !== "[object Array]") {
        if (Object.getOwnPropertyNames) {
          arr = Object.getOwnPropertyNames(collection);
        } else {
          for (var key in collection) {
            if (collection.hasOwnProperty(key)) arr.push(key);
          }
        }
        for (i = 0; i < arr.length; i++) {
          callback(arr[i], collection[arr[i]]);
        }
      } else {
        for (i = 0; i < collection.length; i++) {
          callback(i, collection[i]);
        }
      }
    },

    extend: function(obj) {
      var that = this;
      this.each(obj, function(key, value) {
        that[key] = value;
      });
    }
  };

  $ = window.jsquick = jsquick;
})();

接下来，我们在 $.each 和 $.extend 的基础上，继续添加 $(selector)，$.fn.each 和 $.fn.extend 方法。此时 $() 既是一个函数，但是又作为对象拥有各种方法，而且 $(selector) 函数生成的对象，它的原型还是 $。因此需要对 $ 对象作一些修改。最后的代码如下：

(function(){
  function jsquick(selector) {
    return new init(selector);
  }

  function init(selector) {
    var elems;
    switch (selector.charAt(0)) {
      case "#":
        elems = [document.getElementById(selector.slice(1))];
        break;
      case ".":
        elems = document.getElementsByClassName(selector.slice(1));
        break;
      default:
        elems = document.getElementsByTagName(selector);
    }
    for (var i = 0; i < elems.length; i++) {
      this[i] = elems[i];
    }
    this.length = elems.length;
  };

  init.prototype = jsquick.prototype;

  jsquick.prototype.each = function(callback) {
    for (var i = 0; i < this.length; i++) {
      callback.call(this[i], i);
    }
  };

  jsquick.each = function(collection, callback) {
    var i, arr = [];
    if (Object.prototype.toString.call(collection) !== "[object Array]") {
      if (Object.getOwnPropertyNames) {
        arr = Object.getOwnPropertyNames(collection);
      } else {
        for (var key in collection) {
          if (collection.hasOwnProperty(key)) arr.push(key);
        }
      }
      for (i = 0; i < arr.length; i++) {
        callback(arr[i], collection[arr[i]]);
      }
    } else {
      for (i = 0; i < collection.length; i++) {
        callback(i, collection[i]);
      }
    }
  };

  jsquick.prototype.extend = jsquick.extend = function(obj) {
    var that = this;
    jsquick.each(obj, function(key, value) {
      that[key] = value;
    });
  };

  jsquick.fn = jsquick.prototype;
  $ = window.jsquick = jsquick;
})();

其中，我们只简单地实现了 $("#id")，$(".class") 和 $("tag") 这三种选择器。$(selector) 创建的实际是一个对象，我们把它当成数组来使用，因此需要自己管理其中的 length 属性。

现在，jQuery 的一个简化山寨版就出来了，而且当中已经实现了扩展的功能。

参考资料：
[1] jQuery: The Write Less, Do More, JavaScript Library
[2] jQuery API Documentation
[3] jQuery() | jQuery API Documentation
[4] Types | jQuery API Documentation
[5] jQuery.each() | jQuery API Documentation
[6] jQuery.extend() | jQuery API Documentation
[7] jQuery.inArray() | jQuery API Documentation
[8] .each() | jQuery API Documentation
[9] 如何做到 jQuery-free？ - 阮一峰的网络日志

[YAML] Updated: 2013-07-04 20:20:00