登录  /  注册
首页 > web前端 > js教程 > 正文

jQuery源码之数据缓冲的学习

不言
发布: 2018-07-09 15:24:05
原创
1366人浏览过

这篇文章主要介绍了关于jquery源码之数据缓冲的学习,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

内存泄漏

什么事内存泄漏

内存泄漏是指一块内存既不能被使用,也不能被浏览器进程所结束。浏览器中采用了自动垃圾回收管理内存了,已经是相当不错了,但是任然存在有bug,所以会产生内存泄漏。

常见的内存泄漏的情况是:

  1. 循环引用

  2. javascript的闭包

  3. DOM插入

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

// [1]
var a = new Object();
var b = new Object();

a.r = b;
b.r = a;

// [2]
var a = new Object();
a.r = a;
// 循环引用很常见且大部分情况下是无害的,但当参与循环引用的对象中有DOM对象或者ActiveX对象时,循环引用将导致内存泄露。
登录后复制
  • 已经从DOM中remove了,但是依然存在对象或者是变量引用着该元素,导致其无法删除。这种情况可以通过刷新浏览器的方法来消除。

  • 另外一种情况,就是循环引用,一个DOM对象和JS对象之间互相引用,这样造成的情况更严重一些,即使刷新,内存也不会减少。这就是严格意义上说的内存泄露了。

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

jquery的缓冲机制就解决了这一问题。

jquery的缓冲机制

思路:

  1. 由于在dom对象上创建一些自定义属性,当其再于js对象等存在引用的时候,就会有可能导致出现内存泄漏的问题,所以,我们这里使用的jquery的缓冲机制就是再jquery上创建一个缓冲对象cache来存放我们想要再DOM中保存的数据。

  2. 但是问题又来了,我们怎么实现对DOM元素于jquery中的cache对象中的数据的映射呢?

  3. 我们首先再DOM对象上创建一个唯一性的属性,他是expando的值。而expando的值是一个字符串,'jquery'+date,基本上可以保证这个属性再不同DOM的唯一性。

  4. 接着把每个结点的dom[expando]`的值设为是一个自增长的id,保持全局的唯一性,既可以使用cache[id]`就可以获取到对应的数据了。即id就好比是打开一个房间(DOM节点)的钥匙。 而每个元素的所有缓存都被放到了一个map映射里面,这样可以同时缓存多个数据。

  5. 总之,现在DOM元素上找到expando的对应值,也就是uid。然后通过这个uid找到数据缓冲Cache对象的具体的数据。

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

2693386819-5b2863953b94d_articlex[1].png

1840065699-5b286e9a592f7_articlex[1].png

静态方法data和实例方法的区别

var ele1 = $("#aaron");
var ele2 = $("#aaron");

ele1.data('a',1111);
ele2.data('a',2222);

show('第一组,通过$().data()的方式,只取到最后一个a值,之前的被覆盖')
show(ele1.data('a'))  // 2222
show(ele2.data('a')) // 2222


show()
//=======第二组=========
show('第二组,通过$.data的方式,取到2组b值,未覆盖')
$.data(ele1,"b","1111")   // 1111
$.data(ele2,"b","2222")   // 2222

show($.data(ele1,"b"))
show($.data(ele2,"b") )



function show(data) {
    if (arguments.length == 2) {
        var info = arguments[0]
        var data = arguments[1];
        for (var key in data) {
            $("body").append('
登录后复制
  • ' + info +'key->' + key + '; value->' + data[key] + '
  • ')         }         return     }     if (!data) {         return $("body").append('')     }     if (typeof data === 'object') {         for (var key in data) {             $("body").append('
  • key->' + key + '; value->' + data[key] + '
  • ')         }     } else {         $("body").append('
  • ' + data + '
  • ')     } }

    以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

    相关推荐:

    jQuery源码之回调函数的解析

    以上就是jQuery源码之数据缓冲的学习的详细内容,更多请关注php中文网其它相关文章!

    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号