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

时间:2021-06-26 07:51:59

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的原理:

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

当调用$("#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对象进行操作的。

加油!