jQuery源码分析-07数据缓存-Cache

作者：nuysoft/高云　QQ：47214707　EMail：nuysoft@gmail.com

声明：本文为原创文章，如需转载，请注明来源并保留原文链接。

读读写写，不对的地方请告诉我，多多交流共同进步，本章的的PDF下载在最后。

7. 数据缓存 Cache
jQuery提供了jQuery.data()和jQuery.fn.data()，实现对缓存的操作。jQuery.fn.data()内部通过jQuery.data()实现。jQuery.data()有三种用法：

/**

 * jQuery.data( elem, key, value ) 在指定元素上存储/添加任意的数据，处理了循环引用和内存泄漏问题

 * jQuery.data( elem, key ) 返回指定元素上name指定的值

 * jQuery.data( elem ) 返回全部数据

 */
 

7.1        实现思路
l  写入（引用jQuery.data()接口的三个参数：elem，key，value）

在匹配的DOM元素（elem）上附加一个唯一ID，在$.cache中添加同样的ID属性，该ID属性的值是一个对象，其中存储了key/value映射。

其中有几个关键点：

n  所有数据都存储在全局变量$.cache中

n  唯一ID是一个整型值，初始为0，调用data接口时自动加一，生成新的唯一ID

n  唯一ID附加在以$.expando命名的属性上，$.expando是动态生成的，类似于一个时间戳，以尽可能的避免与用户变量冲突

l  读取

从匹配的DOM元素（elem）上取到唯一ID，在$.cache中找到唯一ID对应的对象，再从对应的对象中找到key对应的值

7.2        验证
下面用代码验证一下（在火狐中用firebug调试）：

// 查看存储唯一ID的属性名

$.expando // 返回 "jQuery161013869011191548697"

// 在body节点上写入数据

$('body').data( 'a', 1 )

$('body').data( 'b', 2 )

// 读取body节点的唯一ID

$('body')[0][ $.expando ] // 返回5

$('body')[0][ "jQuery161013869011191548697" ] // 返回5

// 读取数据

$.cache[5] // 返回 Object { a=1, b=2}，验证成功！
 

7.3        源码分析
7.3.1  jQuery.data
// 数据缓存

var rbrace = /^(?:\{.*\}|\[.*\])$/, // 花括号或方括号

    rmultiDash = /([a-z])([A-Z])/g; // 驼峰写法，大小写之间会被插入破折号

jQuery.extend({

    cache: {},

    // Please use with caution

    uuid: 0, // 唯一id种子，DOM元素第一次调用data接口存储数据时，会用uuid++的方式，生成一个新的唯一id

    // Unique for each copy of jQuery on the page

    // Non-digits removed to match rinlinejQuery

    // 页面上jQuery副本的唯一标识

    // 非数字符号被移除以匹配rinlinejQuery

    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.

    //

    // YunG:

    // 如果尝试在embed、object、applet上附加属性值，将会抛出未捕获的异常

    //

    // embed：

    // embed标签用于播放一个多媒体对象，包括Flash、音频、视频等

    // http://221.199.150.103/jsj/html/page/book/xhtml/m_embed.htm

    //

    // object：

    // object元素用于向页面添加多媒体对象，包括Flash、音频、视频等。它规定了对象的数据和参数，以及可用来显示和操作数据的代码。

    // <object>与</object>之间的文本是替换文本，如果用户的浏览器不支持此标签会显示这些文本。

    // object元素中一般会包含<param>标签，<param>标签可用来定义播放参数。

    // http://221.199.150.103/jsj/html/page/book/xht