jQuery2.x源码解析(缓存篇)

jQuery2.x源码解析(构建篇) 

jQuery2.x源码解析(设计篇) 

jQuery2.x源码解析(回调篇) 

jQuery2.x源码解析(缓存篇) 

 

缓存是jQuery中的又一核心设计,jQuery自身的很多东西都依赖于缓存,比如事件、一些中间变量、动画等。同时他还为用户提供接口了使用缓存的接口,方便用户在元素节点上保存自己的数据,并且帮助用户解决直接把数据保存到DOM元素是可能引起的内存泄漏、命名冲突等问题。

同时,html5提出了一种通过属性缓存元素数据的功能,就是data-*属性,他可以以字符串的形式保存数据,并且不会和元素固有属性冲突。jQuery的缓存提供了访问data-*的接口,与html5标准结合更加紧密,更加规范。


提问:jQuery不同版本的缓存实现原理是什么?

答:jQuery1.x与jQuery2.x、jQuery3.x是不同的。

jQuery1.x系列中,需要兼容ie6、ie7等早期的浏览器,在ie6、ie7这样的浏览器中,根据艾伦的博客,我们可以知道DOM元素与js对象相互引用,是会引起浏览器的内存泄漏问题。所以jQuery1.x中,最大的问题是要防止在ie6、ie7浏览器上出现内存泄漏。为了避免DOM元素与js对象相互引用而造成的内存泄漏,jQuery必须从设计解决对象循环引用的问题。所以jQuery1.x将需要缓存到元素上的数据,统一保存到了一个公共存储对象(jQuery.cache)中,jQuery.cache中的数据和缓存持有者之间再通过一uid关联起来。这个uid是从1开始自增的一个数,同时再生成一个key(jQuery.expando)将这个uid保存在缓存所有者对象上。这样元素对象就不会直接引用缓存的对象了,从而不会出现因循环引用而引起的内存泄漏。

而jQuery2.x、jQuery3.x中,因为不需要考虑ie6、ie7浏览器,因而不再为内存泄漏问题担心,所以设计上做出了调整,放弃了将缓存数据保存到jQuery.cache的设计,代替为使用生存一个唯一key,并创建一个json,将这个json以这个唯一key直接保存到缓存持有者中

此外,一个和jQuery很相似的库——zepto,也提供了缓存系统。它是用html5的data-*属性,将用户缓存的对象序列化为字符串保存到data-*上面的,但是这样做的缺点是类型转换,无法保存function和object对象。相比之下,jQuery的缓存机制就没有这种缺陷。


提问:jQuery1.x的缓存已经设计的很好了,jQuery2.x(3.x)为什么要重新设计呢?

答:jQuery1.x的缓存设计同样存在内存泄漏的问题,主要是jQuery.cache是全局变量,所以jQuery.cache里面的引用的变量,如果引用不被解除,是不会被回收的。虽然缓存的变量不会像DOM对象那么占用内存空间,但是这种浪费同样是程序的一个隐患点。因此,必须在DOM对象对象被从文档移除的时候,再通过jQuery的API将jQuery.cache里面的缓存也会收掉。这样就会给jQuery的DOM操作API实现上增加了难度,每一个涉及到去除的节点对象的API都需要做去除缓存处理,导致了如html、replaceWith、empty等API设计变得更加复杂、执行效率也下降了。而且jQuery也无法保证,用户使用jQuery的API给元素对象设置了缓存后,还会使用jQuery的API将其移除,而不是其他方式。因为,将jQuery的API和原生DOM的API掺杂使用是经常发生的事情,jQuery1.x无法保证这种情况下不能发生内存泄漏问题,如:

var div = $("<div>");



//创建一个span,放入div中,并且给span一个缓存数据{"data": "test"}var span = $("<span>");

span.data("data", "test");

div.append(span);



//清空div里面的元素,将span回收

span = null;

div[0].innerHTML = "";      //直接使用innerHTML,会造成$.cache里面的{"data": "test"}未被清除,造成内存泄漏//div.html("");                  //如果使用jQuery的html,会清除$.cache里面的{"data": "test"}

所以jQuery2.x不在采用jQuery1.x的jQuery.cache,而是采用了更加简单的设计。

由于笔者查看的是jQuery2.2-stable版源码,所以以下源码分析如不指明版本,都是指jQuery2.x版本。


提问:jQuery的缓存实现的主要有哪些部分?

