【原創】jQuery1.8.2源碼解析之jQuery.data

數據緩存，jQuery現在支持兩種：

1. dom元素，數據存儲在jQuery.cache中。

2.普通js對象，數據存儲在該對象中。

 

 以下是源代碼：

var rbrace = /^(?:\{.*\}|\[.*\])$/,
    rmultiDash = /([A-Z])/g;

// 首先是對jQuery對象自身的擴展
jQuery.extend({
    // 即jQuery.cache，負責存儲dom元素的緩存數據
    cache: {},

    // removeData時，緩存的數據被清除，返回的當時對應的id，以便再利用
    deletedIds: [], 

    // Please use with caution
    // 將數據存儲到jQuery.cache中時，需要唯一id，用它來維護
    uuid: 0,

    // Unique for each copy of jQuery on the page
    // Non-digits removed to match rinlinejQuery
    // 內部key（隨即生成），之后會作為key添加到dom的屬性集中，而key對應的value則是該dom對應的緩存對象
    expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),

    // The following elements throw uncatchable exceptions if you
    // attempt to add expando properties to them.
    // 不能添加expando屬性的dom
    // classid為'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'的object是可以的，比較特殊吧
    noData: {
        "embed": true,
        // Ban all objects except for Flash (which handle expandos)
        "object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",
        "applet": true
    },

    hasData: function( elem ) {
        elem = elem.nodeType ? jQuery.cache[ elem[jQuery.expando] ] : elem[ jQuery.expando ];
        return !!elem && !isEmptyDataObject( elem );
    },

    data: function( elem, name, data, pvt /* Internal Use Only */ ) {
        if ( !jQuery.acceptData( elem ) ) {
            return;
        }

        var thisCache, ret,
            internalKey = jQuery.expando,
            getByName = typeof name === "string",

            // We have to handle DOM nodes and JS objects differently because IE6-7
            // can't GC object references properly across the DOM-JS boundary
            // 也就是說dom元素和普通js對象要進行不同的處理
            // 原因好像是是垃圾回收不能正確處理添加到dom元素的引用
            isNode = elem.nodeType,

            // Only DOM nodes need the global jQuery cache; JS object data is
            // attached directly to the object so GC can occur automatically
            // dom元素我們借用全局jQuery.cache來存儲數據
            // 普通的js對象則直接將數據存儲到對象中，垃圾回收可以自動處理
            cache = isNode ? jQuery.cache : elem,

            // Only defining an ID for JS objects if its cache already exists allows
            // the code to shortcut on the same path as a DOM node with no cache
            // 1. 如果是dom元素，返回dom元素expando對應的id（值可能為undefined）
            // 2. 如果是普通js對象，分兩種情況：
            //    2.1 如果js對象存在expando對應的值，即代表有緩存數據，則立即返回expando作為id
            //    2.2 如果沒有對應值，則代表沒有緩存數據，此時返回undefined
            // 也就是說如果id不為空，那么肯定是有存儲數據過的
            id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey;

        // Avoid doing any more work than we need to when trying to get data on an
        // object that has no data at all
        // 如果id不存在（表示不存在緩存）
        // 或者id存在，但是緩存為空
        // 又或者此時數據是私有的（pvt為true，僅為內部使用，此時只操控到cache[id]這一層）
        // 又或者數據不是私有的，但是對應的數據（data）為空
        // 以上條件之一成立后，
        // 再加上，getByName && data === undefined(表示是取數據)這個條件，直接return就可以了，因為沒有數據取
        // 如果getByName為false，那么將初始化緩存對象（也為后來可能的name為object或者function時，extend做准備）
        if ( (!id || !cache[id] || (!pvt && !cache[id].data)) && getByName && data === undefined ) {
            return;
        }
        // 如果id為空，表示dom元素或者普通js對象沒有緩存
        if ( !id ) {
            // Only DOM nodes need a new unique ID for each element since their data
            // ends up in the global cache
            // dom元素需要唯一id，因為它的數據將存在全局的jQuery.cache中
            if ( isNode ) {
                elem[ internalKey ] = id = jQuery.deletedIds.pop() || ++jQuery.uuid;
            } else {
            // 普通js對象的id都是expando
                id = internalKey;
            }
        }

        // 如果緩存為空，則之前沒有存儲過數據，此時需要進行必要的初始化
        if ( !cache[ id ] ) {
            // 創建緩存對象（理解為一個存放鍵值對的集合）
            cache[ id ] = {};

            // Avoids exposing jQuery metadata on plain JS objects when the object
            // is serialized using JSON.stringify
            // 普通js對象需要在它的緩存對象中添加toJSON方法，其中jQuery.noop只是有個空函數，什么都不做
            // 這里的目的是：在使用JSON.stringify(elem)序列化該js對象時，使它的緩存對象不參與序列化（空函數返回空）
            // 而dom元素是無法使用JSON.stringify(dom)的，會報錯Converting circular structure to JSON
            if ( !isNode ) {
                cache[ id ].toJSON = jQuery.noop;
            }
        }

        // An object can be passed to jQuery.data instead of a key/value pair; this gets
        // shallow copied over onto the existing cache
        // 就是說在適用jQuery.data()緩存數據時，除了傳遞key/value鍵值對外，還可以傳遞一個對象，或者一個函數（返回一個對象）
        // 這樣的結果是：傳遞的對象將會被extend到緩存中去
        if ( typeof name === "object" || typeof name === "function" ) {
            if ( pvt ) {
                // 私有數據，這里我明白了大概pvt的用處
                // cache[id].data 對象是用來存儲用戶自定義數據
                // cache[id] 則存儲的是系統內部數據，比如之前說的toJSON
                // pvt不為空，則處理用戶自定義數據，定位到cache[id].data這一層
                // pvt為空，則處理系統內部數據，定位到cache[id]這一層
                cache[ id ] = jQuery.extend( cache[ id ], name );
            } else {
                cache[ id ].data = jQuery.extend( cache[ id ].data, name );
            }
        }

        thisCache = cache[ id ];

        // jQuery data() is stored in a separate object inside the object's internal data
        // cache in order to avoid key collisions between internal data and user-defined
        // data.
        // 就是說為了防止系統內部數據和用戶自定義數據的key發生沖突，才將用戶數據包在thisCache.data中，
        // 系統內部數據就是thisCache中
        if ( !pvt ) {
            if ( !thisCache.data ) {
                thisCache.data = {};
            }

            //此時thisCache指向真正的數據緩存（集合）
            thisCache = thisCache.data;
        }

        // 如果data不為undefined，則表示這是在設置數據（set），那么進行負值緩存操作
        // jQuery.camelCase( name )將name駝峰化
        if ( data !== undefined ) {
            thisCache[ jQuery.camelCase( name ) ] = data;
        }

        // Check for both converted-to-camel and non-converted data property names
        // If a data property was specified
        // 返回指定name的數據，包括取數據和設置數據，都會返回。
        if ( getByName ) {

            // First Try to find as-is property data
            // 首先嘗試取數據
            ret = thisCache[ name ];

            // Test for null|undefined property data
            // 如果ret為null或者undefined，則嘗試將name駝峰化再嘗試取數據（因為有可能之前name就被駝峰化）
            if ( ret == null ) {
                // Try to find the camelCased property
                ret = thisCache[ jQuery.camelCase( name ) ];
            }
        } else {
            // 沒有指定name，則返回整個緩存對象
            ret = thisCache;
        }
        //返回數據
        return ret;
    },

    removeData: function( elem, name, pvt /* Internal Use Only */ ) {
        if ( !jQuery.acceptData( elem ) ) {
            return;
        }

        var thisCache, i, l,

            isNode = elem.nodeType,

            // See jQuery.data for more information
            cache = isNode ? jQuery.cache : elem,
            id = isNode ? elem[ jQuery.expando ] : jQuery.expando;

        // If there is already no cache entry for this object, there is no
        // purpose in continuing
        // 沒有緩存，直接退出
        if ( !cache[ id ] ) {
            return;
        }

        // 如果有傳入name，那么刪除指定name對應的數據
        // 否則刪除所有緩存，后面的代碼有這一步處理
        if ( name ) {
            // 這里還是一樣，通過內部pvt指定緩存層級，用戶自定義數據層和系統內部數據層
            thisCache = pvt ? cache[ id ] : cache[ id ].data;

            if ( thisCache ) {

                // Support array or space separated string names for data keys
                // 支持單個的key
                // 數組，多個key，如：[key1, key2, key3, ...]
                // 字符串，多個key，用空格隔開，如：'key1 key2 key3 ...'

                //不是數組的情況，最終轉換為數組形式
                if ( !jQuery.isArray( name ) ) {

                    // try the string as a key before any manipulation
                    // 首先直接查找
                    if ( name in thisCache ) {
                        name = [ name ];        //轉換成數組形式，便於后面統一操作
                    } else {

                        // split the camel cased version by spaces unless a key with the spaces exists
                        name = jQuery.camelCase( name );
                        // 駝峰化后再查找
                        if ( name in thisCache ) {
                            name = [ name ];
                        // 用字符串轉換為數組
                        } else {
                            name = name.split(" ");
                        }
                    }
                }
                // 統一用數組進行刪除操作
                // 有一個疑問就是，如果數組元素沒有被駝峰化，應該會出錯？！
                for ( i = 0, l = name.length; i < l; i++ ) {
                    // delete thisCache[ jQuery.camelCase(name[i]) ];
                    delete thisCache[ name[i] ];
                }

                // If there is no data left in the cache, we want to continue
                // and let the cache object itself get destroyed
                // 如果緩存不為空，則退出
                // 否則，需要進行下一步的清理工作，因為此時緩存為空了嘛
                if ( !( pvt ? isEmptyDataObject : jQuery.isEmptyObject )( thisCache ) ) {
                    return;
                }
            }
        }

        // See jQuery.data for more information
        if ( !pvt ) {
            // 去除data屬性
            delete cache[ id ].data;

            // Don't destroy the parent cache unless the internal data object
            // had been the only thing left in it
            // 當data處理過后需要檢測cache[id]，因為此時cache[id]可能處於空的狀態（這里的所謂的空在isEmptyDataObject有說明）
            if ( !isEmptyDataObject( cache[ id ] ) ) {
                return;
            }
        }

        // Destroy the cache
        // 如果是dom元素，除了jQuery.cache清理完畢后，還要處理dom元素自身，因為綁定了一個id嘛
        if ( isNode ) {
            jQuery.cleanData( [ elem ], true );

        // Use delete when supported for expandos or `cache` is not a window per isWindow (#10080)
        } else if ( jQuery.support.deleteExpando || cache != cache.window ) {
            delete cache[ id ];

        // When all else fails, null
        } else {
            cache[ id ] = null;
        }
    },

    // For internal use only.
    // 內部適用，這里設置pvt為true，返回內部數據，定位到cache[id]這一層
    _data: function( elem, name, data ) {
        return jQuery.data( elem, name, data, true );
    },

    // A method for determining if a DOM node can handle the data expando
    // 根據上面的jQuery.noData屬性判斷dom該元素是否可以添加expando屬性（即dom是否允許添加數據）
    // 其中，classid為'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'的object是可以的，比較特殊吧
    acceptData: function( elem ) {
        var noData = elem.nodeName && jQuery.noData[ elem.nodeName.toLowerCase() ];

        // nodes accept data unless otherwise specified; rejection can be conditional
        return !noData || noData !== true && elem.getAttribute("classid") === noData;
    }
});

