jQuery源码分析--data()数据缓存

2017-01-23

data/attr/prop使用区别

attr:jquery中attr是通过原生js的getAttribute和setAttribute方法来实现的；

/*$('#div1').attr('name','hello');		
alert( $('#div1').attr('name') );*/
document.getElementById('div1').setAttribute('name','hello');
alert( document.getElementById('div1').getAttribute('name') );

prop：是通过原生dom对象的属性直接进行设置和获取属性值得；

/*$('#div1').prop('name','hello');	
alert( $('#div1').prop('name') );*/
document.getElementById('div1')['name'] = 'hello';
alert( document.getElementById('div1')['name'] );

data:设置大量数据（例如：json）；

1 2	$('#div1').data('name','hello'); alert( $('#div1').data('name') );

内存泄漏

内存泄漏：内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。

内存泄露的几种情况

循环引用
Javascript闭包
DOM插入顺序

一个DOM对象被一个Javascript对象引用，与此同时又引用同一个或其它的Javascript对象，这个DOM对象可能会引发内存泄漏。这个DOM对象的引用将不会在脚本停止的时候被垃圾回收器回收。要想破坏循环引用，引用DOM元素的对象或DOM对象的引用需要被赋值为null。

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

第一种：多个对象循环引用

var a=new Object;

var b=new Object;

a.r=b;

b.r=a;

第二种：循环引用自己

1
2
3

var a=new Object;

a.r=a;

循环引用很常见且大部分情况下是无害的，但当参与循环引用的对象中有DOM对象或者ActiveX对象时，循环引用将导致内存泄露。

我们把例子中的任何一个new Object替换成document.getElementById或者document.createElement就会发生内存泄露了。

具体的就深入讨论了，这里的总结

JS的内存泄露，无怪乎就是从DOM中remove了元素，但是依然有变量或者对象引用了该DOM对象。然后内存中无法删除。使得浏览器的内存占用居高不下。这种内存占用，随着浏览器的刷新，会自动释放。
而另外一种情况，就是循环引用，一个DOM对象和JS对象之间互相引用，这样造成的情况更严重一些，即使刷新，内存也不会减少。这就是严格意义上说的内存泄露了。

data原理

利用cache对象间接把dom对象与数据联系到一起，这样有效的阻止了json数据和dom元素之间的循环引用导致的内存泄漏。

data源码简化版本

jQuery.extend({
	acceptData
	hasData
	data
	removeData
	_data
	_removeData
});

jQuery.fn.extend({
	data
	removeData
});
Data.prototype = {
	key
	set
	get
	access
	remove
	hasData
	discard
};

Data.prototype = {
	key: function( owner )  //分配映射的
	set: function( owner, data, value )  //设置cache
	get: function( owner, key )  //获取cache中属性
	access: function( owner, key, value ) // 
	remove: function( owner, key )  // 删除
	hasData: function( owner )  // 判断是否存在
	discard: function( owner )  // 删除

Object.preventExtensions/freeze 使对象只能获取不能修改

var obj = { name : "hello" };

Object.freeze(obj);

obj.name = 'hi';

alert( obj.name );

Object.defineProperty( obj, 0, {
	get: function() {
		return {};
	}
});
alert(obj[0]);
obj[0] = 123;
alert(obj[0]);