欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery 源码分析(十) 数据缓存模块 data详解

程序员文章站 2022-05-18 20:12:46
jQuery的数据缓存模块以一种安全的方式为DOM元素附加任意类型的数据，避免了在JavaScript对象和DOM元素之间出现循环引用，以及由此而导致的内存泄漏。 数据缓存模块为DOM元素和JavaScript对象提供了统一的数据设置、读取和移除方法，在jQuery内部还为队列模块、动画模块、样式操 ......

jquery的数据缓存模块以一种安全的方式为dom元素附加任意类型的数据，避免了在javascript对象和dom元素之间出现循环引用，以及由此而导致的内存泄漏。

数据缓存模块为dom元素和javascript对象提供了统一的数据设置、读取和移除方法，在jquery内部还为队列模块、动画模块、样式操作模块、事件系统提供基础功能，负责维护这些模块运行时的内部数据。

 writer by:大沙漠 qq:22969969

对于dom元素和javascript对象，数据的存储位置是不同的，如下:

  • 对于dom元素jquery直接把数据存储在jquery.cache中
  • 对于javascript对象，垃圾回收机制能够自动发生，因此数据可以直接存储在javascript对象中。

另外为了避免jquery内部使用的数据和用户自定义的数据发生冲突，分为内部数据缓存对象和自定义数据缓存对象

  • 内部缓存对象   　　 ;jquery内部使用        ;dom元素:存储在$.cache[elem[$.expando]]                 ;javascript对象:obj[$.expando]
  • 自定义缓存对象    　;给用户使用的            ;dom元素:存储在$.cache[elem[$.expando]].data        ;javascript对象:obj[$.expando].data

jquery的静态方法含有如下api:

  • $.cache　　　　　　　　　    　;dom元素的数据缓存对象,所有dom元素存储的数据都会存储在该对象里
  • $.uuid　　　　　　  　　　　     ;唯一id种子，初始值为0,当数据存储在dom元素上时用到，元素的$.expando属性的值等于最新的$.uuid加1
  • $.expando　　　　   　　　　     ;页面中每个jquery副本的唯一标识，只有刷新页面才会发生变化。格式:jquery+版本号+随机数
  • $.acceptdata(elem)   　　　　    ;判断dom元素elem是否可以设置数据，elem是一个dom节点
  • $.hasdata(elem)　　　　　　     ;判断elem是否有关联的数据
  • $.data(elem, name, data,pvt)　　;设置或返回dom或javascript对象的数据。

　　　　　　　　　　　　　　　　　　·elem是dom元素或javascript对象。

　　　　　　　　　　　　　　　　　　·name是要设置或读取的数据名，也可以是包含键值对的对象。

　　　　　　　　　　　　　　　　　　·data是要设置的数据值，可以是任意数据。

　　　　　　　　　　　　　　　　　　·pvt表示操作的是否为内部数据，默认为false

  • $._data(elem, name, data)　　　;设置、读取内部数据，内部代码就一句return jquery.data( elem, name, data, true )
  • $.removedata(elem, name, pvt)　;移除通过$.data()设置的数据,pvt表示是否为内部数据
  •  $.cleandata(elem)　　　　　　   ;移除多个dom元素的全部数据和事件

jquery/$ 实例方法(可以通过jquery实例调用的):

  • data(key,value)　　　　　　　　;设置/读取自定义数据
  • removedata(key)　　　　　　　 ;移除匹配元素的自定义数据，key可以是一个字符换或数组，表示属性或属性列表

为dom元素存储数据时，比较特别，jquery首先会在该dom上添加一个名为$.expando的属性，值是一个唯一的id,等于++$.uuid(jquery的一个内置属性)，$.uuid是一个整型值,初始值为0。为该dom添加属性之后还会把这个id作为属性添加到全局缓存对象jquery.cache中，对应的属性值是一个javascript对象，该对象是dom元素的数据缓存对象

