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

很多同学在项目中都喜欢将数据存储在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.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

时间: 2024-10-30 07:23:53

读jQuery之六 缓存数据功能介绍_jquery的相关文章

jQuery EasyUI 的EasyLoader功能介绍_jquery

EasyLoader是可以动态加载脚本和CSS文件,也可以动态加载EasyUI已有组件 需要引用EasyLoader.js文件,注意:这里就不需要引用jquery.easyui.min.js文件了. 比如需要加载linkbutton组件,则可以用下面的两种方式来加载: 第一种通过设置class来实现: <a href="#" class="easyui-linkbutton" onclick="load1()">加载日历</a&

jquery解析JSON数据示例代码_jquery

这里可以找到json.js的代码,后面还需要formutil.js的代码及MD5.js 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符串集,字符串集如下: 代码如下: 复制代码 代码如下: var data=" { root: [ {name:'1',value

基于jQuery插件的页面功能介绍引导页示例

新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力. 查看演示 下载源码 之前也有相关文章介绍:<构建一个用于产品介绍的WEB应用>,相信对有需要的朋友有帮助.本文将介绍另一款基于jQuery的页面引导页插件:pagewalkthrough.js,来看如何使用它. HTML 首先记得加载所需的css文件和jQuery库文件,以及pagewalkthrough插件.   <!

jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)_jquery

效果图 第一步:加载 <script src="js/jquery.min.js"></script> <script src="js/jquery.mobile-1.3.2.min.js"></script> 第二步:html <div class="item-wrap"> <div class="item clearfix"> <div clas

jquery原理以及学习技巧介绍_jquery

对于JQuery,想必大家都很熟悉.目前,很多web项目,在实施的过程中,考虑到各浏览器原生JS API的兼容性,大都会选用JQuery或类似于JQuery这样的框架来进行网页效果开发.JQuery上手简单,也很容易学,即使是刚接触JQuery的开发人员,借助JQuery手册,也很快能在项目中使用开发. 虽然JQuery相对简单,但要全面掌握,且快速灵活的使用它也并不那么容易,它提供了很多方法,包含了网页开发的各个知识面,所以要全面掌握这些知识点,个人认为还是需要对jquery有深入的理解,对这

jQuery表单验证功能实例_jquery

本文实例讲述了jQuery表单验证功能.分享给大家供大家参考.具体如下: 这里使用jquery实现的表单验证效果,以Ajax方式验证你的表单是否填写正确,如果验证不通过,会将表单元素背景变成红色,并给出提示信息,简单实用,jquery表单验证功能已经有很多了,本款表单验证特效看上去更简单,不懂Ajax的朋友,或许直接套用即可实现无刷新表单验证功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-form-check-c

jQuery解析json数据实例分析_jquery

本文实例分析了jQuery解析json数据的方法.分享给大家供大家参考,具体如下: 先来看看我们的Json数据格式: [ {id:01,name:"小白",old:29,sex:"男"}, {id:02,name:"小蓝",old:29,sex:"男"}, {id:03,name:"小雅",old:29,sex:"男"} ] 为了消除乱码问题,我们设置一个过滤器(代码片段) public

Jquery遍历Json数据的方法_jquery

本文实例讲述了Jquery遍历Json数据的方法.分享给大家供大家参考.具体如下: <html> <head> <title>jQuery遍历json</title> <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> </head> <script> var a = { "

jQuery simpleModal插件的使用介绍_jquery

SimpleModal是一个轻量级的jQuery插件,它提供了一个模式对话框发展强大的接口.是一个模态对话框的框架. SimpleModal使您可以灵活地构建任何你可以设想,而屏蔽相关的跨浏览器问题. (0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simplemodal.js 1.4.4 chrome49 去官网下载simpleModal,可以省去很多麻