您好,欢迎访问一九零五行业门户网

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'))  // 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('<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源码之回调函数的解析
jquery源码的核心内容
以上就是jquery源码之数据缓冲的学习的详细内容。
其它类似信息

推荐信息