原创投稿
广告
广告
广告 广告 广告 广告
广告
广告 国内BGP机房32G内存299元 网站收录排名问题解决 【超牛】搜外友链平台 站长在线扒站工具【免费】 【免费】站长开发工具箱 【推荐】站长自动外链工具 广告位联系QQ：253000106 独立服务器100M/不限/免备 2核2G服务器新用户低至68元/年 虚拟资源平台,轻松变现 10000来路IP只需8元 站群系统程序-专注SEO站群 黑帽SEO论坛_黑帽聚集地 企业HTTP代理IP服务提供商 软文推广，在线获客【定制】 站群服务器99元起 SEO免费工具分享 外推代发包收录 【国内国际】短信推广，免费测试 实力产品收量 外链代发 5分一条 快速排名 █一解决“收录、排名”问题一█ ●●●优质搜狗泛收录域名●●● AI数字人直播系统源码 百度SEO排名7-15天上首页
  1. 创想鸟首页
  2. 站长之家
  3. 编程技术

jQuery源码之数据缓冲的学习

PHP中文网 • • 编程技术 • 阅读 2

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

内存泄漏

什么事内存泄漏

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

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

循环引用

javascript的闭包

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的缓冲机制

思路：

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

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

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

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

总之，现在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'))  // 2222show(ele2.data('a')) // 2222show()//=======第二组=========show('第二组,通过$.data的方式,取到2组b值，未覆盖')$.data(ele1,"b","1111")   // 1111$.data(ele2,"b","2222")   // 2222show($.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源码之数据缓冲的学习的详细内容，更多请关注【创想鸟】其它相关文章！

    版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。

    发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2746679.html

    赞 (0)
    0 0

    关于作者

    PHP中文网的头像

    PHP中文网签约作者

    430.9K 文章
    0 评论
    1 粉丝
    php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台！
    上一篇 2025年3月8日 04:11:25
    下一篇 2025年3月8日 04:11:35

    AD推荐 黄金广告位招租... 更多推荐

    相关推荐

    发表回复

    登录后才能评论

    请登录

    您还未登录，请登录后再进行相关操作！

    登录 注册