jQuery源码之数据缓冲的学习

来源：动视网责编：小采时间：2020-11-27 19:33:59

jQuery源码之数据缓冲的学习

jQuery源码之数据缓冲的学习:这篇文章主要介绍了关于jQuery源码之数据缓冲的学习，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下内存泄漏什么事内存泄漏内存泄漏是指一块内存既不能被使用，也不能被浏览器进程所结束。浏览器中采用了自动垃圾回收管理内存了，已经是相当

推荐度：

点击下载本文 文档为doc格式

导读jQuery源码之数据缓冲的学习:这篇文章主要介绍了关于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
 }
 // ......
};

静态方法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('<li>' + info +'key->' + key + '; value->' + data[key] + '</li>')
 }
 return
 }

 if (!data) {
 return $("body").append('</br>')
 }
 if (typeof data === 'object') {
 for (var key in data) {
 $("body").append('<li>key->' + key + '; value->' + data[key] + '</li>')
 }
 } else {
 $("body").append('<li>' + data + '</li>')
 }
}

jQuery源码之数据缓冲的学习

推荐度：

点击下载本文 文档为doc格式

标签：学习代码源代码

热门焦点

jQuery源码之数据缓冲的学习

jQuery源码之数据缓冲的学习

jquery的缓冲机制

jQuery源码之数据缓冲的学习

最新推荐

猜你喜欢

热门推荐