读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 this 深入理解
Jul 30 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
js简单实现交换Li的值
May 22 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
JavaScript数组排序功能简单实现
May 14 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
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
php递归列出所有文件和目录的代码
2008/09/10 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
javascript delete 使用示例代码
2010/03/29 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
node.js中的console用法总结
2014/12/15 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
python 求10个数的平均数实例
2019/12/16 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
2014年图书馆工作总结
2014/11/25 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL