读jQuery之六(缓存数据)
2014-02-26 17:00
447 查看
http://www.cnblogs.com/snandy/archive/2011/06/10/2077298.html
很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如?
jQuery从1.2.3开始提供了data/removeData方法用来存储/删除数据。1.6.1代码片段
?
jQuery.cache 空对象,用来缓存。它的结构较复杂。
jQuery.uuid 自增唯一的数字。
jQuery.expando 字符串,使用Math.random生成,去掉了非数字字符。它作为HTMLElement或JS对象的属性名。
?
jQuery.hasData 用来判断HTMLElement或JS对象是否具有数据。返回true或false。即如果调用了jQuery.data方法添加了属性,则返回true。
?
jQuery.acceptData 用来判断该元素是否能接受数据,返回true或false。在jQuery.data中使用。
jQuery.data 这是提供给客户端程序员使用的方法,它同时是setter/getter。
传一个参数,返回附加在指定元素的所有数据,即thisCachejQuery.data(el); // thisCache
传二个参数,返回指定的属性值jQuery.data(el, 'name');
传三个参数,设置属性及属性值jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu', {});
传四个参数,第四个参数pvt仅提供给jQuery库自身使用。即jQuery._data方法中传true。因为jQuery的事件模块严重依赖于jQuery.data,为避免人为的不小心重写在这个版本中加入的
jQuery.removeData 删除数据。
上面是jQuery数据缓存模块的整体概述,下面详细说下jQuery.data方法。jQuery.data为两种对象提供缓存:JS对象和HTMLElement
?
内部实现上也是有区别的,
1,为JS对象提供缓存时,直接将数据保存在JS对象上。cache为JS对象。此时会偷偷的给JS对象添加个属性(类似于jQuery16101803968874529044),属性值也是个JS对象。举例说明
?
?
2,为HTMLElement提供缓存时,却不会直接保存在HTMLElement上。而是保存在jQuery.cache上。cache为jQuery.cache。此时先给HTMLElement添加属性(类似于jQuery16101803968874529044),属性值为数字(1,2,3递增)。即只将一些数字保存在了HTMLElement上,不会直接将数据置入。这是因为IE老版本中可能会存在内存泄露危险。而HTMLElement如何与jQuery.cache建立联系呢? 还是id。刚刚提到属性值数字就是id。举例说明
?
不知注意到没有,jQuery.data还有第四个参数pvt,这个参数只在jQuery._data中使用。
?
jQuery的数据缓存模块从1.2.3到1.6.1几乎每个版本都在变。jQuery._data的提出就是为了避免客户端程序员覆盖/重写了默写模块。如jQuery事件模块中事件handler等就使用jQuery.data存储,如果重写了该模块。那么事件模块将瘫痪。因此特意添加了pvt参数及jQuery._data方法。
但如果你刻意要破坏,那么还是可以做的。如下
?
整个jQuery.data设置(set)数据缓存的过程就是如此,理解的这个。取数据(get)的过程就好理解了。不重复。
最后,我会给zChian.js添加zChain.data/removeData方法,因为是“迷你版”,仅给HTMLElement添加数据缓存。请注意。
demo:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var myObj = {}; //定义js对象
$("#btn1").click(function(){
var el = document.getElementById('divdata');
$.data(el, 'name', 'jack'); //将数据{name:"jack"}存放到div上
alert( $.data(el, 'name')); //读取到值 jack
$.data(myObj, 'name', 'jack myObj');//存放对象
alert($.data(myObj, 'name')); // 获取值jack myObj
});
$("#btn2").click(function(){
var el = document.getElementById('divdata');
console.info($.data(el).name); //jack,等价于$.data(el,"name")
console.info($.data(myObj)); //Object {toJSON: function, name: "jack myObj"}
});
});
</script>
</head>
<body>
<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div id="divdata"></div>
</body>
</html>
相关文章推荐
- jQuery插件之清空区域内容
- 读jQuery之三(构建选择器)
- 读jQuery之五(取DOM元素)
- 读jQuery之四(优雅的迭代)
- jQuery四种事件绑定方式.bind(),.live(),.delegate(),on()的区别
- jQuery开发插件的两个方法
- JQuery的extend方法详解
- jquery的ajax重写
- Jquery获取select,dropdownlist,checkbox下拉列表框的值
- jquery live()调用不存在的解决方法
- jquery鼠标跟随简单效果
- jQuery Mobile 表单选择菜单
- jQuery判断文本框是否为空
- action跳转过后,jquery失效
- 简单选项卡 js和jquery制作方法分享
- jquery live() 替换 方法
- jquery ajax传递json到struts2,再返回json
- jQuery.ajax
- jQuery.ajax使用方法
- 高效 jquery 的奥秘