jQuery源码解读 - 数据缓存系统：jQuery.data

    jQuery.extend({
        //jQuery.cache对象，仓库
        cache: {},
        noData: {
            //有可能权限不够，所以过滤
            "applet ": true,
            "embed ": true,
            //ie的flash可以通过
            "object ": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        }
        //其余API代码略
    });

    jQuery.acceptData = function (elem) {
        //确定一个对象是否允许设置Data 
        var noData = jQuery.noData[(elem.nodeName + " ").toLowerCase()],
		nodeType = +elem.nodeType || 1;
        //进行过滤
        return nodeType !== 1 && nodeType !== 9 ?
		false :
        //如果是jQuery.noData里面限定的节点的话，则返回false
        //如果节点是object，则判定是否是IE flash的classid
	!noData || noData !== true && elem.getAttribute("classid") === noData;
    };

 function internalData(elem, name, data, pvt /* Internal Use Only */) {
        //pvt：标识是否是内部数据

        //判定对象是否可以存数据
        if (!jQuery.acceptData(elem)) {
            return;
        }
        var ret, thisCache,
              //来自jQuery随机数（每一个页面上唯一且不变的）
		    internalKey = jQuery.expando,
            /*
    		    如果是DOM元素，
		        为了避免javascript和DOM元素之间循环引用导致的浏览器(IE6/7)垃圾回收机制不起作用，
		        要把数据存储在全局缓存对象jQuery.cache中
            */
		    isNode = elem.nodeType,
		    //只有DOM节点才需要全局缓存，js对象是直接连接到对象的
            //如果是DOM，则cache连接到jQuery.cache
		    cache = isNode ? jQuery.cache : elem,
		    //如果是DOM，则获取钥匙，如果是第一次读取，则读取不到钥匙
		    id = isNode ? elem[internalKey] : elem[internalKey] && internalKey;
        //检测合法性，避免做更多的工作，pvt标识是否是内部数据
        if ((!id || !cache[id] || (!pvt && !cache[id].data)) && data === undefined && typeof name === "string") {
            return;
        }
        //没有拿到钥匙，则赋上ID
        if (!id) {
            if (isNode) {
                /*
                   DOM需要有一个全新的全局id，
                   为DOM建立一个jQuery的全局id
                   低版本代码：elem[ internalKey ] = id = ++jQuery.uuid;
                   这个deletedIds暂时忽略，当初jQuery准备重用uuid，后来被guid取代了
                */
                id = elem[internalKey] = deletedIds.pop() || jQuery.guid++;
            } else {
                //对象就不用这么麻烦了，直接挂钥匙就可以了
                id = internalKey;
            }
        }
        //从jQuery.cache中没有读取到，则开辟一个新的
        if (!cache[id]) {
            //创建一个新的cache对象，这个toJson是个空方法
            cache[id] = isNode ? {} : { toJSON: jQuery.noop };
            /*
              对于javascript对象，设置方法toJSON为空函数，
              以避免在执行JSON.stringify()时暴露缓存数据。
              如果一个对象定义了方法toJSON()
              JSON.stringify()在序列化该对象时会调用这个方法来生成该对象的JSON元素
            */
        }

            /*
              先把Object/Function的类型的数据挂上。调用方式 :
              $(Element).data({‘name‘:‘linkFly‘});
              这里的判定没有调用jQuery.type()...当然在于作者的心态了...
            */
        if (typeof name === "object" || typeof name === "function") {
            if (pvt) {//如果是内部数据
                //挂到cache上
                cache[id] = jQuery.extend(cache[id], name);
            } else {
                //如果是自定义数据，则挂到data上
                cache[id].data = jQuery.extend(cache[id].data, name);
            }
        }
        //调整位置，因为有可能是取数据
        thisCache = cache[id];

        if (!pvt) {
            //如果不是内部数据（即用户自定义数据），则调整到jQuery.chche.data上
            if (!thisCache.data) {
                thisCache.data = {};
            }
           //继续调整位置
            thisCache = thisCache.data;
        }
        /*
             到了这里外面的调用方式是
             $(Element).data(‘name‘,‘value‘);
        */
        if (data !== undefined) {
            //挂上数据
            thisCache[jQuery.camelCase(name)] = data;
        }
       if (typeof name === "string") {
            ret = thisCache[name];
            if (ret == null) {
                ret = thisCache[jQuery.camelCase(name)];
            }
        } else {
           ret = thisCache;
        }

        //同时处理获取数据的情况
        return ret;
    }        

        if (!jQuery.acceptData(elem)) {
            return;
        }
        var ret, thisCache,
             //来自就jQuery随机数（每一个页面上唯一且不变的）
		    internalKey = jQuery.expando,
            /*
        	    如果是DOM元素，
		        为了避免javascript和DOM元素之间循环引用导致的浏览器(IE6/7)垃圾回收机制不起作用，
		        要把数据存储在全局缓存对象jQuery.cache中；
		        对于javascript对象有垃圾回收机制
		        所以不会有内存泄露的问题
		        因此数据可以直接存储在javascript对象上
            */
		    isNode = elem.nodeType,
            //如果是Element，则cache连接到jQuery.cache
		    cache = isNode ? jQuery.cache : elem,
		    //如果是Element，则获取钥匙
		    id = isNode ? elem[internalKey] : elem[internalKey] && internalKey;
        //检测合法性，第一次调用$(Element).data(‘name‘)会被拦截
        if ((!id || !cache[id] || (!pvt && !cache[id].data)) && data === undefined && typeof name === "string") {
            return;
        }

        //没有ID，则赋上ID
        if (!id) {
            if (isNode) {
               /*
                DOM需要有一个全新的全局id
                为DOM建立一个jQuery的全局id
                低版本代码：elem[ internalKey ] = id = ++jQuery.uuid;
                这个deletedIds暂时忽略
                id = elem[internalKey] = deletedIds.pop() || jQuery.guid++;
                */
            } else {
                //而对象不需要
                id = internalKey;
            }
        }

        //从cache中没有读取到
        if (!cache[id]) {
            //创建一个新的cache对象，这个toJson是个空方法
            cache[id] = isNode ? {} : { toJSON: jQuery.noop };
            /*
                对于javascript对象，设置方法toJSON为空函数，
                以避免在执行JSON.stringify()时暴露缓存数据。
                如果一个对象定义了方法toJSON()
                JSON.stringify()在序列化该对象时会调用这个方法来生成该对象的JSON元素
            */
        }

        /*
          先把Object/Function的类型的数据挂上。调用方式 :
          $(Element).data({‘name‘:‘linkFly‘});
          这里的判定没有调用jQuery.type()...当然在于作者的心态了...
        */

        if (typeof name === "object" || typeof name === "function") {
            if (pvt) {//如果是内部数据
                //挂到cache上
                cache[id] = jQuery.extend(cache[id], name);
            } else {
                //如果是自定义数据，则挂到data上
                cache[id].data = jQuery.extend(cache[id].data, name);
            }
        }

        //有可能是获取数据，所以开始调整位置
        thisCache = cache[id];
        //调整返回值的位置
        if (!pvt) {
            //如果不是内部数据（即用户自定义数据），则挂到jQuery.chche.data上
            if (!thisCache.data) {
                thisCache.data = {};
            }

            thisCache = thisCache.data;
        }
        /*
                如果是这样调用的：$(Element).data(‘name‘,‘value‘);
                那么刚好利用上面的thisCache（当前指向要挂载的空间）
                把数据挂上去
        */
        if (data !== undefined) {
            thisCache[jQuery.camelCase(name)] = data;
        }
        //数据全部挂好，调整返回值
        if (typeof name === "string") {
            //如果参数是一个字符串
            //则抓取这个字符串对应的数据
            ret = thisCache[name];

            //抓取失败，转换成驼峰再抓
            if (ret == null) {
            }
        } else {
            //如果参数是Object/Function，则直接返回
            ret = thisCache;
        }

        //最终返回
        return ret;

