读jQuery之六(缓存数据)
很多同学在项目中都喜欢将数据存储在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.noData JS对象,对于指定的HTMLElement禁用data方法。如embed、applet。
jQuery.hasData 用来判断HTMLElement或JS对象是否具有数据。返回true或false。即如果调用了jQuery.data方法添加了属性,则返回true。
1
2
3
4
5
6
7
|
<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。
- 传一个参数,返回附加在指定元素的所有数据,即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
2
3
4
5
6
7
8
9
10
11
12
|
// 为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对象。举例说明
1
2
3
|
var myObj = {}; $.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> 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中使用。
1
2
3
4
|
// 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方法。
但如果你刻意要破坏,那么还是可以做的。如下
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添加数据缓存。请注意。
相关:
http://msdn.microsoft.com/en-us/library/Bb250448
http://bugs.jquery.com/ticket/6807
读jQuery之六(缓存数据)的更多相关文章
- jQuery缓存数据
很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如 1 2 3 4 <div data="some data">Test</div> < ...
- 从jQuery的缓存到事件监听
不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery*********属性. <DIV id=d1 jQuery1294122065250=&q ...
- 读jQuery源码 jQuery.data
var rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/, rmultiDash = /([A-Z])/g; function internalData( elem, n ...
- angluar1+ionic详情页返回在原来的位置(缓存数据和页面高度)
因为是老项目,近期开发遇到了个需求就是从详情页按返回按钮要求返回到原来列表的页面位置,刚开始准备用的cache:true,但是存在大大的问题就是新增和编辑后返回数据都不是最新的,无法重新刷新页面rel ...
- redis哈希缓存数据表
redis哈希缓存数据表 REDIS HASH可以用来缓存数据表的数据,以后可以从REDIS内存数据库中读取数据. 从内存中取数,无疑是很快的. var FRedis: IRedisClient; F ...
- APP缓存数据线程安全问题
问题 一般一个 iOS APP 做的事就是:请求数据->保存数据->展示数据,一般用 Sqlite 作为持久存储层,保存从网络拉取的数据,下次读取可以直接从 Sqlite DB 读取.我们 ...
- 除了用作缓存数据,Redis还可以做这些
Redis应该说是目前最受欢迎的NoSQL数据库之一了.Redis通常被作为缓存组件,用作缓存数据.不过,除了可以缓存数据,其实Redis可以做的事还有很多.下面列举几例,供大家参考. 1.最新列表 ...
- 【C#】缓存数据
namespace WpfCopy.Controls { public class CacheFileEventArgs : EventArgs { public bool IsFaulted { g ...
- 【转】数据存储——APP 缓存数据线程安全问题探讨
http://blog.cnbang.net/tech/3262/ 问题 一般一个 iOS APP 做的事就是:请求数据->保存数据->展示数据,一般用 Sqlite 作为持久存储层,保存 ...
随机推荐
- VB 十六进制转汉字的函数
Public Function HexToStr(ByVal strs As String) As String Dim i As Integer, tmp As String, n If Len(s ...
- 客户也可以申请它使用的最后一个IP地址。如果该客户所在的网络中此IP仍然可用,服务器就可以准许该申请。
http://baike.baidu.com/item/IP地址 公有地址 公有地址(Public address)由Inter NIC(Internet Network Information Ce ...
- Python开发【第六章】:面向对象
编程范式 编程是程序员用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程,一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条条大路通罗马,实现一个任务的方式有很多种 ...
- 错误0x80070522:客户端没有所需的特权
win10或win7 C盘复制文件等遇到"错误0x80070522:客户端没有所需的特权" 在运行中输入 icacls c:\ /setintegritylevel M
- 细数Python中的数据类型以及他们的方法
一.数据类型的种类及主要功能 1.数字类型 数字类型主要是用来计算,它分为整数类型int和浮点类型float 2.布尔类型 布尔类型主要是用于判断,它分为真True和False两种 3.字符串类型 字 ...
- 快压、360压缩、WinRAR关于打开快压通过超高压缩比压缩后的文件不兼容的问题
今天接收了同事发过来的一个压缩文件,用360压缩打开和用WinRAR打开压缩文件,傻眼了,这发的是什么鬼压缩包.压缩包的文件大小有27533KB,用360压缩工具解压查看只有121.5kb,而且完全没 ...
- swift 值得学习的项目
http://www.php100.com/html/it/biancheng/2015/0112/8329.html
- sql 基础查询集锦
授权 GRANT All ON *.* TO 'root'@'localhost' IDENTIFIED BY PASSWORD '*6BB4837EB74329105EE4568DDA7DC67ED ...
- 浅谈HTML文档模式
不知道爱多想的你有没有在编写HTML代码时思考过 <!DOCTYPE html> 或是这一长串看都看不懂的 <!DOCTYPE HTML PUBLIC "-//W3C//D ...
- 剑指offer(第2版)刷题 Python版汇总
剑指offer面试题内容 第2章 面试需要的基础知识 面试题1:赋值运算符函数 面试题2:实现Singleton模式 解答 面试题3:数组中重复的数字 解答 面试题4:二维数组中的查找 解答 面试题 ...