第十七课：js数据缓存系统的原理

这一章主要讲的是jQuery的缓存系统的历史发展，以及他自己的框架的缓存系统的实现。都是源码解析。

我就挑几个重点讲下：

 

（1）jQuery的缓存机制的原理

jQuery的缓存机制实现的原理是在元素中添加自定义属性，然后把这个自定义属性赋值为uid，而这个uid就在jQuery的cache对象中的一个属性（唯一的），这个唯一的属性其实是一个对象，这个对象里面存储的就是你给这个元素添加的数据。

举个例子：

<input id="chaojidan" name="chaojidan" >

<input id="chaojidan1" name="chaojidan1" >

$("#chaojidan").data({name:"chaojidan",age:"25"});

执行这个语句后，

<input id="chaojidan" name="chaojidan"  自定义属性(jQuery版本+随机数) = uid(1，一个从0开始累加的整数)>

在jQuery中，$.cache = {1: { name:"chaojidan",age:"25"  }}

当给第二个input添加数据时，

$("#chaojidan1").data({name:"chaojidan1",age:"26"});

执行这个语句后，

<input id="chaojidan1" name="chaojidan1"  自定义属性(jQuery版本+随机数) = uid(2，一个从0开始累加的整数)>

在jQuery中，$.cache = {　　1: { name:"chaojidan",age:"25"  }, 2: { name:"chaojidan1",age:"26"  }}

取数据时，会先在元素中查找自定义属性的值（uid），然后再去$.cache对象中查找uid，得到之前存储的数据，最后通过需要取得什么数据的key值，返回value值。

 

（2）兼容性问题

在旧版本IE中，元素节点（object，embed，applet）只是COM的包装，一旦引入资源后，它就会变成那种资源的实例。一旦这资源是由VB等语言编写，由于VM有严格的访问控制，不能随便给对象添加新属性和方法，就会出现无法使用jQuery缓存系统。

HTML5新增了一种data-*的缓存机制，当用户在元素上设置了data-开头的属性时，它们的值会保存在元素节点的dataset对象上。但是它只支持字符串（以防循环引用）。

这里我说下循环引用的实例：

input.moneySet = { fangzi:"shenzhen",ele:input}

元素节点input有一个自定义属性是moneySet,它的值是一个对象，如果是一个字符串，永远都不会循环引用。由于是一个对象，对象中有一个ele属性，这个属性刚好又指向input元素。这时就出现了循环引用的状态。

 

（3）新一代的jQuery缓存机制实现原理

它是通过对valueOf方法重写，并通过Object.defineProperty方法操作实现的，这套缓存系统不支持IE8以及以下版本浏览器。

实现原理：对每一个实例（调用jQuery缓存系统中data方法的任何东西），调用valueOf方法，并传入jQuery中的Data类，如果返回object,就证明valueOf方法没重写，我们就通过Object.defineProperty重写它的valueOf方法。如果返回string，则已经被重写了，就不用再次重写。

Object.defineProperty(目标对象，要定义的属性或者方法名，目标属性所拥有的特性)

Object.defineProperty(目标对象，"valueOf"，{ 　　value:function(){ return value1}　//writable    ,configurable, enumerable内部属性　)，这句代码的意思就是，目标元素的valueOf方法被重写了，它的valueOf方法的值是value1，同时还可以设置valueOf是否可以被遍历，被重写，被重新定义。默认情况下是不能的。如果你在里面写了writable:true，那么目标对象的valueOf就是可重写的。

 以上方法，还有内部属性，在js高级程序设计里面有详解。但是实际项目中用的比较少，作为了解就行。如果是开发移动端，还是推荐去精读的。

（4）ECMAScript6新特性创建的缓存系统

之前的缓存系统都是通过唯一的一个ID，来建立目标对象（元素节点）与缓存体（缓存系统Cache）之间的连接。而ES6中有一个新的集合对象WeakMap。

WeakMap是个什么样的对象呢，平时，我们的js对象，键名name只能是字符串，键值key任意。我们可以通过for in循环遍历它的所有键值对。而WeakMap的键名name只能为一个非null的对象，键值key任意。我们无法通过for in循环遍历它里面的键值对，读写或删除只能对它暴露的接口进行。它目前只有四个方法：set,get,has,delete。

举个例子：

var map = new WeakMap();

el = document.body;

map.set(el,{data:{}});  //设置键值对

var value = map.get(el);   //读取目标值

console.log(value)     //{data:{}}

console.log(map.has(el))   //是否有此键名name，这里是true

map.delete(el)    //删除键值对。如果作为键名的对象el被删除，那么它对应的缓存体（el:{data:{}}）会自动被清除出WeakMap对象。

因此通过此对象很容易实现缓存系统。大家都知道，我们的目标元素不过是元素节点，document对象，window对象，完全可以做为WeakMap的键名。我们可以把缓存仓库改成一个WeakMap实例。我们不再需要用唯一的id来作为桥梁关联两者。只需要map.set方法就可以建立关联了。判定目标元素是否关联着缓存体，只需要用map.has方法。删除缓存体用map.delete就可以了。非常方便。但是兼容性就不容乐观了。

这是新技术，了解就行。

 

总结：

数据缓存其实就是在目标元素与缓存体之间建立一对一的关系，然后在缓存体上操作数据。

 

 

 

加油！