?
????? 声明:写博客,是对自身知识的一种总结,也是一种分享,但由于作者本人水平有限,难免会有一些地方说得不对,还请大家友善? 指出,或致电:tianzhen.chen0509@gmail.com
????? 关注:国内开源jQuery-UI组件库:Operamasks-UI
????? jQuery版本:v1.7.1
?
jQuery1.7系列二:? jQuery的缓存机制
一.缓存的基本原理
?
1.??????缓存的作用
?
??????? 在前端的开发中,很多时候需要存储一些跟dom节点相关的数据,于是jQuery内部实现了一个缓存,用于存储跟dom节点相关的数据,包括事件,动画等都会用到。
?
?
2.??????缓存的类别
?
??????? jQuery中的缓存可以分为两大类别:全局缓存和局部缓存。全局缓存存储直接与dom节点相关的数据,局部缓存存储与js对象相关的数据。
?
?
3.??????两大缓存的实现原理
?
3.1??????全局缓存
?
???????? 全局缓存定义为:jQuery.cache = {} ,它就是一个普通的js对象,jQuery暴露了两个最基本的接口用来与全局缓存进行通信,分别是? jQuery.fn.data 和? jQuery.fn.removeData 。那么内部是如何实现数据与dom节点一一对应的?先看如下图:
?
???????? 当我们第一次执行$(“#div1”).data(“a”, 10)时,jQuery会为 #div1 这个dom节点添加一个属性,名字为expando的计算结果,它是具有唯一性的。然后 expando属性对应的值 id1 就是该节点在全局缓存$.cache中对应的key了,另外要注意,数据是存储在data变量中的,它表示这些数据是用户自己定义的,如果是jQuery 核心需要用到的数据,它不会放到data里边,而是直接放在“id1”这个key表示的对象下边。如下图:
以上便是全局缓存$.cache中的数据存放结构了,而暴露出来的接口不外乎就是进行添加与删除。
?
3.2??????局部缓存
?
??????? jQuery源码中说到,如果是要把数据与js对象(非HTML Node对象)进行关联,更省事的办法是直接绑定在对象上,而全局缓存的出现主要是为了处理IE中内存的泄露问题。我们做一下例子看一看:
?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script>
$(function(){
$test = $("#test");
$.data( $test , "c" , 20);
console.log("end");
});
</script>
</head>
<body>
<div id="test">123</div>
</body>
</html>
??
代码非常简单,我在console.log(“end”)给打上断点,截图如下:
?
?
??????? 可以看到,局部缓存是直接存储在js对象上的,而且放在js对象的expando属性下边的data属性上。
?
二.缓存对html5的属性支持
?
??????? Html5规范中新增了 data-*? 这样的html元素自定义属性,它可以给页面创建者本身的脚本进行使用。举个例子:
<ol> <li data-length="2m11s">Beyond The Sea</li> ... </ol>?
?
??????? 为了标识每首歌曲的长度,供用户排序歌曲时使用,可以添加data-length这样的自定义属性,它在本页面内会使用到。但是data-length 这样的属性并不适用于如使用网页爬虫这样的外部程序来使用。
?????? 为了更方便的访问这一些 data-* 属性,jQuery内部进行了特殊处理,当我们执行$(“#div1”).data(“a”);这样的代码来获取缓存值时,jQuery会尝试从全局缓 存$.cache来进行查找,如果查找不到值的话,会再尝试着查找 data-a 这样的html元素属性值,接下来我们做个实验:
?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script>
$(function(){
$test = $("#test");
console.log($test.data("alias"));//会打印出"alias"
});
</script>
</head>
<body>
<div id="test" data-alias="alias">123</div>
</body>
</html>
??
当执行后我们看下结果:
?
在控制台上确实打印出了“alias” ,说明找到了”alias”属性。注意,当jQuery从html元素的data-*属性找到值时,会把值复制到全局缓存$.cache中的。
?
三.缓存与事件
?
?????? ? jQuery在进行缓存事件的操作时,提供了三个事件监听,分别是 getData, setData和changeData,做一个例子测试一下:
?
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script> $(function(){ $test = $("#test"); $test.bind("getData" ,function(){ console.log("getData"); }) .bind("setData" , function(){ console.log("setData"); }).bind("changeData" , function(){ console.log("changeData"); }); $test.data("name" , "xisi");//打印 "setData" "changeData" $test.data("name");//打印"getData" }); </script> </head> <body> <div id="test">123</div> </body> </html>?
?
cache事件一般用得比较少,估计做一些js组件库才会用到吧。