1、首先看一下涉及到jQuery缓存机制的代码结构:

// 定义一些jQuery内部的变量,方便后续使用

var data_user, data_priv, // 后续会被赋值为两个Data对象
  rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/,  // 匹配花括号和方括号及其中间的内容
  rmultiDash = /([A-Z])/g;//匹配大写字母

// 定义Data的构造函数

function Data() {}

// 为Data构造函数添加一个uid属性

Data.uid = 1;

// 哪些类型的对象可以使用Data存储数据的:元素节点、文档节点、Object
Data.accepts = function( owner ) {};

// 为Data构造函数绑定方法

Data.prototype = {
  key: function( owner ) {}, // 生成一个key唯一的key,这个key是通过jQuery的唯一id加上一个随机数产生的

  set: function( owner, data, value ) {}, // 向cache中写数据

  get: function( owner, key ) {}, // 从cache中拿数据
  access: function( owner, key, value ) {}, // 一个set和get的总入口?处理一些特殊情况?暂时不太了解

  remove: function( owner, key ) {}, // 从cache中删除数据

  hasData: function( owner ) {}, // 检查owner(DOM||object)上是否有数据
  discard: function( owner ) {} // 清除owner上的所有数据
};

// 内部实例化的两个Data对象。分工不同

// 使用第一个Data对象存取数据
data_user = new Data();
// 当所要存储数据的对象是DOM对象时,用来存储该对象是否设置了hasDataAttrs,仅限内部使用
data_priv = new Data();

// 为用户提供的使用$.的方式调用的接口
jQuery.extend({
  acceptData: Data.accepts, // 标记哪些元素或者对象可以使用该Data存取数据

  hasData: function( elem ) {}, // 是否有数据

  data: function( elem, name, data ) {}, // 存取数据

  removeData: function( elem, name ) {}, // 删除数据

  _data: function( elem, name, data ) {}, // 存取数据(内部使用)

  _removeData: function( elem, name ) {}, // 删除数据(内部使用)
});

// jQuery提供给用户的使用$(Obj).的方式使用的接口
jQuery.fn.extend({
  data: function( key, value ) {}, // 存取数据

  removeData: function( key ) {} // 删除数据
});

// 一个jQuery的私有方法,不绑定到任何的对象里,因为很多地方用到吗?奇怪,为什么要用这种方式写到这里?

function dataAttr( elem, key, data ) {}

2、核心问题:

  a)两个实例化的Data对象分别有什么作用

  b)Data对象内部的cache中是以怎样的形式存取数据的

  c)元素、data对象、key、cache是怎么联系起来的

jQuery缓存机制(一)的更多相关文章

  1. jQuery缓存机制(三)

    缓存机制提供的入口有: $.data([key],[value]) // 存取数据 $.hasData(elem) // 是否有数据 $.removeData([key]) // 删除数据 $.acc ...

  2. (五)JS学习笔记 - JQuery缓存机制

    历史背景 开发中常常因为方便,把状态标志都写到dom节点中,也就是HTMLElement,缺点: 循环引用 直接暴露数据,安全性? 增加一堆的自定义属性标签,对浏览器来说是没意义的 取数据的时候要对H ...

  3. jQuery缓存机制(四)

    Data封装的方法的后面四个方法 和 dataAttr方法阅读. Data.prototype = { key: function( owner ) {}, set: function( owner, ...

  4. jQuery缓存机制(二)

    1.从用户调用的入口开始阅读,因为这是我们比较熟悉的部分(主要做参数的调整,根据不同的完成不同的功能) // 进入jQuery Data模块的入口 使用方法有三种,不传参,传一个参,传两个参.示例$( ...

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

    jQuery中有三种添加数据的方法,$().attr(),$().prop(),$().data().但是前面两种是用来在元素上添加属性值的,只适合少量的数据,比如:title,class,name等 ...

  6. jquery源码解析:jQuery数据缓存机制详解2

    上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析,这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的.我们接下来,来看这几个静态方法和实例方法的源码解 ...

  7. Java缓存学习之三:CDN缓存机制

    CDN是什么? 关于CDN是什么,此前网友详细介绍过. CDN是Content Delivery Network的简称,即"内容分发网络"的意思.一般我们所说的CDN加速,一般是指 ...

  8. Java缓存学习之二:浏览器缓存机制

    浏览器端的九种缓存机制介绍 浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户.浏览器端缓存 ...

  9. 浏览器缓存机制<转>

    转这篇文章是感觉可以在图片加载的时候,也使用这样的缓存策略   作者:吴秦出处:http://www.cnblogs.com/skynet/本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或 ...

随机推荐

  1. spring cloud feign 上传文件报not a type supported by this encoder解决方案

    上传文件调用外部服务报错: not a type supported by this encoder 查看SpringFormEncoder类的源码: public class SpringFormE ...

  2. Android使用genymotion模拟器

    做android开发这么久了,最头痛的就是默认的模拟器慢的像蜗牛一样,实在是受够了.以前知道有genymotion存在,但是一直没有去用,今天下来用了下,哇,速度超快啊,还在用默认模拟器的小伙伴快来吧 ...

  3. react解析html标签组成的字符串

    转载自:https://blog.csdn.net/tongshuo_11/article/details/61195232 var content = '<strong>content& ...

  4. C# dmp debug, can't load pdb file

    1.  Project->Properties->Build->Advance, Debug Info : Full/pdb-only . set to [none] will no ...

  5. A标签添加JS事件,不跳转不刷新办法

    <a href="javascript:;" id="submit-btn" class="submit-btn" title=&qu ...

  6. Linux中什么是块设备 及 lsblk命令的使用

    Linux中I/O设备分为两类:字符设备和块设备.两种设备本身没有严格限制,但是,基于不同的功能进行了分类.(1)字符设备:提供连续的数据流,应用程序可以顺序读取,通常不支持随机存取.相反,此类设备支 ...

  7. MAP参数估计

    (学习这部分内容大约需要40分钟) 摘要 在贝叶斯参数估计中, 除了先验是特别选定的情况下, 通常要积分掉所有模型参数是没有解析解的. 在这种情况下, 最大后验(maximum a posterior ...

  8. JavaScript 词法、静态、动态作用域初级理解

    开始之前 由于本人也是JavaScript初学者,记录学习经过,怕以后会忘记. 对于JavaScript 初学者来说,最难的不是代码部分,而是对很多书籍中的术语的理解,大多时候想要理解一段JavaSc ...

  9. FileSaver.js 浏览器导出Excel文件

    限制一:不同浏览器对 blob 对象有不同的限制 具体看看下面这个表格(出自 FileSaver.js): Browser Constructs as Filenames Max Blob Size ...

  10. 8 -- 深入使用Spring -- 7...1 启动Spring 容器

    8.7.1 启动Spring容器 对于使用Spring的Web应用,无须手动创建Spring容器,而是通过配置文件声明式地创建Spring容器.因此,在Web应用中创建Spring容器有如下两种方式: ...