jquery源码解析：jQuery数据缓存机制详解1

jQuery中有三种添加数据的方法，$().attr(),$().prop(),$().data()。但是前面两种是用来在元素上添加属性值的，只适合少量的数据，比如：title，class，name等。对于json这种数据量大的，就适合用data方法来添加，而data方法就是jQuery缓存机制最重要的方法。

jQuery中为什么要用缓存机制系统呢？因为DOM元素与js对象之间互相引用，在大部分浏览器下会引起内存泄漏。为了解决这个问题，jQuery就写了一个缓存机制系统。举个例子：

var div = document.getElementById("div1");

var obj = {};

div.name = obj;

obj.age = div;

以上代码，div元素引用js对象obj，obj引用了div元素，互相引用，导致内存泄漏。

$().attr(),$().prop()这两个方法，在元素上挂载js对象时就有可能出现互相引用的问题。比如：$("#div1").attr(name,obj) ,obj引用div1元素，如果挂载字符串或者数字就不会出现互相引用的问题。但是data方法不管挂载什么都不会出现这种情况。

data的原理：

当调用$("#div1").data("name",obj)时，会在元素div上添加一个自定义属性xxx，它的值是jQuery中一个累加的唯一值，这里是1，然后再jQuery的全局变量cache对象添加1这个属性，它的属性值是一个json，这个json对象中就会有name属性，属性值就是obj对象。当你调用$("body").data("age",obj)时，会在body元素中添加xxx属性，它的值是2，然后在cache对象中添加2这个属性，它的属性值也是一个json，这个json中就会有age这个属性，属性值就是obj。

从以上可以看出，cache中存储的name，age，以及它们的值，跟元素没有直接关系，所以不存在互相引用的现象，它们是通过一个自定义属性和自定义属性值（jQuery中唯一的number值，元素上挂载number不会出现互相引用的结果）进行关联的。接下来，我们先来看一下jQuery的缓存系统如何使用：

实例方法使用的方式：

$("#div1").data("name","hello");   //给元素div设置name数据值

$("#div1").data("name");    //取元素div设置的name值

$("#div1").removeData("name");    //删除元素div的name数据值

静态方法使用的方式：

$.data(document.body,"age",30);  //给元素body设置age数据值

$.data(document.body,"age");  //取元素body设置的age值

$.removeData(document.body,"age");  //删除元素body的age数据值

$.hasData(document.body,"age");  //元素body是否设置了age数据值

 最后我们来看一下源码，jQuery的缓存系统，其实就是使用Date这个对象实现的：

function Data() {
　　Object.defineProperty( this.cache = {}, 0, {  //此方法是操作js对象内部属性的
　　　　get: function() {      //给cache对象添加了一个0属性，它的属性值无法被修改
　　　　　　return {};
　　　　}
　　});

　　//我们先来解释一下这个方法的作用，比如：var obj = {name : "hello"};obj.name = "chaojidan";这里是可以修改obj.name属性值的。但是如果我们在obj.name = "chaojidan"之前添加这一行代码Object.freeze(obj)，这时obj.name还是"hello"，不会改变成"chajidan"。这里的Object.defineProperty方法跟Object.freeze方法的效果是一样的。举个例子：var obj = {name : "hello"};Object.defineProperty(obj,0,{get: function() { return {};} }   ),
此方法接收三个参数，第一个参数就是我们要设置的对象obj，第二个参数是属性名，也就是我们在obj对象中添加了0这个属性，第三个参数就是0属性的属性值。因此这时obj = { name:"hello", 0:{ get:function(){ return {};} }  };，然后你再obj[0] = 123; 这时obj[0]不会改变成123，而是get方法返回的值{}（因为0属性值json对象中只有get方法，没有set方法，get方法用来获取，set方法用来设置。如果有set方法，就可以设置obj[0]的值了）。

　　this.expando = jQuery.expando + Math.random();  //唯一的一个标识，就是当你在元素节点上添加数据时，会在元素节点上添加自定义属性，这个自定义属性的名字就是this.expando的值。
}

Data.uid = 1;//就是一个累加的数字，也就是cache对象这边的唯一属性名。第二个元素添加数据时，它在cache对象中的属性名就是2，而第一元素的属性名就是1，第三个元素的属性名就是3....

Data.accepts = function( owner ) {   //如果是元素节点，元素必须是Element或者Document，其他元素节点都不能添加数据到cache对象中
　　return owner.nodeType ?owner.nodeType === 1 || owner.nodeType === 9 : true;
};

