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功能的优化,但是满足了里氏替换原则,方便使用者升级版本。

jQuery2.x源码解析(缓存篇)的更多相关文章

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

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 笔者阅读了园友艾伦 Aaron的系列博客< ...

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

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 这一篇笔者主要以设计的角度探索jQuery的源代 ...

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

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 通过艾伦的博客,我们能看出,jQuery的pro ...

  4. jQuery2.x源码解析(DOM操作篇)

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) jQuery这个类库最为核心重要的功能就是DOM ...

  5. Shiro源码解析-Session篇

    上一篇Shiro源码解析-登录篇中提到了在登录验证成功后有对session的处理,但未详细分析,本文对此部分源码详细分析下. 1. 分析切入点:DefaultSecurityManger的login方 ...

  6. Shiro源码解析-登录篇

    本文以循序渐进的方式解析Shiro整个login过程的处理,读者可以边阅读本文边自己看代码来思考体会,如有问题,欢迎评论区探讨! 笔者shiro的demo源码路径:https://github.com ...

  7. 专治不会看源码的毛病--spring源码解析AOP篇

    昨天有个大牛说我啰嗦,眼光比较细碎,看不到重点.太他爷爷的有道理了!要说看人品,还是女孩子强一些.原来记得看到一个男孩子的抱怨,说怎么两人刚刚开始在一起,女孩子在心里就已经和他过完了一辈子.哥哥们,不 ...

  8. spring源码解析--事务篇(前篇)

    对于每一个JAVA程序员,spring应该是再熟悉不过的框架了,它的功能有多强大我就不多说了,既然他有这么强大的功能,是如何实现的呢?这个就需要从他的原理去了解,而最直接了解原理的方式莫过于源码.当然 ...

  9. element ui源码解析 -- input篇

    el-input是element ui中使用最频繁的组件之一了,分析其构成从四个方面入手:DOM结构,属性,样式,事件入手 DOM结构: <div> <input /> < ...

随机推荐

  1. jquery 获取Select option 选择的Text和Value

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置 获取一组radio被选中项的值:var item = $(' ...

  2. StoryBoard--看上去很美

    StoryBoard--看上去很美 介绍 StoryBoard 是苹果在 2011 年的 WWDC Session 309<Introducing Interface Builder Story ...

  3. Maven问题总结:Eclipse中项目右键菜单中点击Maven-&gt;Update Projects时JDK被重置

    Eclipse中在项目右键菜单点击->Maven->Update Projects时,JDK总是切回 1.5 如果没有在Maven中配置过JDK版本,只是在Eclipse中项目的Prope ...

  4. mod mono xsp

    Mod_Mono 是Apache的一个扩展模块,使得apache支持asp.net. 该模块传递asp.net的请求到一个额外的程序 mod-mono-server(该程序是在安装xsp的时候自动安装 ...

  5. github Mac端的使用案例

    1. 本地有一个仓库,是和网页版的github连接在一起的,平时用Terminal来控制的,怎么放在github的客户端呢? 解决办法: 1.1 点击左上角的+ 号,在弹出框中选择Add,然后choo ...

  6. iOS文件保存策略

    Where You Should Put Your App’s Files To prevent the syncing and backup processes on iOS devices fro ...

  7. strchr,wcschr 和strrchr, wcsrchr,_tcschr,_tcsrchr功能

           strchr,wcschr 和strrchr, wcsrchr,_tcschr,_tcsrchr功能 (1) char *strchr( const char *string, int ...

  8. Deep Belief Network简介

    Deep Belief Network简介 1. 多层神经网络存在的问题 常用的神经网络模型, 一般只包含输入层, 输出层和一个隐藏层: 理论上来说, 隐藏层越多, 模型的表达能力应该越强.但是, 当 ...

  9. java wait 和notify

    这几天自己学习了一下线程的知识,wait 方法使当前的线程等待,notify 方法 唤醒当前的线程的方法 th 线程在5的时候进行wait,此时主线程继续执行, 主线程执行到9的时候 唤醒 th 线程 ...

  10. 完美的js运动框架

    //完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...