jQuery1.7系列二: jQuery的缓存机制
声明：写博客，是对自身知识的一种总结，也是一种分享，但由于作者本人水平有限，难免会有一些地方说得不对，还请大家友善 指出，或致电:tianzhen.chen0509@gmail.com
关注：国内开源jQuery-UI组件库:Operamasks-UI
jQuery版本:v1.7.1
jQuery系列二: 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中内存的泄露问题。我们做一下例子看一看:
Html代码- 1.<!DOCTYPE html>
- 2.<html>
- 3.<head>
- 4.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- 5.<script type="text/javascript" src="jquery-1.7.1.js"></script>
- 6.<script>
- 7. $(function(){
- 8. $test = $("#test");
- 9. $.data( $test , "c" , 20);
- 10. console.log("end");
- 11. });
- 12.</script>
- 13.</head>
- 14.<body>
- 15. <div id="test">123</div>
- 16.</body>
- 17.</html>
-
可以看到，局部缓存是直接存储在js对象上的，而且放在js对象的expando属性下边的data属性上。
二．缓存对html5的属性支持
Html5规范中新增了 data-* 这样的html元素自定义属性，它可以给页面创建者本身的脚本进行使用。举个例子:
Html代码- 1.<ol>
- 2. <li data-length="2m11s">Beyond The Sea</li>
- 3. ...
- 4.</ol>
-
为了更方便的访问这一些 data-* 属性，jQuery内部进行了特殊处理，当我们执行$(“#div1”).data(“a”);这样的代码来获取缓存值时，jQuery会尝试从全局缓 存$.cache来进行查找，如果查找不到值的话，会再尝试着查找 data-a 这样的html元素属性值，接下来我们做个实验:
Html代码- 1.<!DOCTYPE html>
- 2.<html>
- 3.<head>
- 4.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- 5.<script type="text/javascript" src="jquery-1.7.1.js"></script>
- 6.<script>
- 7. $(function(){
- 8. $test = $("#test");
- 9. console.log($test.data("alias"));//会打印出"alias"
- 10. });
- 11.</script>
- 12.</head>
- 13.<body>
- 14. <div id="test" data-alias="alias">123</div>
- 15.</body>
- 16.</html>
-
在控制台上确实打印出了“alias” ，说明找到了”alias”属性。注意，当jQuery从html元素的data-*属性找到值时，会把值复制到全局缓存$.cache中的。
三．缓存与事件
jQuery在进行缓存事件的操作时，提供了三个事件监听，分别是 getData, setData和changeData,做一个例子测试一下:
Html代码- 1.<!DOCTYPE html>
- 2.<html>
- 3.<head>
- 4.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- 5.<script type="text/javascript" src="jquery-1.7.1.js"></script>
- 6.<script>
- 7. $(function(){
- 8. $test = $("#test");
- 9. $test.bind("getData" ,function(){
- 10. console.log("getData");
- 11. })
- 12. .bind("setData" , function(){
- 13. console.log("setData");
- 14. }).bind("changeData" , function(){
- 15. console.log("changeData");
- 16. });
- 17. $test.data("name" , "xisi");//打印 "setData" "changeData"
- 18. $test.data("name");//打印"getData"
- 19. });
- 20.</script>
- 21.</head>
- 22.<body>
- 23. <div id="test">123</div>
- 24.</body>
- 25.</html>
| 
免费注册
发表于 2012-03-12 22:12