答:jQuery缓存相关的主要部分及API如下:

名称

对外暴露 

作用

Data

一个缓存的操作接口类,所有缓存操作都是通过Data的实例完成的,Data实例会自动为缓存所属对象创建保存缓存的json对象。

每个Date的实例会生成一个uid,我们称之为expando,并且会将这个expando的值为缓存对象的集合在缓存持有者上面命名,这样即使同一个对象,不同Data实例为之保存的数据是不会冲突的

dataPriv

一个Data实例,保存jQuery内部的数据,如果jQuery的事件、动画等数据都由这个访问器保存和获取

dataUser

一个Data实例,保存用户通过jQuery的API存储的数据

jQuery.expando

jQuery自身的id,理论上每个jQuery的expando都不一样,用于生成访问器Data实例的expando

jQuery.hasData

判断DOM元素对象、js对象是否有缓存数据(包括通过dataPriv缓存和dataUser缓存)

jQuery.data

直接调用dataUser的access

jQuery.removeData

直接调用dataUser的removeData

jQuery._data

直接调用dataPriv的access

jQuery._removeDat

直接调用dataPriv的removeData

acceptData

判断对象能不能有缓存,jQuery认为只有普通对象和元素节点需要缓存数据,非元素(Element)和document外DOM元素,都不能缓存数据

jQuery.fn.data

先获取元素的html5的data-*里面的数据,如果没有再调用dataUser

jQuery.fn.removeData

循环调用dataUser.remove方法,删除key对应的缓存数据

jQuery缓存部分的核心的就是缓存操作接口Data类,这是所有jQuery缓存操作的底层实现。这个类有两个实例——dataPriv和dataUser。dataPriv是供jQuery自身使用,dataUser是供用户缓存数据使用。对外,jQuery暴露的API中,最核心的两个就是jQuery.data和jQuery.fn.data,前者操作普通js对象和DOM对象(jQuery仅支持元素对象),后者操作jQuery对象。


提问:expando的生成算法是什么?

答:我们先看jQuery.expando:

