jQuery缓存数据

摘要:
jQuery从1.2.3开始提供了data/removeData方法用来存储/删除数据。下面分别介绍jQuery.cache空对象,用来缓存。jQuery.uuid自增唯一的数字。jQuery.hasData用来判断HTMLElement或JS对象是否具有数据。因为jQuery的事件模块严重依赖于jQuery.data,为避免人为的不小心重写在这个版本中加入的jQuery.removeData删除数据。上面是jQuery数据缓存模块的整体概述,下面详细说下jQuery.data方法。上面已经提到它是在jQuery.js引入到页面后随机生成的。而id又作为jQuery.cache的属性。jQuery的API文档上也不会公开它。因此特意添加了pvt参数及jQuery._data方法。

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

1
2
3
4
<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代码片段

1
2
3
4
5
6
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对象的属性名。

1
expando:"jQuery"+ ( jQuery.fn.jquery + Math.random() ).replace( /D/g,""),

jQuery.noDataJS对象,对于指定的HTMLElement禁用data方法。如embed、applet。

jQuery.hasData用来判断HTMLElement或JS对象是否具有数据。返回true或false。即如果调用了jQuery.data方法添加了属性,则返回true。

1
2
3
4
5
6
7
<div>aa</div>
<script>
vardiv = 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

1
2
3
4
5
6
7
8
9
10
11
12
// 为JS对象提供缓存
varmyObj = {};
$.data(myObj,'name','jack');
$.data(myObj,'name');// jack
// 为HTMLElement提供缓存
<div id="xx"></div>
<script>
varel = document.getElementById('xx');
$.data(el,'name','jack');
$.data(el,'name');// jack
</script>

内部实现上也是有区别的,

1,为JS对象提供缓存时,直接将数据保存在JS对象上。cache为JS对象。此时会偷偷的给JS对象添加个属性(类似于jQuery16101803968874529044),属性值也是个JS对象。举例说明

1
2
3
varmyObj = {};
$.data(myObj,'name','jack');
console.log(myObj);

myObj的结构如下

1
2
3
4
5
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。举例说明

1
2
3
4
5
6
7
<div id="xx"></div>
<script>
varel = 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缓存数据第1张
不知注意到没有,jQuery.data还有第四个参数pvt,这个参数只在jQuery._data中使用。

1
2
3
4
// For internal use only.
_data:function( elem, name, data ) {
returnjQuery.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方法。

但如果你刻意要破坏,那么还是可以做的。如下

1
2
3
4
5
6
7
8
9
10
<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添加数据缓存。请注意。

免责声明:文章转载自《jQuery缓存数据》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇梦回还安装完DevExpress14.2.5,如何破解它呢?下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

jQuery kxbdMarquee 无缝滚动

转:http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件。 版本:jQuery v1.3.2+ 下载 jQuery kxbdMarquee 查看 Demo   使用方法...

使用jquery刷新当前页面

如何使用jquery刷新当前页面 下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.location.reload()刷新父窗口对象(用于单开窗口) top.location.reload()刷新最顶端对象(用于...

JQuery中查找父元素,子元素,追加元素,插入元素和删除元素 及其他常用方法

Jquery之所以强大,和其在获取对象时使用与css选择器兼容的语法有很大关系。而且它还兼容了CSS3的选择器,而且多出了不少。 所以jQuery的选择器也就变得很多很强大。就最基本的有以下四个: $('*')  匹配页面所有元素 $('#id') id选择器 $('.class') 类选择器 $('element') 标签选择器 $('E[attr]')...

JVM启动参数详解 (转)

非标准参数 非标准参数又称为扩展参数,其列表如下:-Xint设置jvm以解释模式运行,所有的字节码将被直接执行,而不会编译成本地码。-Xbatch关闭后台代码编译,强制在前台编译,编译完成之后才能进行代码执行;默认情况下,jvm在后台进行编译,若没有编译完成,则前台运行代码时以解释模式运行。-Xbootclasspath:bootclasspath让jv...

前端之缓存

目录 浏览器缓存机制 缓存位置 Service worker Memory Cache Disk Cache Push Cache 缓存过程 缓存策略 强缓存 协商缓存 缓存机制 实际缓存场景 用户行为 浏览器缓存机制 有缓存查找优先级。 缓存位置 Service worker 浏览器独立线程,要求必须使用HTTPS协议保证安全性...

第二百二十七节,jQuery EasyUI,ComboTree(树型下拉框)组件

jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个组件依赖于Combo(下拉框) 和 Tree(树)组件。 一.加载方式 class 加载方式 <select id="cc"class="easy...