jQuery中数据缓存$.data的用法及源码完全解析.pdf

这篇文章主要介绍了 jQuery 中的数据缓存 $.data 的用法及源码完全解析 ,深入解读了 jQuery 对缓存对象的读写和移除的实现 ,需要的朋友可以参考下 一、实现原理： 对于 DOM 元素， 通过分配一个唯一的关联 id 把 DOM 元素和该 DOM 元素的数据缓存 对象关联起来，关联 id 被附加到以 jQuery.expando 的值命名的属性上，数据存储在全局缓 存对象 jQuery.cache 中。在读取、设置、移除数据时，将通过关联 id 从全局缓存对象 jQuery.cache 中找到关联的数据缓存对象，然后在数据缓存对象上执行读取、设置、移除操 作。 对于 Javascript 对象， 数据则直接存储在该 Javascript 对象的属性 jQuery.expando 上。 在 读取、设置、移除数据时，实际上是对 Javascript 对象的数据缓存对象执行读取、设置、移 除操作。 为了避免 jQuery 内部使用的数据和用户自定义的数据发生冲突，数据缓存模块把内部 数据存储在数据缓存对象上，把自定义数据存储在数据缓存对象的属性 data 上。 二、总体结构： // 数据缓存 Data jQuery.extend({    // 全局缓存对象    cache: {},    // 唯一 id 种子    uuid:0,    // 页面中每个 jQuery 副本的唯一标识    expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),    // 是否有关联的数据    hasData: function(){},    // 设置、读取自定数据或内部数据    data: function(elem, name, data, pvt) {},    // 移除自定义数据或内部数据    removeData: function(elem, name, pvt) {},    // 设置、读取内部数据    _data: function(elem, name, data) {},    // 是否可以设置数据    acceptData: function(elem){} }); jQuery.fn.extend({    // 设置、读取自定义数据，解析 HTML5 属性 data-    data: function(key,value){},    // 移除自定义数据    removeData: function(key){} }); // 解析 HTML5 属性 data- function dataAttr(elem,key,data){} // 检查数据缓存对象是否为空 function isEmptyDataObject(obj){} jQuery.extend({    // 清空数据缓存对象 cleanData: function(elems){} }); 三、 $.data(elem, name, data), $.data(elem, name) $.dat