• 第十七课: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就可以了。非常方便。但是兼容性就不容乐观了。

    这是新技术,了解就行。

    总结:

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

    加油!

  • 相关阅读:
    Day 18
    Day 17
    Day 16
    Day 15
    Day 14
    Day 13
    Day 12
    Day 11
    Day 10
    《ES6标准入门》(阮一峰)--2.let 和 const 命令
  • 原文地址:https://www.cnblogs.com/chaojidan/p/4151456.html
Copyright © 2020-2023  润新知