function internalRemoveData(elem, name, pvt) {
        //移除一个data到jQuery缓存中
        if (!jQuery.acceptData(elem)) {
            return;
        }

        var thisCache, i,
		isNode = elem.nodeType,
		cache = isNode ? jQuery.cache : elem,
		id = isNode ? elem[jQuery.expando] : jQuery.expando;
        if (!cache[id]) {
            return;
        }

        if (name) {
            //获取数据
            thisCache = pvt ? cache[id] : cache[id].data;

            if (thisCache) {
                if (!jQuery.isArray(name)) {//如果并不具有数组行为
                    if (name in thisCache) {
                        //检查缓存是否有这个对象
                        name = [name];
                    } else {
                        name = jQuery.camelCase(name);
                        //转换驼峰再次尝试
                        if (name in thisCache) {
                            name = [name];
                        } else {
                            //拿不到
                            name = name.split(" ");
                        }
                    }
                } else {
                    //jQuery.map将一个类数组转转换成真正的数组
                    //注意这里使用了连接，即如果删除失败则采用驼峰命名再次尝试删除，逻辑好严谨
                    name = name.concat(jQuery.map(name, jQuery.camelCase));
                }

                i = name.length;
                //删除缓存
                while (i--) {
                    delete thisCache[name[i]];
                }

                //如果是剩下的缓存中没有数据了，则完成了任务，否则继续
                if (pvt ? !isEmptyDataObject(thisCache) : !jQuery.isEmptyObject(thisCache)) {
                    return;
                }
            }
        }

        //如果不是jQuery内部使用
        if (!pvt) {
            delete cache[id].data;// data也删除
            //检测还有没有数据，还有数据则继续
            if (!isEmptyDataObject(cache[id])) {
                return;
            }
        }

        //如果是Element，则破坏缓存
        if (isNode) {
            jQuery.cleanData([elem], true);
        } else if (support.deleteExpando || cache != cache.window) {
            //不为window的情况下，或者可以浏览器检测可以删除window.属性，再次尝试删除
            //低版本ie不允许删除window的属性
            delete cache[id];
        } else {
            //否则，直接null
            cache[id] = null;
        }
    }

        //移除一个data到jQuery缓存中
        if (!jQuery.acceptData(elem)) {
            return;
        }

        var thisCache, i,
		    isNode = elem.nodeType,
		    cache = isNode ? jQuery.cache : elem,
                //根据jQuery标识拿钥匙
		    id = isNode ? elem[jQuery.expando] : jQuery.expando;
        //如果找不到缓存，不再继续
        if (!cache[id]) {
            return;
        }

