博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery缓存机制(三)
阅读量:6908 次
发布时间:2019-06-27

本文共 2588 字,大约阅读时间需要 8 分钟。

缓存机制提供的入口有:

$.data([key],[value]) // 存取数据

$.hasData(elem) // 是否有数据

$.removeData([key]) // 删除数据

$.acceptData(elem) // 检测元素是否可以使用缓存机制存数据

$(elem).data([key],[value]) // 存取数据

$(elem).removeData([key]) // 删除数据

 

已经阅读了缓存机制为用户提供的入口,并且重点阅读了$(elem).data()方法(其它方法都是直接调用data_user对象的方法),

接下来重点看data_user对象封装的属性和方法

Data.prototype = {

  // 生成一个key使用它将cache和元素联系起来,并最终返回这个key

  key: function( owner ) {
    //如果owner不是元素节点或document节点,则返回0,为什么返回0?为了校验?
    if ( !Data.accepts( owner ) ) {
      return 0;
    }
    // 一个暂时的对象,将被扩展到owner对象上。
    var descriptor = {},
    // 判断owner对象上是否已经有这个jQuery随机产生的键。
    // 这里的this是后面new 出来的Data对象,所以其expando是固定的值,对在该data对象内存取数据的elem都是一致的
    unlock = owner[ this.expando ];

    // 如果没有这个键,则为owner对象创建一个。

    if ( !unlock ) {
      // 每次有新的对象想要调用data存储数据,都将uid增加1。保证唯一性。该uid是cache中的键
      unlock = Data.uid++;

      try {

        // 为descriptor添加属性(expando的值),将生成唯一id关联在descriptor上。

        descriptor[ this.expando ] = { value: unlock };

        // 再将descriptor关联在owner上,使owner最终和unlock关联起来,用于在cache中操作数据

        // 第二个参数应该是字符串?传一个对象进来不知道是怎么操作的,需要深入了解下definePropertyies方法

        Object.defineProperties( owner, descriptor );

      } catch ( e ) {

        // 处理元素上不能存对象的情况

        descriptor[ this.expando ] = unlock;
        jQuery.extend( owner, descriptor );
      }
    }

    // 如果cache[unlock]没有值,则将其值设置为空对象

    if ( !this.cache[ unlock ] ) {
      this.cache[ unlock ] = {};
    }
    //返回一个cache的索引
    return unlock;
  },
  set: function( owner, data, value ) {
    var prop,
      // 存数据之前,先调用key方法,拿到元素上绑定好的唯一UID,如果没有就创建一个
      unlock = this.key( owner ),

      // 根据这个UID到cache中拿到已经存储的数据,如果之前没有存储过,会返回一个空对象

      cache = this.cache[ unlock ];

    // 处理三个参数都存在的情况

    if ( typeof data === "string" ) {

      // 以data为键,以value为值将数据存储到cache中,如果之前存过就覆盖掉

      cache[ data ] = value;

    //处理只有两个参数,并且第二个参数是个对象的情况

    } else {
      // 如果cache中是空的
      if ( jQuery.isEmptyObject( cache ) ) {

        // 将data对象扩展到cache。不需要深度扩展?

        jQuery.extend( this.cache[ unlock ], data );
      // 如果不是空对象,需要一个一个赋值。?
      } else {
        for ( prop in data ) {
          cache[ prop ] = data[ prop ];
        }
      }
    }
    return cache;
  },
  get: function( owner, key ) {
    // 创建一个cache,将owner存储到Data对象的cache中的所有数据缓存起来。
    var cache = this.cache[ this.key( owner ) ];
    // 如果key存在则返回key对象的值,否则将owner上的所有值都返回。
    return key === undefined ?
    cache : cache[ key ];
  },
  // 剩下的四个方法下次再看。

  access : function(){},

  remove : function(){},

  hasData : function(){},

  discard : function(){}  // Data虽然封装了这个方法,但并没有暴露出来,也没有在内部使用。作用是删除owner存储到cache中的所有数据

};

转载地址:http://sxfcl.baihongyu.com/

你可能感兴趣的文章
修改dedecms中某个页面ueditor的宽度
查看>>
String为什么要设置成Final类型
查看>>
生成XML文件,并保存到本地文件
查看>>
[C++]const、typedef联合使用注意
查看>>
JavaScript引用类型之Array数组的栈方法与队列方法
查看>>
银行转账亲测
查看>>
上海租房攻略
查看>>
【Python爬虫学习笔记3】requests库
查看>>
Spring boot(四)Spring Boot 集成 MyBatis
查看>>
win7重装系统
查看>>
转:【高并发简单解决方案】redis缓存队列+mysql 批量入库+php离线整合
查看>>
列表和屏幕的相互调用之从列表调用屏幕
查看>>
loadrunner-2-13错误处理函数
查看>>
C# 中的 App.config 文件配置
查看>>
LeetCode 队列与BFS--岛屿的数量
查看>>
jmeter-noguimodel
查看>>
Git使用++
查看>>
[C++]基本类型转换
查看>>
清除windows系统垃圾文件简易脚本(bat)
查看>>
Android WindowManager实现悬浮窗效果 (一)——与当前Activity绑定
查看>>