// 接下來是對jQuery對象（$(selector)）的擴展
jQuery.fn.extend({
    data: function( key, value ) {
        var parts, part, attr, name, l,
            elem = this[0],
            i = 0,
            data = null;

        // Gets all values
        // 如果為連key的值都未指定，那么返回的所有數據
        // 如：$dom.data();
        if ( key === undefined ) {
            if ( this.length ) {
                // 先從jquery緩存中取出所有數據
                data = jQuery.data( elem );

                // 對於元素節點而言，數據可以來自兩個地方：
                // 1. jQuery.cache緩存中，之前手動存進去的，如：$dom.data('data1', value1);
                // 2. 來自html標簽的以data-開頭的屬性，之后該屬性的數據也會被存儲到jQuery.cache緩存中，
                //    （屬性名采用駝峰的形式）避免每次都要去html標簽里去匹配並取值
                //    如：<div data-data-first="{a:1,b:2}" data-data-second="hello">hello world</div>
                //    當使用$dom.data()時，會獲取到：
                // {
                //     dataFirst : {
                //         a : 1,
                //         b : 2
                //     }
                //     dataSecond : 'hello world'
                // }

                // 通過緩存中的內部屬性parsedAttrs，分析html標簽屬性所帶的數據是否被解析過（即存到jQuery過緩存中）
                // 解析過了，那么這里就沒必要再解析一遍了，上面一步就已經取到數據了
                if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) {
                    attr = elem.attributes;
                    // 遍歷dom節點的屬性列表
                    for ( l = attr.length; i < l; i++ ) {
                        name = attr[i].name;
                        // 對於屬性名以data-開頭的屬性進行取值存儲操作
                        if ( name.indexOf( "data-" ) === 0 ) {
                            // 首先name去除data-,並將剩余的字符駝峰化
                            name = jQuery.camelCase( name.substring(5) );

                            dataAttr( elem, name, data[ name ] );
                        }
                    }
                    // 標記html標簽上的數據已經解析過
                    jQuery._data( elem, "parsedAttrs", true );
                }
            }

            return data;
        }

        // Sets multiple values
        // 傳遞對象（鍵值對）作為data緩存，此時是對jQuery對象列表進行each操作
        if ( typeof key === "object" ) {
            return this.each(function() {
                jQuery.data( this, key );
            });
        }

        parts = key.split( ".", 2 );
        parts[1] = parts[1] ? "." + parts[1] : "";
        part = parts[1] + "!";

        return jQuery.access( this, function( value ) {

            if ( value === undefined ) {
                data = this.triggerHandler( "getData" + part, [ parts[0] ] );

                // Try to fetch any internally stored data first
                if ( data === undefined && elem ) {
                    // 首先從jQuery緩存中獲取
                    data = jQuery.data( elem, key );
                    // 再從html標簽里面獲取（可見標簽數據的優先級高）
                    data = dataAttr( elem, key, data );
                }

                return data === undefined && parts[1] ?
                    this.data( parts[0] ) :
                    data;
            }

            parts[1] = value;
            this.each(function() {
                var self = jQuery( this );

                self.triggerHandler( "setData" + part, parts );
                jQuery.data( this, key, value );
                self.triggerHandler( "changeData" + part, parts );
            });
        }, null, value, arguments.length > 1, null, false );
    },

    removeData: function( key ) {
        return this.each(function() {
            jQuery.removeData( this, key );
        });
    }
});

function dataAttr( elem, key, data ) {
    // If nothing was found internally, try to fetch any
    // data from the HTML5 data-* attribute
    // 如果data為空，且elem為元素節點，那么從標簽的數據屬性取數據（遵循html5）
    if ( data === undefined && elem.nodeType === 1 ) {
        // 將駝峰化轉換成'-'連接的小寫字符串
        var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
        // 獲取dom上的對應屬性
        data = elem.getAttribute( name );
        // 如果該屬性存在，此時data為字符串，下面將進行根據數據類型進行數據的格式化
        if ( typeof data === "string" ) {
            try {
                // 布爾型
                data = data === "true" ? true :
                data === "false" ? false :
                // null
                data === "null" ? null :
                // Only convert to a number if it doesn't change the string
                // +data用來測試類型是否為數字
                +data + "" === data ? +data :
                // 對象和數組
                rbrace.test( data ) ? jQuery.parseJSON( data ) :
                    data;
            } catch( e ) {}

            // Make sure we set the data so it isn't changed later
            // 將格式化的數據存在jQuery.cache緩存。
            //（注意這里存的是jQuery.cache中，也就是說之前通過$dom.data()獲取的對象，因為是引用，所以此時也是有值的）
            jQuery.data( elem, key, data );

        } else {
            // 如果該屬性不存在，此時data為null，將其轉換為undefined
            data = undefined;
        }
    }
    // 返回標簽屬性數據
    return data;
}

// checks a cache object for emptiness
// 內部使用，用於檢測cache[id]這一層是否為空
// 其中，toJSON 不參與檢測，也就是說只有它存在時，也算是空
// 其中，data 參與檢測，如果data不為空，整個cache[id]則不為空
function isEmptyDataObject( obj ) {
    var name;
    for ( name in obj ) {

        // if the public data object is empty, the private is still empty
        // 對於data屬性，需要額外判斷data里面是否有數據
        // 如果沒有，則data為空，那么跳過data，繼續檢測
        // 否則將在下面的返回false,表示不為空
        if ( name === "data" && jQuery.isEmptyObject( obj[name] ) ) {
            continue;
        }
        // toJSON 這個方法可以認為是是內置的，可以忽略它。
        // 如果不是toJSON 一律返回false，表示還有其他數據
        if ( name !== "toJSON" ) {
            return false;
        }
    }

    return true;
}