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等等.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://img1.sycdn.imooc.com//down/541f6ff70001a0a500000000.js" type="text/javascript"></script> <title></title> </head> <body> <div>缓存支持的参数</div> <script type="text/javascript"> //1 var obj = {}; $.data(obj, 'name', 'aaron'); show($.data(obj, 'name')) //2 var obj = {}; $.data(obj, { name1: 'aaron1' }); show($.data(obj)) //3 var $body = $("body") $body.data("foo", 52); show($body.data('foo')) </script> </body> </html>