解析jQuery的缓存系统

前不久在研究jQuery的动画队列的时候,发现jQuery的缓存系统也很强大,尽管以前也稍微接触过,但一直都没有深入研究过。jQuery的缓存系统在外部应用的时候都比较简单,比如要将某个URL数据存到缓存中只要这么写:


    var val = "stylechen.com";
    $("div").data( "url" ); // 返回undefined
    $("div").data( "url", val ); // 返回"stylechen.com"
    $("div").data( "url" ); // 返回"stylechen.com"

不光可以存储字符串,上面的val也可以是任意数据,对象、数组、函数等都可以存到里面。仅仅实现这种功能还是挺简单的,声明一个全局对象用来存储数据,然后使用data方法来存储或返回数据:


    var cacheData = {}; // 用来存储数据的全局对象
    var data = function( key, val ){
        if( val !== undefined ){
            cacheData[key] = val;
        }

        return cacheData[key];
    };  

jQuery缓存系统的真正魅力在于其内部应用中,动画、事件等都有用到这个缓存系统。之前在写easyAnim的时候,我将动画的队列都存储到各DOM元素的自定义属性中,这样虽然可以方便的访问队列数据,但也同时带来了隐患。如果给DOM元素添加自定义的属性和过多的数据可能会引起内存泄漏,所以要尽量避免这么干。

如果是使用jQuery的缓存系统来存放DOM元素的数据,会先给该DOM元素添加一个随机生成的属性,这个属性用来存放访问缓存数据的索引值,就好比DOM元素都有一把开启缓存保险箱的钥匙,只要有了钥匙就可以随时开启缓存保险箱。将本来存放到DOM元素中的数据都转到了缓存中,而DOM元素本身只要存储一个简单的属性就可以了,这样就可以将由DOM元素引起的内存泄漏的风险规避到最小。下面是我模拟jQuery自己写的一个简单的缓存系统:


    var cacheData = {}, // 用来存储数据的全局对象
        uuid = 0,
        // 声明随机数
        expando = "cacheData" ( new Date() "" ).slice( -8 ); 

    var data = function( key, val, data ){
        if( typeof key === "string" ){
            if( val !== undefined ){
                cacheData[key] = val;
            }

            return cacheData[key];
        }
        else if( typeof key === "object" ){
            var index,
                thisCache;

            if( !key[expando] ){
                // 添加一个DOM元素的属性 
                // 随机数是属性名 索引值是属性值
                index = key[expando] = uuid;
                thisCache = cacheData[index] = {};
            }
            else{
                index = key[expando];
                thisCache = cacheData[index];
            }


            if( !thisCache[expando] ){
                thisCache[expando] = {};
            }

            if( gambling data !== undefined ){
                // 将数据存到缓存对象中
                thisCache[expando][val] = data;
            }

            // 返回DOM元素存储的数据
            return thisCache[expando][val];
        }
    };

    var removeData = function( key, val ){
        if( typeof key === "string" ){
            delete cacheData[key];
        }
        else if( typeof key === "object" ){
            if( !key[expando] ){
                return;
            }
            // 检测对象是否为空
            var isEmptyObject = function( obj ) {
                    var name;
                    for ( name in obj ) {
                        return false;
                    }
                    return true;
                },

                removeAttr = function(){
                    try{
                        // IE8及标准浏览器可以直接使用delete来删除属性
                        delete key[expando];
                    }
                    catch (e) {
                        // IE6/IE7使用removeAttribute方法来删除属性
                        key.removeAttribute(expando);
                    }
                },

                index = key[expando];

            if( val ){
                // 只删除指定的数据
                delete cacheData[index][expando][val];
                // 如果是空对象 索性全部删除
                if( isEmptyObject( cacheData[index][expando] ) ){
                    delete cacheData[index];
                    removeAttr();
                }
            }
            else{
                // 删除DOM元素存到缓存中的所有数据
                delete cacheData[index];
                removeAttr();
            }
        }
    };

上面的代码值得注意的是IE6/IE7中用delete来删除自定义的属性会报错,只能使用removeAttribute来删除,标准的浏览器都可以使用delete来删除。下面是调用的结果:


    var box = document.getElementById( "box" ),
        list = document.getElementById( "list" );

    data( box, "myName", "chen" );
    alert( data( box, "myName" ) ); // chen

    data( box, "myBlog", "stylechen.com" );
    alert( data( box, "myBlog" ) ); // stylechen.com

    removeData( box, "myBlog" );

    alert( data( box, "myBlog" ) ); // undefined
    alert( data( box, "myName" ) ); // chen
    alert( box[expando] ); // 1

    removeData( box );
    alert( box[expando] ); // undefined

当然,jQuery的缓存系统比我的这个要复杂些,不过核心原理还是一样的。easyAnim将会在后续的版本中引入这个缓存系统。

原载于:雨夜带刀"s Blog
本文链接:http://stylechen.com/cachedata.html
如需转载请以链接形式注明原载或原文地址。

Chrome 81 正式发布 !消灭混合内容最后一步~

