jQuery 2.0.3 源码分析数据缓存

时间 2019-11-13

标签 jquery 2.0.3 源码分析数据缓存栏目 JQuery 繁體版

原文原文链接

历史背景：node

jQuery从1.2.3版本引入数据缓存系统，主要的缘由就是早期的事件系统 Dean Edwards 的 ddEvent.js代码 jquery

带来的问题：git

没有一个系统的缓存机制，它把事件的回调都放到EventTarget之上，这会引起循环引用
若是EventTarget是window对象，又会引起全局污染
不一样模块之间用不一样缓存变量

通常jQuery开发，咱们都喜欢便捷式的把不少属性，好比状态标志都写到dom节点中,也就是HTMLElementgithub

好处：直观，便捷数组

坏处：浏览器

循环引用
直接暴露数据，安全性？
增长一堆的自定义属性标签，对浏览器来讲是没意义的
取数据的时候要对HTML节点作操做

什么是内存泄露缓存

内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。在C++中，由于是手动管理内存，内存泄露是常常出现的事情。而如今流行的C#和Java等语言采用了自动垃圾回收方法管理内存，正常使用的状况下几乎不会发生内存泄露。浏览器中也是采用自动垃圾回收方法管理内存，但因为浏览器垃圾回收方法有bug，会产生内存泄露。安全

内存泄露的几种状况闭包

循环引用
Javascript闭包
DOM插入顺序

一个DOM对象被一个Javascript对象引用，与此同时又引用同一个或其它的Javascript对象，这个DOM对象可能会引起内存泄漏。这个DOM对象的引用将不会在脚本中止的时候被垃圾回收器回收。要想破坏循环引用，引用DOM元素的对象或DOM对象的引用须要被赋值为null。dom

含有DOM对象的循环引用将致使大部分当前主流浏览器内存泄露

第一种：多个对象循环引用

var a=new Object;

var b=new Object;

a.r=b;

b.r=a;

第二种：循环引用本身

var a=new Object;

a.r=a;

循环引用很常见且大部分状况下是无害的，但当参与循环引用的对象中有DOM对象或者ActiveX对象时，循环引用将致使内存泄露。

咱们把例子中的任何一个new Object替换成document.getElementById或者document.createElement就会发生内存泄露了。

具体的就深刻讨论了，这里的总结

JS的内存泄露，无怪乎就是从DOM中remove了元素，可是依然有变量或者对象引用了该DOM对象。而后内存中没法删除。使得浏览器的内存占用居高不下。这种内存占用，随着浏览器的刷新，会自动释放。
而另一种状况，就是循环引用，一个DOM对象和JS对象之间互相引用，这样形成的状况更严重一些，即便刷新，内存也不会减小。这就是严格意义上说的内存泄露了。

因此在平时实际应用中, 咱们常常须要给元素缓存一些数据，而且这些数据每每和DOM元素紧密相关。因为DOM元素(节点)也是对象, 因此咱们能够直接扩展DOM元素的属性，可是若是给DOM元素添加自定义的属性和过多的数据可能会引发内存泄漏，因此应该要尽可能避免这样作。所以更好的解决方法是使用一种低耦合的方式让DOM和缓存数据可以联系起来。

因此咱们必须有一种机制，抽象出这样的处理方式

jQuery引入缓存的做用

容许咱们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险
用于存储跟dom节点相关的数据，包括事件，动画等
一种低耦合的方式让DOM和缓存数据可以联系起来

jQuery缓存系统的真正魅力在于其内部应用中，动画、事件等都有用到这个缓存系统。试想若是动画的队列都存储到各DOM元素的自定义属性中，这样虽然能够方便的访问队列数据，但也同时带来了隐患。若是给DOM元素添加自定义的属性和过多的数据可能会引发内存泄漏，因此要尽可能避免这么干。

数据缓存接口

jQuery.data( element, key, value )

.data( )

对于jQuery.data方法，原文以下

The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can set several distinct values for a single element and retrieve them later:

在jQuery的官方文档中，提示用户这是一个低级的方法，应该用.data()方法来代替。$.data( element, key, value )能够对DOM元素附加任何类型的数据，但应避免循环引用而致使的内存泄漏问题

都是用来在元素上存放数据也就平时所说的数据缓存,都返回jQuery对象，可是内部的处理确有本质的区别

咱们看一组对比

<div id="aaron">Aron test</div>

var aa1=$("#aaron");
var aa2=$("#aaron");

//=======第一组=========

$(''

).data()方法

aa1.data('a',1111);
aa2.data('a',2222);

aa1.data('a')  //结果222222
aa2.data('a')  //结果222222

//=======第二组=========
$.data()方法

$.data(aa1,"b","1111")
$.data(aa2,"b","2222")

$.data(aa1,"b")   //结果111111
$.data(aa2,"b")   //结果222222

意外吗？，这样的细节之前是否注意到呢？

怎么经过.data()方法会覆盖前面key相同的值呢？

对于jQuery来讲，数据缓存系统原本就是为事件系统服务而分化出来的，到后来，它的事件克隆乃至后来的动画列队实现数据的存储都是离不开缓存系统，因此数据缓存也算是jQuery的一个核心基础了

早期jQuery的缓存系统是把全部数据都放$.cache之上，而后为每一个要使用缓存系统的元素节点，文档对象与window对象分配一个UUID

data的实现不像attr直接把数据做为属性捆绑到元素节点上，若是为DOM Element 附加数据；DOM Element 也是一种 Object ，但 IE六、IE7 对直接附加在 DOM Element 上的对象的垃圾回收存在问题；所以咱们将这些数据存放在全局缓存（咱们称之为“globalCache”）中，即 “globalCache” 包含了多个 DOM Element 的 “cache”，并在 DOM Element 上添加一个属性，存放 “cache” 对应的 uid

