您好,欢迎访问一九零五行业门户网

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

很多同学在项目中都喜欢将数据存储在htmlelement属性上,如
复制代码 代码如下:
test
给页面中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。
复制代码 代码如下:
aa
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提供缓存
内部实现上也是有区别的,
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。举例说明
复制代码 代码如下:
el 上添加了属性jquery.expando,值为id,这个id是从1开始递增的。而id又作为jquery.cache的属性(key)。这样就htmlelement就与jquery.cache建立了联系。如图
不知注意到没有,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方法。
但如果你刻意要破坏,那么还是可以做的。如下
复制代码 代码如下:
test
点击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
其它类似信息

推荐信息