转载：$对象细节详情

源地址：http://www.html-js.com/article/1763#h4

 

让我们先来快速回顾一下几个基于选择器查询的库例如jQuery额Zepto。你可能对下面的语法感到很熟悉：

var $items = $('.items');   

一旦你查询了某些元素，你就可以在这些元素上做很多事情，比如添加类（$.el.addClass(’active’)），插入其他元素，添加事件监听器，等等。

元素 VS. API

当你调用$(selector)时，返回的是一个匹配的DOM元素的数列，同时API方法作为属性连同这些元素一起成为了一个对象。为了将元素和属性合并起来，最佳的选择可能是将元素的原型(prototype)设置为API对象。随后API原型对象就能在任何的包裹元素之间共享，这种方式非常的有效。然而，我们不能仅仅设置一个数组的原型（用一族几乎不相关的方法来直接扩展原型并不是什么好主意）。那么应该怎样来实现元素的包裹呢？

实现元素包裹的集中方法

我们有几种比较好的方法可以选择。例如：

1.使用数组然后将所有API的成员赋值为数组的属性；

2.使用数组然后将它的proto属性设置为API对象；

3.使用一个构造函数然后将API对象设置为它的原型。将所有DOM元素作为该对象的索引成员(indexed memebers)。

4.使用Object.create()，然后将所有DOM元素作为该对象的索引成员。

下面是列出的是基本的，未经过优化的，未经测试的各种方法的实现方式：

1.数组迭代API方法：

function $(selector){
    var collection = document.querySelectorAll(selector),
            wrapped = [].slice.call(collection);   
    for( var method in MyAPI){
            wrapped[method] = MyAPI[method];
    }
    return wrapped;
}

var $items = $('items');

2.数组使用proto

function $(selector) {
    var collection = document.querySelectorAll(selector),
        wrapped = [].slice.call(collection);
    wrapped.__proto__ = MyAPI;
    return wrapped;
}
var $myCollection = $('.items');

3.使用Object.create并迭代所有元素:

function $(selector) {
    var collection = document.querySelectorAll(selector),
        wrapped = Object.create(MyAPI);
    for (var i = 0, l = collection.length; i < l; i++) {
        wrapped[i] = collection[i];
    }
    return wrapped;
};
var $myCollection = $('.items');   

4.使用构造器函数并迭代所有元素

function $(selector) {
    var collection = document.querySelectorAll(selector)
    for (var i = 0, l = collection.length; i < l; i++) {
        this[i] = collection[i];
    }
};
$.prototype = MyAPI;
var $myCollection = new $('.items');   

每一种方法都需要迭代元素本身或者API成员。这就是为什么说它们是未经优化的。根据元素的个数或者API的个数，这些方法的消耗会是非常昂贵的。

jQuery和Zepto

像jQuery和Zepto这样的库使用的都是哪一种方式呢？基本上来说，jQuery使用的是方法4，而Zepto使用的是proto方法2。

Object.proto

我们再来稍微思考一下proto。由于在JavaScript中数组也是对象，我们使用Object.prototype.proto（或者是ES6中即将到来的Object.setPrototyeOf）也是有意义的。这个属性在大多数浏览器中都可以正常运行，除了IE10及其以下版本。使用该属性的另一个缺点是它并不够快，尤其是在与数组转换(Array.slice或者迭代)一同运行时。这是因为在大多数现实世界的情形中，类数组的几个比如NodeList以及ElementList应该先被转化为静态集合，而动态的NodeLists很有可能会导致不可预测的错误。因此你依然需要迭代。

性能

基本上来说，proto方法性能会显得略微弱一些。