$().data('a') 在表现形式上，虽然是关联到dom上的，可是实际上处理就是在内存区开辟一个cache的缓存

那么JQuery内部是如何处理，各类关联状况与操做呢？

******************$(‘’).data()的实现方式********************

用name和value为对象附加数据

var obj = {};
    
    $.data(obj, 'name', 'aaron');

    $.data(obj,'name') //aaron

一个对象为对象附加数据

var obj = {};

    $.data(obj, {
        name1: 'aaron1',
        name2: 'aaron1'
    });

    $.data(obj)   //Object {name1: "aaron1", name2: "aaron1"}

为 DOM Element 附加数据

咱们用最简单的代码来阐述这个处理的流程：

1.获取节点body

var $body = $("body")

2.给body上增长一条数据，属性为foo，值为52

$body.data("foo", 52);

3.取出foo

$body.data('foo')

考虑一个问题:

一个元素在正常状况下可使用.remove()方法将其删除，并清除各自的数据。但对于本地对象而言，这是不能完全删除的，这些相关的数据一直持续到窗口对象关闭

一样，这些问题也存在于event 对象中，由于事件处理器(handlers)也是用该方法来存储的。

那么，要解决该问题最简单的方法是将数据存储到本地对象新增的一个属性之中

因此如流程二解析同样增长一个unlock标记

cache与elem 都统一块儿来

if ( elem.nodeType ) {
        cache[ id ] = dataObject;     
        elem[ expando ] = id;
    } else {
        elem[ expando ] = dataObject;
    }

**************实现解析****************

（1）先在jQuery内部建立一个cache对象{}, 来保存缓存数据。而后往须要进行缓存的DOM节点上扩展一个值为expando的属性,

function Data() {
    Object.defineProperty( this.cache = {}, 0, {
        get: function() {
            return {};
        }
    });
    this.expando = jQuery.expando + Math.random();
}

注：expando的值，用于把当前数据缓存的UUID值作一个节点的属性给写入到指定的元素上造成关联桥梁,因此，因此元素自己具备这种属性的可能性不多，因此能够忽略冲突。

（2）接着把每一个节点的dom[expando]的值都设为一个自增的变量id，保持全局惟一性。这个id的值就做为cache的key用来关联DOM节点和数据。也就是说cache[id]就取到了这个节点上的全部缓存，即id就比如是打开一个房间(DOM节点)的钥匙。而每一个元素的全部缓存都被放到了一个map映射里面，这样能够同时缓存多个数据。

Data.uid = 1;

关联起dom对象与数据缓存对象的一个索引标记，换句话说

先在dom元素上找到expando对应值，也就uid，而后经过这个uid找到数据cache对象中的内容

（3）因此cache对象结构应该像下面这样：

var cache = {
    "uid1": { // DOM节点1缓存数据，
        "name1": value1,
        "name2": value2
    },
    "uid2": { // DOM节点2缓存数据，
        "name1": value1,
        "name2": value2
    }
    // ......
};

每一个uid对应一个elem缓存数据，每一个缓存对象是能够由多个name/value(名值对)对组成的，而value是能够是任何数据类型的。

流程分解：（复杂的过滤，找重的过程去掉）

第一步：jQuery自己就是包装后的数组结构，这个不须要解析了

第二步：经过data存储数据

为了把不把数据与dom直接关联，因此会把数据存储到一个cache对象上
产生一个 unlock = Data.uid++; unlock 标记号
把unlock标记号，做为一个属性值赋予$body节点
cache缓存对象中开辟一个新的空间用于存储foo数据，this.cache[ unlock ] = {};
最后把foo数据挂到cache上,cache[ data ] = value;

第三步：经过data获取数据

从$body节点中获取到unlock标记
经过unlock在cache中取到对应的数据

流程图：

整个过程结束，其实分解后逻辑很简单的，只是要处理各类状况下，代码结构封装就显得很复杂了

如图

Body元素：expando：uid

jQuery203054840829130262140.37963378243148327: 3

数据缓存cache

uid：Object

那么jQuery.data() 与 .data() 有什么区别？

1.jQuery.data(element,[key],[value])源代码

jQuery.extend({
        acceptData: Data.accepts,
        hasData: function( elem ){},
       //直接调用 data_user.access 数据类的接口，传入的是elem整个jQuery对象
        data: function( elem, name, data ) {
            return data_user.access( elem, name, data );
        },
        ........

2.data([key],[value])

jQuery.fn.extend({
        data: function( elem, name, data ) {
            return jQuery.access( this, function( value )){
                //区别在each方法了，处理的是每个元素dom节点
                this.each(function() {
                    
                }  
            }
        }
        },
        ........

源代码从源码的简单对比就很明显的看出来

看jQuery.data(element,[key],[value])，每个element都会有本身的一个{key:value}对象保存着数据，因此新建的对象就算有key相同它也不会覆盖原来存在的对象key所对应的value，由于新对象保存是是在另外一个{key:value}对象中
$("div").data("a","aaaa") 它是把数据绑定每个匹配div节点的元素上

源码能够看出来，说到底，数据缓存就是在目标对象与缓存体间创建一对一的关系,整个Data类其实都是围绕着 thia.cache 内部的数据作增删改查的操做

整个结构一目了然！

浅显易懂的分析，让你们都可以理解其思路，可是实现代码上面确实很精妙，你们能够围绕这个思路去看，若是有须要我能够在下篇把具体的源码给写一下

jQuery 2.0.3 源码分析 数据缓存

jQuery.data( element, key, value )

.data( )

jQuery 2.0.3 源码分析数据缓存