读jQuery源码之六（Data缓存和Queue队列）

标签：

源码3523-3706 Data对象及原型定义

1.accessData方法和Data函数。代码如下：

jQuery.acceptData = function( owner ) {
    // Accepts only:
    //  - Node
    //    - Node.ELEMENT_NODE
    //    - Node.DOCUMENT_NODE
    //  - Object
    //    - Any
    /* jshint -W018 */
    return owner.nodeType === 1 || owner.nodeType === 9 || !( +owner.nodeType );
};


function Data() {
    // Support: Android<4,
    // Old WebKit does not have Object.preventExtensions/freeze method,
    // return new empty object instead with no [[set]] accessor
    Object.defineProperty( this.cache = {}, 0, {
        get: function() {
            return {};
        }
    });

    this.expando = jQuery.expando + Data.uid++;
}

View Code

　　1.1 accessData判断传入的节点类型是否属于：元素节点和document节点

　　1.2 Data函数：给Data添加了一个cache对象，并且给这个对象添加了一个属性0，默认值为{}

　　这里有一个地方需要注意，Data函数里面使用了Object.defineProperty和Object.defineProperties方法。descriptor里面定义get或set等。如果没有定义enumerable的值默认情况下为false。这就回导致你定义了一个熟悉，for in遍历的时候获取不到这个属性。这里需要注意下，可以直接读取，但是无法for in。

2.Data.prototype：这里面定义了一些方法包含key，set，get，remove,access，hasData,discard.这里值得说的是key，这个机制是我个人觉得非常优秀。通过data给Dom元素和javascript对象提供了统一的数据设置，读取，移除等入口。

　　2.1这里通过key来映射存放到cache里面的数据，而不是直接把设置的属性放到元素里面。我觉得有如下优点：提高性能，针对一个元素如果添加多个自定义属性，操作和读取会触发多次DOM操作。使用key在中间映射，大大提高性能。

源码3707-3879 声明自定义和内部使用的两个data对象进行扩展，以及对HTML5里的data-属性，封装jQuery里面的data方法对外提供

源码3882-4013 队列部分

3.队列是基于Data数据缓存和异步队列Deferred：1.7的版本里面使用Data是使用的存放内部数据的方式，但是我在2.1.4的版本里面并没有看到使用，而是统一使用了跟key来关联的方式。与给元素设置数据无异。内部声明的data_user和data_priv用法是一样，没有差别。

4.queue方法：添加方法到Data缓存队列里面。dequeue：出队并且函数调用，通过.call的方式。

待续...

读jQuery源码之六（Data缓存和Queue队列）

标签：

原文地址：http://www.cnblogs.com/mszhangxuefei/p/jQuery-006.html