Chrome 81 于前天正式发布了,这个版本其实最初是计划在 3 月 17 号 发布的,但由于冠状病毒(COVID-19)爆发而导致推迟到了现在。Chrome 81 的延迟也扰乱了 Google 正常的六周发布时间表。因此 Google 此前也宣布,下一个版本将直接跳过 Chrome 82 ,直接发布 Chrome 83。 下面我就来带大家看看 Chrome 81 有哪些重要的更新。

发布于:1月以前  |  122次阅读  |  详细内容 »

当浏览器全面禁用三方 Cookie

苹果公司前不久对 Safari 浏览器进行一次重大更新,这次更新完全禁用了第三方 Cookie,这意味着,默认情况下,各大广告商或网站将无法对你的个人隐私进行追踪。而微软和 Mozilla 等也纷纷采取了措施禁用第三方 Cookie,但是由于这些浏览器市场份额较小,并没有给市场带来巨大的冲击。

发布于:1月以前  |  106次阅读  |  详细内容 »

H5 直播的疯狂点赞动画是如何实现的?

直播有一个很重要的互动:点赞。 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯狂点赞 直播间的所有疯狂点赞,都需要在所有用户界面都动画展现出来(广播用户使用websocket消息)

发布于:1月以前  |  101次阅读  |  详细内容 »

探索 Serverless 中的前端开发模式

最近关于 Serverless 的讨论越来越多。看似与前端关系不大的 Serverless,其实早已和前端有了渊源,并且将对前端开发模式产生变革性的影响。本文主要就根据个人理解和总结,从前端开发模式的演进、基于 Serverless 的前端开发案例以及 Serverless 开发最佳实践等方面,与大家探讨 Serverless 中的前端开发模式。本人也有幸在 QCon2019 分享了这一主题。

发布于:1月以前  |  133次阅读  |  详细内容 »

前端需要了解的9种设计模式

设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题,毕竟这是前人无数经验总结成的最佳实践,而代码实现则是对加深理解的辅助。

发布于:1月以前  |  114次阅读  |  详细内容 »

为什么你的网页需要 CSP?

内容安全策略(CSP)是一个 HTTP Header,CSP 通过告诉浏览器一系列规则,严格规定页面中哪些资源允许有哪些来源, 不在指定范围内的统统拒绝。

发布于:1月以前  |  105次阅读  |  详细内容 »

10 种跨域解决方案(附终极方案)

嗯。又来了,又说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着你去了解底层啊,不是很简单吗。但是最近在开发一个 「vscode 插件」 发现,当你刚入门一样东西的时候,你不会想这么多,因为你对他不熟悉,当你遇到不会的东西,你就是想先找到解决方案,然后通过这个解决方案再去深入理解。

发布于:1月以前  |  171次阅读  |  详细内容 »

移动 Web 最佳实践(干货长文,建议收藏)

笔者在公司用 web 技术开发移动端应用已经有一年多的时间了,开始主要以 vue 技术栈配合 native 为主,目前演进成 vue + react native 技术架构,vue 主要负责开发 OA 业务,比如报销、出差、crm 等等,react native 主要负责即时通信部分,是在 mattermost-mobile的基础上修改的(mattermost 是一个开源的即时通讯方案)。

发布于:1月以前  |  120次阅读  |  详细内容 »

不可错过的实用前端工具

给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具,包括一些小游戏、教程、社区网站和博客,以及一些资源网站,希望可以帮助到大家!

发布于:1月以前  |  113次阅读  |  详细内容 »

理解 WebView

我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器来浏览网页。你也许正在使用其中一种浏览器阅读本文!虽然浏览器对于访问互联网内容的任务来说非常流行,它们还有一些我们从未过多关注过的竞争对手。这些竞争对手以 WebView 的形式被我们所熟知。这片文章将讲解 WebView 的神秘之处以及为什么它这么棒。

发布于:1月以前  |  117次阅读  |  详细内容 »

Facebook 前端技术栈重构分享

当我们考虑如何构建一个新的网络应用—一个为现代浏览器设计的、具有用户对Facebook(我们已知的)所有期望的功能,我们现有的技术栈无法支持我们所需要的类似于桌面应用的感觉和性能。

发布于:1月以前  |  113次阅读  |  详细内容 »

最多阅读

为Electron程序添加运行时日志 1年以前  |  4916次阅读
初探 React 组件 1年以前  |  2185次阅读
wordpress标签页的制作 1年以前  |  2072次阅读
Node.js下通过配置host访问URL 1年以前  |  2016次阅读
js动态创建类和实例化 1年以前  |  2001次阅读
500行PHP代码搞定富文本安全过滤 1年以前  |  1971次阅读
22个HTML5的初级技巧 1年以前  |  1922次阅读
使用 SRI 增强 localStorage 代码安全 1年以前  |  1913次阅读
浅谈浏览器的原生拖拽事件 1年以前  |  1883次阅读
第三版主题上线 1年以前  |  1883次阅读
CSS清除浮动 1年以前  |  1871次阅读
2014年度总结 1年以前  |  1820次阅读
【译】V8 团队眼中的 ES6、ES7及未来 1年以前  |  1812次阅读
利用服务器返回header来传输数据 1年以前  |  1804次阅读
获取元素的计算的样式 1年以前  |  1799次阅读