if (name) {
            //获取缓存的位置
            thisCache = pvt ? cache[id] : cache[id].data;
            if (thisCache) {
                if (!jQuery.isArray(name)) {//如果并不具有数组行为
                    if (name in thisCache) {
                        //检查缓存是否有这个对象
                        name = [name];
                    } else {
                        name = jQuery.camelCase(name);
                        //转换驼峰再次尝试
                        if (name in thisCache) {
                            name = [name];
                        } else {
                            /*
                              这样都还拿不到，那还是按照自己的方式拿把,
                              也就是说jQuery支持
                            $(Element).removeData(‘name name2 name 3‘)
                              这样批量删除数据，真是被jQuery宠坏了...
                            */
                            name = name.split(" ");
                        }
                    }
                } else {
                    //jQuery.map将一个类数组转转换成真正的数组
                    //注意这里使用了连接，即如果删除失败则采用驼峰命名再次尝试删除，逻辑好严谨
                    name = name.concat(jQuery.map(name, jQuery.camelCase));
                    //‘name-demo name-demo2‘会转换成
                    //‘name-demo name-demo2 nameDemo nameDemo2‘
                }

                i = name.length;
                //删除缓存
                while (i--) {
                    delete thisCache[name[i]];
                }
                /*
                 如果是剩下的缓存中没有数据了，则完成了任务，否则有不和谐的情况，要继续处理
                isEmptyDataObject专门用来检测用户缓存空间是否是空Data，
                如果缓存空间是这样的{ test:{‘name‘:‘value‘} }（用户数据挂载的空间[data]是空的），就能通过
                */
                if (pvt ? !isEmptyDataObject(thisCache) : !jQuery.isEmptyObject(thisCache)) {
                    return;
                }
            }
        }

        //如果不是jQuery内部使用
        if (!pvt) {
            delete cache[id].data;// 连data也删除
            //检测还有没有数据，还有数据则继续
            if (!isEmptyDataObject(cache[id])) {
                return;
            }
        }

        //如果是Element，则破坏缓存
        if (isNode) {
            //和jQuery.event挂钩，不分析了...
            jQuery.cleanData([elem], true);
        } else if (support.deleteExpando || cache != cache.window) {
            //不为window的情况下，或者可以浏览器检测可以删除window.属性，再次尝试删除
            delete cache[id];
        } else {
            //否则，直接粗暴的null
            cache[id] = null;
        }

    function dataAttr(elem, key, data) {
        //针对HTML5做一层特别处理，等下在jQuery.fn.data中和internalData()配合使用将会大放异彩

        /*
              注意这里的一层判定，在jQuery.fn.data调用的时候
              会先调用用internalData()，然后把internalData()的返回值传递到这里，就是data
              如果data为undefined，则进行HTML5处理
        */
        if (data === undefined && elem.nodeType === 1) {
            /*
                rmultiDash = /([A-Z])/g
                针对HTML5，把驼峰命名的数据转换为连字符：
                dataSet转换为data-set
            */
            var name = "data-" + key.replace(rmultiDash, "-$1").toLowerCase();
            data = elem.getAttribute(name);//不用dataset是因为一些比较古老的手机没有被支持，楼主就被折磨过...
            if (typeof data === "string") {
                //各种丧心病狂的转换数据
                //把不同的数据类型给转换成需要的类型
                try {
                    data = data === "true" ? true :
					data === "false" ? false :
					data === "null" ? null :
                    //如果是数字
					+data + "" === data ? +data :
                    //匹配json
					rbrace.test(data) ? jQuery.parseJSON(data) :
					data;
                } catch (e) { }
                //把HTML5的数据挂到jQuery中
                jQuery.data(elem, key, data);

            } else {
                data = undefined;
            }
        }
        //返回这个data，jQuery.fn.data会调用dataAttr()并返回它的值
        return data;
    }