Data.prototype = {
　　key: function( owner ) {  //分配映射，让某元素和cache对象中的属性对象一一对应
　　　　if ( !Data.accepts( owner ) ) {   //判断此元素是否能够把数据添加到cache中，如果能够添加，就会执行后面的代码，返回一个唯一的累加的数字，就是上面的Data.uid++。如果不能添加，就直接返回0。而这个0属性是不能设置数据的，只能获取。
　　　　　　return 0;
　　　　}

　　　　var descriptor = {},
　　　　　　unlock = owner[ this.expando ];  

　　　　if ( !unlock ) {   //如果此元素节点之前没有设置这个自定义属性值，就进入if语句设置
　　　　　　unlock = Data.uid++;  //分配一个唯一的number值也就是ID。

　　　　　　try {   
　　　　　　　　descriptor[ this.expando ] = { value: unlock };   //descriptor  = {this.expando :{value:Data.uid++}}
　　　　　　　　Object.defineProperties( owner, descriptor );//此方法的意思是，对descriptor对象中的每个属性进行defineProperty操作。这个代码可以写成Object.defineProperty( owner, this.expando,{value:Data.uid++});在owner这个元素节点上添加this.expando属性名（自定义属性），它的值是value的属性值Data.uid++（也就是唯一的一个number值），并且这个属性值无法被修改，只能获得。有些浏览器不支持这个方法，所以就catch

　　　　　　} catch ( e ) {
　　　　　　　　descriptor[ this.expando ] = unlock;  //descriptor = {this.expando:ID}
　　　　　　　　jQuery.extend( owner, descriptor );//给元素节点添加这个自定义属性this.expando，并且设置值为ID。也就是元素上会添加一个这样的属性this.expando（自定义属性） = Data.uid++（唯一的一个number值）;
　　　　　　}
　　　　 }

　　　　if ( !this.cache[ unlock ] ) {   //在cache对象中设置ID的属性名，它的属性值为{}
　　　　　　this.cache[ unlock ] = {};
　　　　}

　　　　return unlock;    //当对同一个元素添加第二个数据时，就会直接返回这个owner[ this.expando ]了，所以同一个元素的自定义属性值是一样的。
　　},
　　set: function( owner, data, value ) {//往cache对象中添加数据值
　　　　var prop,
　　　　　　unlock = this.key( owner ),   //先找到这个ID（1,2,3....）
　　　　　　　　cache = this.cache[ unlock ];  //在cache中找这个属性名ID的json对象

　　　　if ( typeof data === "string" ) {
　　　　　　cache[ data ] = value;  //如果是添加字符串，就直接添加到这个json对象中

　　　　} else {   //如果是这种写法:$.data(document.body,{"age":30,"job":"it"})
　　　　　　if ( jQuery.isEmptyObject( cache ) ) {
　　　　　　　　jQuery.extend( this.cache[ unlock ], data );
　　　　　　} else {
　　　　　　　　for ( prop in data ) {
　　　　　　　　　　cache[ prop ] = data[ prop ];
　　　　　　　　}
　　　　　　}
　　　　}
　　　　return cache;
　　},
　　get: function( owner, key ) { //去cache对象中获取某个值
　　　　var cache = this.cache[ this.key( owner ) ];

　　　　return key === undefined ?cache : cache[ key ];  //如果不传入key就返回这个元素上添加的所有数据，如果传入key，就只返回key属性的属性值。
　　},
　　access: function( owner, key, value ) {  //对get和set进行整合，根据参数的个数决定是get还是set操作
　　　　var stored;
　　　　if ( key === undefined ||((key && typeof key === "string") && value === undefined) ) {

　　　　　　stored = this.get( owner, key );

　　　　　　return stored !== undefined ?stored : this.get( owner, jQuery.camelCase(key) );
　　　　}

　　　　this.set( owner, key, value );

　　　　return value !== undefined ? value : key;
　　},
　　remove: function( owner, key ) { //删除cache对象中的值
　　　　var i, name, camel,unlock = this.key( owner ),cache = this.cache[ unlock ];

　　　　if ( key === undefined ) {  //如果不传入key，就把这个元素的整个数据都删除
　　　　　　this.cache[ unlock ] = {};

　　　　} else {      
　　　　　　if ( jQuery.isArray( key ) ) {   //如果是数组，就要删除多个属性值，比如：$.removeData(document.body,["age","job","all-name"])，name = ["age","job","all-name","allName"]，map方法请参照http://www.cnblogs.com/chaojidan/p/4142338.html。
　　　　　　　　name = key.concat( key.map( jQuery.camelCase ) );
　　　　　　} else {
　　　　　　　　camel = jQuery.camelCase( key );   //如果传入的就是一个值，先把这值转成驼峰形式
　　　　　　　　if ( key in cache ) {    //这个值是否在cache中
　　　　　　　　　　name = [ key, camel ];  //如果在,name = [key, key的驼峰写法（如果没有驼峰写法，那么就是key）]
　　　　　　　　} else {    //如果key不在cache中
　　　　　　　　　　name = camel;     //先检查key的驼峰写法在不在cache中，如果连key的驼峰写法都不在cache中，就看name是否是用空格分开的字符串，比如："age job"，那么就用正则匹配，返回[age,job]
　　　　　　　　　　name = name in cache ?[ name ] : ( name.match( core_rnotwhite ) || [] );
　　　　　　　　}
　　　　　　}

　　　　　　i = name.length;
　　　　　　while ( i-- ) {     //删除cache中对应的属性值
　　　　　　　　delete cache[ name[ i ] ];
　　　　　　}
　　　　}
　　},
　　hasData: function( owner ) { //判断cache对象是否有此属性
　　　　return !jQuery.isEmptyObject(
　　　　　　this.cache[ owner[ this.expando ] ] || {}   //元素节点在缓存系统中是否有数据
　　　　);
　　},
　　discard: function( owner ) {  //一次性删除cache对象中元素节点的所有数据
　　　　if ( owner[ this.expando ] ) {
　　　　　　delete this.cache[ owner[ this.expando ] ];
　　　　}
　　}
};

 以上是Data构造方法实现的源码解析，有了这个构造方法后，我们就可以实例化Data对象，通过Data实例对象来操作jQuery缓存机制了。

实例对象Data可以调用Data原型对象中的所有方法和属性，因此只要new Data，就可以通过这个new出来的Data对象进行jQuery的缓存操作。

下一课，将讲解jQuery是如何使用new出来的Data对象进行操作的。

 

 

 

加油！