数据缓存

4-1 内存泄露

1.内存泄露：指一块被分配的内存既不能使用，也不能回收，直到浏览器进程结束

2.常见内存泄露的几种情况：

①循环引用

②js闭包

③DOM插入

3. 其实绝大多数的内存泄露都不是由js引起的，浏览器的回收机制已经做的相当好了，多数的泄露都是由于与DOM交互而产生的。

4. 循环引用很常见，且大部分情况下是无害的，但当参与引用的对象中有DOM对象（document.get....）或者ActiveX对象时，循环引用将导致内存泄露

5. 在平时实际应用中，我们需要给元素缓存一些数据，并且这些数据往往和DOM元素密切相关。由于DOM元素（节点）也是对象，所以我们可以直接扩展DOM元素的属性，但是如果给DOM元素添加自定义的属性和过多的数据可能就会引起内存泄露。所以应该尽量避免这样做，即避免引用数据直接附在DOM对象上。

6. 核心的关键：

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

4-2 jQuery的缓存系统

1.jQuery的数据缓存接口：$.data(element,key,value)

  $.data(element,key,value)可以对DOM元素附加任何类型的数据，但应避免循环引用而导致的内存泄露问题。

4-3 实例与静态方法的区别

4-4 jQuery缓存的设计思路

1.jQuery缓存设计接口对数据的处理如下几种：

① 用name和value为对象附加数据

② 一个对象为对象附加数据

③ 为DOM Element附加数据

2.数据缓存，jQuery现在支持两种：

① dom元素，数据存储在jQuery.cache中

② 普通js对象，存储数据在该对象中

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

l 如果是DOM元素，通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来，关联id被附加到以jQuery.expando的值命名的属性上，数据存储在全局缓存对象jQuery.cache中。

l 如果是js对象，数据则直接存储在该js对象的属性jQuery.expando上。

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

所以jQuery在数据缓存的处理抽出一个Data类出来，如下：

var data_priv = new Data();  //给jQuery内部使用，比如数据对象，queue，事件

var data_user = new Data();  //提供给开发者使用，比如$.attr(),$.data等等

4-5 Data类的设计

1. jQuery.cache对象结构如下：

var cache = {

“uid1”:{   //DOM节点1缓存数据

“name1”:value1,

“name2”:value2

},

“uid2”:{   //DOM节点2缓存数据

“name1”:value1,

“name2”:value2

}

........

};

4-6 实例方法的设计

1.jQuery还对参数的传递类型抽出了一个处理的方法jQuery.access,我们可以传递字符串、数组、对象等等，根据这种类型自动分解接口所有能接受的参数。

 

4-7 静态接口设计

1.通过源码可见，静态方法是直接操作数据类的data_user.access方法

 

实例方法与静态方法总结

1. $.data(element,[key],[value]),每个element都会有自己的一个{key：value}对象保存着数据，所以新建的对象就算有key相同，也不会覆盖原来存在的对象key所对应的value，因为新对象保存是在另一个{key：value}对象中

2. $(“div”).data(“a”,”aaa”)是把数据绑定在每一个匹配div节点的元素上