读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 相关文章推荐
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
通过php修改xml文档内容的方法
2015/01/23 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
Augularjs-起步详解
2016/07/08 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
js实现随机点名程序
2020/09/17 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python函数嵌套实例
2014/09/23 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Python3 max()函数基础用法
2019/02/19 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python实现的发邮件功能示例
2019/09/11 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
25道Java面试题集合
2013/05/21 面试题
2016年优秀教师先进事迹材料
2016/02/26 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python