jQuery.fn.extend({
        data: function (key, value) {
            var i, name, data,
			elem = this[0],
			attrs = elem && elem.attributes;
            //$(Element).data() - 获取全部数据
            if (key === undefined) {
                //获取
                if (this.length) {
                    data = jQuery.data(elem);
                    //如果没有标志parsedAttrs的数据，则表示没有进行过HTML5的属性转换
                    if (elem.nodeType === 1 && !jQuery._data(elem, "parsedAttrs")) {
                        i = attrs.length;
                        while (i--) {
                            //那么转换HTML5的属性
                            if (attrs[i]) {
                                name = attrs[i].name;
                                if (name.indexOf("data-") === 0) {
                                    name = jQuery.camelCase(name.slice(5));
                                    //配合dataAttr进行转换
                                    dataAttr(elem, name, data[name]);
                                }
                            }
                        }
                        //放上属性parsedAttrs，表示HTML5转换完毕
                        jQuery._data(elem, "parsedAttrs", true);
                    }
                }

                return data;
            }

            //$(Element).data({ name:‘linkFly‘,value:‘hello world‘ });
            if (typeof key === "object") {
                //循环设置
                return this.each(function () {
                    jQuery.data(this, key);
                });
            }

            return arguments.length > 1 ?
            //$(Element).data(‘name‘,‘linkFly‘)
			this.each(function () {
			    jQuery.data(this, key, value);
			}) :
                /*
                    使用jQuery.data读取数据，如果读取不到，则调用dataAttr()读取并设置一遍HTML5的数据
                */
			elem ? dataAttr(elem, key, jQuery.data(elem, key)) : undefined;
        }
    });

            if (key === undefined) {
                //获取
                if (this.length) {
                    data = jQuery.data(elem);
                    //如果没有标志parsedAttrs的数据，则表示没有进行过HTML5的属性转换
                    if (elem.nodeType === 1 && !jQuery._data(elem, "parsedAttrs")) {
                        i = attrs.length;
                        while (i--) {
                            //那么转换HTML5的属性
                            if (attrs[i]) {
                                name = attrs[i].name;
                                if (name.indexOf("data-") === 0) {
                                    name = jQuery.camelCase(name.slice(5));
                                    //配合dataAttr进行转换
                                    dataAttr(elem, name, data[name]);
                                }
                            }
                        }
                        //放上属性parsedAttrs，表示HTML5转换完毕
                        jQuery._data(elem, "parsedAttrs", true);
                    }
                }

                return data;
            }

        if (typeof key === "object") {
                //循环设置
                return this.each(function () {
                    jQuery.data(this, key);
                });
        }

        return arguments.length > 1 ?
            //$(Element).data(‘name‘,‘linkFly‘)
		this.each(function () {
			jQuery.data(this, key, value);
		}) :
                /*
                    $(Elment).data(‘name‘)  
                    这里的代码很有意思：
                    jQuery.data(elem,key)是调用internalData()，而internalData最终会返回要挂载的数据
                    如果用户挂载的数据是空的，则调用dataAttr()尝试转换HTML5的数据返回并且给挂到jQuery.data
                */
        elem ? dataAttr(elem, key, jQuery.data(elem, key)) : undefined;
}

    function Data() {
            this.cache = {};
        };
        Data.uid = 1;
        Data.prototype = {
            locker: function (owner) {
                var ovalueOf,
                    unlock = owner.valueOf(Data);
                /*
                owner为元素节点、文档对象、window
                传递Data类，如果返回object说明没有被重写，返回string则表示已被重写
                整个过程被jQuery称之为开锁，通过valueOf得到钥匙，进入仓库
                */
                if (typeof unlock !== ‘string‘) {
                    //通过闭包保存，也意味着内存消耗更大
                    unlock = jQuery.expando + Data.uid++;
                    //缓存原valueOf方法
                    ovalueOf = owner.valueOf;
                    Object.defineProperty(owner, ‘valueOf‘, {
                        value: function (pick) {
                            //传入Data
                            if (pick === Data)
                                return unlock; //返回钥匙
                            return ovalueOf.apply(owner); //返回原valueOf方法
                        }
                    });
                }
                if (!this.cache[unlock])
                    this.cache[unlock] = {};
                return unlock;
            },
            get: function (owner, key) {
                var cache = this.cache[this.locker(owner)];
                return key === undefined ? cache : cache[key];
            },
            set: function (owner, key, value) {
                //略
            }
            /*其他方法略*/
        };

        (function () {
            var caches = [],
                add = function (owner) {
                    /*

                    //拆开来是这样子的
                    var length = caches.push(owner);//返回Array的length
                    return caches[length - 1] = {};//新建对象并返回
                    */
                    return caches(caches.push(owner) - 1) = {};
                },
            addData = function (owner, name, data) {
                var index = caches.indexOf(owner), //查找索引，索引即是钥匙
                //获取仓库
                    cache = index === -1 ? add(owner) : caches[index];
                //针对仓库放数据即可
            }
            //其他代码略
        })();

    (function () {
            var caches = new WeakMap(),//缓存中心
                addData = function (owner, name, data) {
                    //根据Element获取相应仓库存储的空间
                    var cache = caches.get(owner);
                    //如果获取不到，则开辟空间
                    if (!cache) {
                        cache = {};
                        //放到WeakMap对象中
                        caches.set(owner, cache);
                    }
                    //挂数据
                    cache[name] = data;
                    return cache;
                },
                removeData = function (owner, name) {
                    var cache = caches.get(owner);
                    //name为undefined的时候返回全部data，否则返回name指定的data
                    return name === undefined ? cache : cache && cache[name];
                }
            //其他代码略
        });