例如:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <p>123</p>
    <script>
        var p = document.getelementsbytagname('p')[0];
        $.data(p,'age',25,true);                                //设置内部数据age=25，这是直接定义在数据缓存对象上的。等价于$._data(p,'age',25);
        $.data(p,'age',23);                                     //设置自定义数据age=23，等价于$.data(p,'age',23,false)，这是定义在数据缓存对象的data属性对象上
        console.log($.data(p,undefined,undefined,true));        //输出: object { data={ age=23},  age=25}    ;获取数据缓存对象。    
        console.log($.data(p));                                 //输出: object { age=23}             ;获取自定义缓存对象,其实就是$.data(p,undefined,undefined,true)对象的data属性
        console.log($.cache[p[$.expando]].data === $.data(p));  //输出true，从这里可以看出$.data(p)获取的就是自定义缓存对象，也就是数据缓存对象的data属性对象
    </script>    
</body>
</html>

输出如下:

jQuery 源码分析(十) 数据缓存模块 data详解

 

源码分析

对于数据缓存模块的静态方法来说，它是以jquery.extend({})函数直接挂载到jquery里的，如下:

jquery.extend({
  cache: {},                                //dom元素的数据缓存对象

  // please use with caution
  uuid: 0,

  // unique for each copy of jquery on the page
  // non-digits removed to match rinlinejquery
  expando: "jquery" + ( jquery.fn.jquery + math.random() ).replace( /\d/g, "" ),    //页面中每个jquery副本的唯一标识

  // the following elements throw uncatchable exceptions if you
  // attempt to add expando properties to them.
  nodata: {                                   //存放了不支持扩展属性的embed、object、applet元素的节点名称
    "embed": true,
    // ban all objects except for flash (which handle expandos)
    "object": "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000",
    "applet": true
  },

  hasdata: function( elem ) {                 //判断一个dom元素或javascript对象是否有与之关联的数据
    elem = elem.nodetype ? jquery.cache[ elem[jquery.expando] ] : elem[ jquery.expando ];     //如果是元素节点(有nodetype属性)则判断在jquery.cache中是否有jquery.expando属性，否则认为是javascript对象，判断是否有jquery.expando属性。
    return !!elem && !isemptydataobject( elem );                                              //如果elem存在且含有数据缓存则返回true,isemptydataobject是个jquery内部的工具函数
  },

  data: function( elem, name, data, pvt /* internal use only */ ) {
    /*略*/
  },

  removedata: function( elem, name, pvt /* internal use only */ ) {
    /*略*/
  },

  // for internal use only.
  _data: function( elem, name, data ) {       //设置、读取内部数据，就是调用jquery.data()，并设置第四个参数为true
    return jquery.data( elem, name, data, true );
  },

  // a method for determining if a dom node can handle the data expando
  acceptdata: function( elem ) {              //判断参数elem是否可以设置数据，返回true则可以设置，返回false则不可以
    if ( elem.nodename ) {
      var match = jquery.nodata[ elem.nodename.tolowercase() ];

      if ( match ) {
        return !(match === true || elem.getattribute("classid") !== match);
      }
    }

    return true;
  }
});

我们主要看一下$.data()是怎么设置数据的，懂了怎么设置数据，removedata也就懂了，如下:

