JQuery源码解读 JQ Data函数（ 妙味讲堂

JQuery源码解读



JQ的data（ 妙味讲堂 - 视频笔记 - 第六部分）


1、
$("div").attr("name", "hello");
console.log($("div").attr("name")); //hello
=>

document.getElementsById("div").setAttribute("name","hello");
document.getElementsById("div").getAttribute("name");





2、
$("div").prop("name", "hello");

console.log($("div").prop("name")); //hello

document.getElementsById("div")["name"] = "hello"
document.getElementsById("div").getAttribute("name");





3、数据缓存（挂载大量数据）
$("div").data("name", "hello");

console.log($("div").data("name")); //hello



DOM对象与元素之间互相引用，大量浏览器会出现内存泄漏

var oDiv =  document.getElementsById("div1");

var obj = {};

oDiv.name  = obj;

obj.name = oDiv;



$("#div1").attr("name",obj);

$("#div1").data("name",obj);
可以防止DOM对象与元素的互相引用，从而避免内存泄漏。


使用cache对象保存属性值，当属性要赋值的时候直接在cache里读取数据，


function Data(){
	Object.defineProperty(this.cache = {},0,{
         get:function(){
         	return {}
         }
		})
	this.expando  = jQuery.expando+Math.random();
}


Data.prototype = {
	key:{

	}
	get:function(){

	}
	access:function(){

	}
	remove:function(){

	}
	hasData:function(){

	}
	discard:function(){

	}
}