$对象大揭秘
发布在每天学点javascript2014年1月26日view:5165
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

让我们先来快速回顾一下几个基于选择器查询的库例如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方法性能会显得略微弱一些。


本文译自The $ object demystified,原文地址https://medium.com/p/5fba191133eb

如果你觉得本文对你有帮助,请点击下面的链接为我提供赞助

点击这里为我提供赞助

评论
发表评论
4年前
添加了一枚【评注】:aa
5年前

好文

WRITTEN BY
张小俊128
Intern in Baidu mobile search department。认真工作,努力钻研,期待未来更多可能。
TA的新浪微博
PUBLISHED IN
每天学点javascript

javascript进阶级教程,循序渐进掌握javascript

我的收藏