data: function( elem, name, data, pvt /* internal use only */ ) {       //设置、读取自定义数据、内部数据
  if ( !jquery.acceptdata( elem ) ) {               //检查elem元素是否支持设置数据，如果jquery.acceptdata()函数返回false表示不允许设置数据
    return;                                           //则直接返回，不继续操作
  }

  var privatecache, thiscache, ret,                 //privatecache默认指向数据缓存对象(如果pvt参数未设置或者为false则指向自定义数据),thiscache表示自定义数据缓存对象,如果pvt是true,则privatecache和thiscache都指向数据缓存对象都指向数据缓存对象。ret是读取时的返回值
    internalkey = jquery.expando,                   //jquery.expando页面中每个jquery副本的唯一标识，把它赋值给internalkey是为了减少拼写字数和缩短作用域链查找。
    getbyname = typeof name === "string",           //getbyname表示name是否为字符串

    // we have to handle dom nodes and js objects differently because ie6-7
    // can't gc object references properly across the dom-js boundary
    isnode = elem.nodetype,                         //isnode表示elem是否为dom元素

    // only dom nodes need the global jquery cache; js object data is
    // attached directly to the object so gc can occur automatically
    cache = isnode ? jquery.cache : elem,           //如果是dom元素则存储在$.cache中，如果是javascript对象则存储在该对象本身 

    // only defining an id for js objects if its cache already exists allows
    // the code to shortcut on the same path as a dom node with no cache
    id = isnode ? elem[ internalkey ] : elem[ internalkey ] && internalkey,
    isevents = name === "events";

  // avoid doing any more work than we need to when trying to get data on an
  // object that has no data at all
  if ( (!id || !cache[id] || (!isevents && !pvt && !cache[id].data)) && getbyname && data === undefined ) {   //如果是读取数据但没有数据，则返回，避免做不必要的工作,if语句中的符合表达式可以分两个部分，后一部分是getbyname && data === undefined，表示，如果name是字符串且data没有设置，则说明是在读数据。 前一部分(!id || !cache[id] || (!isevents && !pvt && !cache[id].data)表示，如果id不存在说明没有该属性，如果cache[id]不存在则说明没有该数据
    return;
  }
  /*执行到这里有两种情况:1.存储数据 2.读取数据且数据存在*/   
  if ( !id ) {                                      //如果id不存在，则分配一个
    // only dom nodes need a new unique id for each element since their data
    // ends up in the global cache
    if ( isnode ) {                                   //如果是dom元素
      elem[ internalkey ] = id = ++jquery.uuid;         //jquery.uuid会自动加1，并附在dom元素上
    } else {
      id = internalkey;                               //否则关联id就是jquery.expando
    }
  }

  if ( !cache[ id ] ) {                           //如果dom对象或javascript对象对应的数据缓存对象不存在则初始化为一个空对象
    cache[ id ] = {};

    // avoids exposing jquery metadata on plain js objects when the object
    // is serialized using json.stringify
    if ( !isnode ) {
      cache[ id ].tojson = jquery.noop;
    }
  }

  // an object can be passed to jquery.data instead of a key/value pair; this gets
  // shallow copied over onto the existing cache
  if ( typeof name === "object" || typeof name === "function" ) { //如果name是对象或者函数(函数好像不可以，只能是对象)，则批量把参数name中的属性合并到已有的数据缓存对象上，即批量设置数据
    if ( pvt ) {
      cache[ id ] = jquery.extend( cache[ id ], name );
    } else {
      cache[ id ].data = jquery.extend( cache[ id ].data, name );
    }
  }

  privatecache = thiscache = cache[ id ];                         //设置privatecache和thiscache都指向数据缓存对象cache[ id ]

  // jquery data() is stored in a separate object inside the object's internal data
  // cache in order to avoid key collisions between internal data and user-defined
  // data.
  if ( !pvt ) {                                                   //如果参数pvt是false或者未设置，则设置thiscache指向自定义数据，
    if ( !thiscache.data ) {                                        //如果数据缓存对象thiscache.data不存在则先将其初始化为空对象。
      thiscache.data = {};
    }

    thiscache = thiscache.data;
  }

  if ( data !== undefined ) {                                     //如果data不是undefined，则把参数data设置到属性name上，这里统一把参数name转换成了驼峰式，这样在读取的时候不管是连字符串还是驼峰式就都不会出错。
    thiscache[ jquery.camelcase( name ) ] = data;
  }

  // users should not attempt to inspect the internal events object using jquery.data,
  // it is undocumented and subject to change. but does anyone listen? no.
  if ( isevents && !thiscache[ name ] ) {
    return privatecache.events;
  }

  // check for both converted-to-camel and non-converted data property names
  // if a data property was specified
  if ( getbyname ) {                                            //如果参数name是字符串，则读取单个数据

    // first try to find as-is property data
    ret = thiscache[ name ];                                      //先尝试读取参数name对应的数据

    // test for null|undefined property data  
    if ( ret == null ) {                                          //如果没有读取到则把参数name转换为驼峰式再次尝试读取

      // try to find the camelcased property
      ret = thiscache[ jquery.camelcase( name ) ];
    }
  } else {
    ret = thiscache;                                          //如果参数2不是字符串,则返回数据缓存对象。
  }

  return ret;                                                 //最后返回ret
},