jQuery.extend( {
    // Unique for each copy of jQuery on the page
    expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
}

生成jQuery.expando的算法包含了jQuery的版本和随机数,这样尽可能地保证了同一window下的多个jQuery实例不会冲突。

再看访问器Data的构造函数:

function Data() {
    this.expando = jQuery.expando + Data.uid++;
}

Data中有一个公有属性——uid,每创建一个Data实例的时候,都会给这个uid加一,并且通过这个uid和jQuery.expando一同生成Data实例的expando。这样最大限度的保证了一个页面中多个jQuery实例各自的多个Data实例彼此也不会冲突。


提问:Data是如何工作的?

答:Data的主要功能包括如下:

1.给指定对象创建一个保存缓存的Object对象,并将这个map对象用Data.expando作为key赋值到这个指定对象中。并通过acceptData,对于非元素类型和document的DOM对象,Data实例是不会为其缓存数据的。

function acceptData( owner ) {
    // Accepts only:
    //  - Node
    //    - Node.ELEMENT_NODE
    //    - Node.DOCUMENT_NODE
    //  - Object
    //    - Any
    return owner.nodeType === 1 || owner.nodeType === 9 || !( +owner.nodeType );
}

2.提供了get、set等对key、value操作的API,并且通过了重载setter和getter的access。需要注意的是,一些浏览不支持删除DOM对象的成员变量,所以jQuery使用赋值undefined来代替delete操作

// Remove the expando if there's no more data
if ( key === undefined || jQuery.isEmptyObject( cache ) ) {

    // Support: Chrome <= 35-45+
    // Webkit & Blink performance suffers when deleting properties
    // from DOM nodes, so set to undefined instead
    // https://code.google.com/p/chromium/issues/detail?id=378607
    if ( owner.nodeType ) {
        owner[ this.expando ] = undefined;
    } else {
        delete owner[ this.expando ];
    }
}

提问:jQuery的Data已经做了冲突处理,那我们在使用jQuery时候,需要再考虑缓存冲突的情况吗?

答:答案是需要的,因为我们不能自己创建Data实例,用户能够使用缓存都只能由dataUser这个Data实例执行,所以jQuery的Data防冲突机制仅是给jQuery内部用的,我们无法享用。所以我们在使用jQuery的jQuery.data和jQuery.fn.data接口时,是需要自己做防止冲突的处理的。尤其是对于开发jQuery插件的时候,不希望插件的缓存与插件的使用者的缓存key冲突,所以必须要加命名空间,笔记建议用插件在jQuery的名称做前缀,如:

(function ($, global, undefined) {
    $.fn.extend({
        myPlugin : function (option) {
            return this.each(function () {
                
                //开发插件时候,如果要用data保存数据,原有key前面要加上控件的名字,以防止冲突
                $(this).data("myPlugin:key",pluginData);
            })
        }
    })
})(jQuery,window)

提问:jQuery.data和jQuery.fn.data具体有什么区别?

答:他们是不同维度的两个API,一个操作的是jQuery对象,一个是js对象(Object和DOM对象),具体的用法为:

//jQuery.fn.data:
$(object).data(cacheKey,cacheValue)        //会在object对象上创建dataUser.expando

//jQuery.data:
$.data(object, cacheKey, cacheValue)        //会在object对象上创建dataUser.expando

上述代码,两者的作用基本相同,但是还是存在区别:

1.jQuery.fn.data除了会查询通过dataUser缓存的对象外,还会访问html5的data-*数据,但只能读,不能修改。优先级为:如果指定key在dataUser存在数据,会优先返回dataUser的数据,否则才会查看属性为data-*中对应key的数据。同时,为了和html5的data-*缓存方式相互匹配,Data会自动将“x-x-x”这种key形式转换为“xXX”这种驼峰命名形式。而这些功能仅jQuery.fn.data有,jQuery.data是没有的。

2.jQuery.fn.data做赋值操作时候,会遍历jQuery对象封装的所有js对象(element对象),为其赋值,而jQuery.data仅能对单个对象使用。同时jQuery.fn.data符合jQuery的链式操作,返回jQuery对象,而jQuery.data则是赋值的值。

需要注意的是,使用jQuery.data函数时候,不应该用jQuery对象做参数,如下:

$.data($(object), cacheKey, cacheValue)        //会在$(object)对象上创建dataUser.expando,这样调用是错误的

dataUser.expando会被创建在$(object)这个对象上,而不是object对象,以后再调用$.data($(object), cacheKey)是取不出缓存的,这是我们不希望的。造成这个现象的原因是两次$(object)不是同一个对象,但是缓存实际操作中大多数都是无法保证可以使用同一jQuery对象,因此要避免这么使用。


提问:那么使用这两个接口设置的数据,能相互访问吗?

答:答案当然是肯定的,因为两个api最终都是通过dataUser这个Data实例去访问object对象的缓存,所以肯定是可以相关访问的。

var div = $("<div>");


div.data("a", "a");

$.data(div[0], "b", "b");


console.log(div.data("b"))   //结果b
console.log($.data(div[0],"a"))   //结果a

但是如果key是x-x-x这种形式,jQuery.fn.data会自动转为驼峰命名发,而jQuery.data不会:

var div = $("<div>");

div.data("x-x-x", "test1");
$.data(div[0], "x-x-x", "test2");
console.log(div.data());

从上图可以看出test1的key被转为驼峰命名法,而test2却没有,这也是两者的一个区别。


提问:jQuery.hasData为什么也检查dataPriv中是否存在数据?

hasData: function( elem ) {
    return dataUser.hasData( elem ) || dataPriv.hasData( elem );
},

根据jQuery缓存的设计来讲,用户的数据都在dataUser里面,dataPriv缓存的数据应该是对用户透明的,用户不关心dataPriv是否有数据。那为什么jQuery.hasData还会去调用dataPriv的hasData呢?

答:之所以这么做,是为了和jQuery1.x在API功能上面保持兼容,因为jQuery1.x系列jQuery内部缓存和用户缓存都放到了一个对象中,而hasData的功能就是检测是否存在这个对象。jQuery2.x做了防冲突处理,缓存变成了两个对象——dataUser和dataPriv,但为了两个版本对外暴露的API尽量保持一致,所以没有重新设计jQuery.hasData的功能,而是保留了jQuery1.x的功能设计。在jQuery3.x中同样延续了这个功能定义,而不是重构为更合理的仅检测dataUser的设计方案。

API在升级的时候功能保持一致,虽然不利于API功能的优化,但是满足了里氏替换原则,方便使用者升级版本。

posted @ 2016-12-31 11:42  laden666666  阅读(1318)  评论(1编辑  收藏  举报