4-4 jQuery缓存的设计思路
本节编程练习不计算学习进度,请电脑登录imooc.com操作

jQuery缓存的设计思路

jQuery缓存设计接口对数据的处理有如下几种:

用name和value为对象附加数据
一个对象为对象附加数据
为 DOM Element 附加数据

设计的思路:(请参考右边代码)

常规的数据缓存,我们都大多为了方便直接就绑定到了dom对应的元素上了,最为常见的就是事件对象的回调函数了,还有一些DOM的属性。当然这也不是不可以,jQuery早期就是这么干的,但是容易引发循环引用,也会带来一定的全局污染的问题。那么jQuery在之后的改进就独立出了一个”数据缓存“的模块。

其核心的关键就是:

数据存放在内存中,通过一个映射关系与直接的DOM元素发生关联

数据缓存,jQuery现在支持两种:

1. dom元素,数据存储在jQuery.cache中。
2. 普通js对象,数据存储在该对象中。

首先先要在内存中开辟一个区域,用来保存数据,jQuery用cache对象{},那么所有的数据无法就是针对cache的CURD操作了。

1:如果是DOM元素,通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来,关联id被附加到以jQuery.expando的值命名的属性上,数据存储在全局缓存对象jQuery.cache中。在读取、设置、移除数据时,将通过关联id从全局缓存对象jQuery.cache中找到关联的数据缓存对象,然后在数据缓存对象上执行读取、设置、移除操作。

2:如果是Javascript对象,数据则直接存储在该Javascript对象的属性jQuery.expando上。在读取、设置、移除数据时,实际上是对Javascript对象的数据缓存对象执行读取、设置、移除操作。

3:为了避免jQuery内部使用的数据和用户自定义的数据发生冲突,数据缓存模块把内部数据存储在数据缓存对象上,把自定义数据存储在数据缓存对象的属性data上。

所以jQuery在数据缓存的处理抽出一个Data类出来,通过2组不同的实例,分别处理不同的处理类型:

var data_priv = new Data();
var data_user = new Data();

一个是给jQuery内部只用,比如数据对象,queue,Deferred,事件,动画缓存

另一个对象data_user是提供给开发者使用的,比如$.attr(),$.data等等.

任务

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. <script src="http://img1.sycdn.imooc.com//down/541f6ff70001a0a500000000.js" type="text/javascript"></script>
  7. <title></title>
  8. </head>
  9. <body>
  10.  
  11. <div>缓存支持的参数</div>
  12. <script type="text/javascript">
  13. //1
  14. var obj = {};
  15. $.data(obj, 'name', 'aaron');
  16. show($.data(obj, 'name'))
  17.  
  18. //2
  19. var obj = {};
  20. $.data(obj, {
  21. name1: 'aaron1'
  22. });
  23. show($.data(obj))
  24.  
  25. //3
  26. var $body = $("body")
  27. $body.data("foo", 52);
  28. show($body.data('foo'))
  29.  
  30. </script>
  31. </body>
  32. </html>
下一节