这样就完成数据的设置的，对于jquery实例上的方法如下:

jquery.fn.extend({
  data: function( key, value ) {      //设置、读取自定义数据，解析html5属性data- key是要设置或读取的数据名，或者是含有键值对的对象，value是要设置的数据值，可以是任意类型
    var parts, attr, name,
      data = null;

    if ( typeof key === "undefined" ) {       //如果未传入参数，即参数格式是.data()，则获取第一个匹配元素关联的数据缓存对象(即获得全部数据)
      if ( this.length ) {                      //如果该jquery对象有匹配的元素
        data = jquery.data( this[0] );            //获取第一个元素的数据缓存对象

        if ( this[0].nodetype === 1 && !jquery._data( this[0], "parsedattrs" ) ) {    //这里是解析html5里的data-属性的，可以先略过
          attr = this[0].attributes;
          for ( var i = 0, l = attr.length; i < l; i++ ) {
            name = attr[i].name;

            if ( name.indexof( "data-" ) === 0 ) {
              name = jquery.camelcase( name.substring(5) );

              dataattr( this[0], name, data[ name ] );
            }
          }
          jquery._data( this[0], "parsedattrs", true );   //返回第一个匹配元素关联的自定义数据缓存对象。如果没有匹配元素则会返回null
        }
      }

      return data;

    } else if ( typeof key === "object" ) {         //如果key是一个对象，则为每个元素对象调用方法$.data(this,key)批量设置数据
      return this.each(function() {
        jquery.data( this, key );
      });
    }

    parts = key.split(".");
    parts[1] = parts[1] ? "." + parts[1] : "";      //取出命名空间，比如$(this).data('a.b',123);则parts[1]是.b

    if ( value === undefined ) {                    //如果传入的格式是.data(key),则认为是读取单个数据
      data = this.triggerhandler("getdata" + parts[1] + "!", [parts[0]]);     //触发自定义事件getdata,并把事件监听函数的返回值赋值给变量data

      // try to fetch any internally stored data first
      if ( data === undefined && this.length ) {          //如果事件监听函数没有返回值，才会尝试从自定义数据缓存对象中读取
        data = jquery.data( this[0], key );
        data = dataattr( this[0], key, data );
      }

      return data === undefined && parts[1] ?             //如果从getdata()事件监听函数或自定义数据缓存对象或html5属性data-中取到了数据，则返回数据;如果没有取到数据，但是指定了命名空间，则去掉命名空间再次尝试读取。
        this.data( parts[0] ) :
        data;

    } else {                                          //如果传入了参数key和value,即参数格式是:.data(key,value)，则为每个匹配元素设置任意类型的数据，并触发自定义事件setdata()和changedata()。
      return this.each(function() {
        var self = jquery( this ),
          args = [ parts[0], value ];

        self.triggerhandler( "setdata" + parts[1] + "!", args );        //触发自定义事件setdata,感叹号表示只执行没有命名控件的事件监听函数
        jquery.data( this, key, value );                                //调用$.data()方法为任意匹配元素设置任意类型的数据
        self.triggerhandler( "changedata" + parts[1] + "!", args );     //触发自定义事件changedata
      });
    }
  },
  /*...*/
})

设置数据缓存就是这样的，理解了设置数据缓存，移除就很好理解了。

上一篇： (十三)docker安装nginx

下一篇： 世界上最贵的花是什么花？花的售价是多少？

推荐阅读