jQuery源码之$.data()数据缓存

attr()与prop()

$.data()或者$(selector).data()可以向元素上添加数据，类似于attr()或者prop()方法。但是attr()或者prop()方法容易形成循环引用，造成内存泄露。例如:

require(["math","jquery"],function(math,$){

    var obj={
        dom:$(".test5")[0],
        name:"div"
    };

  $(".test5").attr("name",obj);

});

模块中的代码就形成了一个循环引用。

原理分析

data()数据缓存会在元素上生成一个属性，该属性是

this.expando = jQuery.expando + Data.uid++;

是一个唯一的，属性的值为 数值：1,2,3...，jquery内部会建立一个对象cache用于缓存数据。

例如：$("#div1").data("name","myDiv")，这时，cache[1]="myDIv"

<div id="div1" jQuery2140289804814383387571="1">

由此可见，使用data()数据缓存，不会造成循环引用。

源码分析

构造函数

function Data() {
	// Support: Android<4,
	// Old WebKit does not have Object.preventExtensions/freeze method,
	// return new empty object instead with no [[set]] accessor
	Object.defineProperty( this.cache = {}, 0, {
		get: function() {
			return {};
		}
	});

	this.expando = jQuery.expando + Data.uid++;
}

Data.uid = 1;
Data.accepts = jQuery.acceptData;

Data()构造函数，函数内部定义了cache属性，cache属性用于缓存数据。Object.defineProperty()是ES5中定义的用于生成或者对象属性，这里get方法用于读取属性值，没有set方法说明该属性是只读的。jQuery.expando是jquery版本号加一个随机数，当调用data()时，会向元素添加属性expando。而Data.uid

作为键值来确定是cache中的哪个值。下面看下acceptData()

jQuery.acceptData = function( owner ) {
	// Accep