读jQuery之六 缓存数据功能介绍


Posted in Javascript onJune 21, 2011

很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如

<div data="some data">Test</div> 
<script> 
div.getAttribute('data'); // some data 
</script>

给页面中div添加了自定义属性“data”及值“some data”。后续JS代码中使用getAttribute获取。
jQuery从1.2.3开始提供了data/removeData方法用来存储/删除数据。1.6.1代码片段
jQuery.extend({ 
cache: {}, 
// Please use with caution 
uuid: 0, 
... 
});

即给jQuery添加了静态字段/方法,有jQuery.cache/jQuery.uuid/jQuery.expando等。下面分别介绍
jQuery.cache 空对象,用来缓存。它的结构较复杂。
jQuery.uuid 自增唯一的数字。
jQuery.expando 字符串,使用Math.random生成,去掉了非数字字符。它作为HTMLElement或JS对象的属性名。
expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),

jQuery.noData JS对象,对于指定的HTMLElement禁用data方法。如embed、applet。
jQuery.hasData 用来判断HTMLElement或JS对象是否具有数据。返回true或false。即如果调用了jQuery.data方法添加了属性,则返回true。
<div>aa</div> 
<script> 
var div = document.getElementsByTagName('div')[0]; 
$.hasData(div); // false 
$.data(div, 'name','jack'); 
$.hasData(div); // true 
</script>

jQuery.acceptData 用来判断该元素是否能接受数据,返回true或false。在jQuery.data中使用。
jQuery.data 这是提供给客户端程序员使用的方法,它同时是setter/getter。
1,传一个参数,返回附加在指定元素的所有数据,即thisCachejQuery.data(el); // thisCache
2,传二个参数,返回指定的属性值jQuery.data(el, 'name');
3,传三个参数,设置属性及属性值jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu', {});
4,传四个参数,第四个参数pvt仅提供给jQuery库自身使用。即jQuery._data方法中传true。因为jQuery的事件模块严重依赖于jQuery.data,为避免人为的不小心重写在这个版本中加入的。
jQuery.removeData 删除数据。
上面是jQuery数据缓存模块的整体概述,下面详细说下jQuery.data方法。jQuery.data为两种对象提供缓存:JS对象和HTMLElement
// 为JS对象提供缓存 
var myObj = {}; 
$.data(myObj, 'name', 'jack'); 
$.data(myObj, 'name'); // jack 
// 为HTMLElement提供缓存 
<div id="xx"></div> 
<script> 
var el = document.getElementById('xx'); 
$.data(el, 'name', 'jack'); 
$.data(el, 'name'); // jack 
</script>

内部实现上也是有区别的,
1,为JS对象提供缓存时,直接将数据保存在JS对象上。cache为JS对象。此时会偷偷的给JS对象添加个属性(类似于jQuery16101803968874529044),属性值也是个JS对象。举例说明
var myObj = {}; 
$.data(myObj, 'name', 'jack'); 
console.log(myObj);

myObj的结构如下
myObj = { 
jQuery16101803968874529044 : { 
name : 'jack' 
} 
}

“jQuery16101803968874529044”这个字符串在data内部命名为id(注意并非HTMLElement元素的id),它实际就是jQuery.expando。上面已经提到它是在jQuery.js引入到页面后随机生成的。
2,为HTMLElement提供缓存时,却不会直接保存在HTMLElement上。而是保存在jQuery.cache上。cache为jQuery.cache。此时先给HTMLElement添加属性(类似于jQuery16101803968874529044),属性值为数字(1,2,3递增)。即只将一些数字保存在了HTMLElement上,不会直接将数据置入。这是因为IE老版本中可能会存在内存泄露危险。而HTMLElement如何与jQuery.cache建立联系呢? 还是id。刚刚提到属性值数字就是id。举例说明
<div id="xx"></div> 
<script> 
var el = document.getElementById('xx'); 
$.data(el, 'name', 'jack'); 
console.log(el[jQuery.expando]); // 1 
console.log(jQuery.cache); // {1 : {name:'jack'}} 
</script>

el 上添加了属性jQuery.expando,值为id,这个id是从1开始递增的。而id又作为jQuery.cache的属性(key)。这样就HTMLElement就与jQuery.cache建立了联系。如图

读jQuery之六 缓存数据功能介绍

不知注意到没有,jQuery.data还有第四个参数pvt,这个参数只在jQuery._data中使用。

// For internal use only. 
_data: function( elem, name, data ) { 
return jQuery.data( elem, name, data, true ); 
},

jQuery._data从命名上就指定它是私有的,使用jQuery的客户端程序员不应该去调用该方法。jQuery的API文档上也不会公开它。
jQuery的数据缓存模块从1.2.3到1.6.1几乎每个版本都在变。jQuery._data的提出就是为了避免客户端程序员覆盖/重写了默写模块。如jQuery事件模块中事件handler等就使用jQuery.data存储,如果重写了该模块。那么事件模块将瘫痪。因此特意添加了pvt参数及jQuery._data方法。
但如果你刻意要破坏,那么还是可以做的。如下
<div id="xx">Test</div> 
<script> 
$('#xx').click(function(){ 
alert('click'); 
}); 
// 语句1 
$.data($('#xx')[0], 'events', '', true); 
// 语句2 
//$._data($('#xx')[0], 'events', ''); 
</script>

点击div[id=xx]将不会触发点击事件。
整个jQuery.data设置(set)数据缓存的过程就是如此,理解的这个。取数据(get)的过程就好理解了。不重复。
最后,我会给zChian.js添加zChain.data/removeData方法,因为是“迷你版”,仅给HTMLElement添加数据缓存。请注意。

相关:
http://msdn.microsoft.com/en-us/library/Bb250448
http://bugs.jquery.com/ticket/6807
zChain-0.6.js

Javascript 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
解决vue移动端适配问题
Dec 12 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 #Javascript
读jQuery之五(取DOM元素)
Jun 20 #Javascript
读jQuery之四(优雅的迭代)
Jun 20 #Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 #Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 #Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 #Javascript
jQuery数组处理方法汇总
Jun 20 #Javascript
You might like
destoon整合UCenter图文教程
2014/06/21 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
一个JS翻页效果
2007/07/23 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
生日邀请函范文
2014/01/13 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
网络宣传方案
2014/03/15 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
员工辞退通知书
2015/04/17 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python