jQuery缓存数据

很多同学在项目中都喜欢将数据存储在HTMLElement属性上，如


1

2

3

4

<div data="some data">Test</div>

<script>

    div.getAttribute(‘data‘); // some data

</script>

给页面中div添加了自定义属性“data”及值“some data”。后续JS代码中使用getAttribute获取。

jQuery从1.2.3开始提供了data/removeData方法用来存储/删除数据。1.6.1代码片段


1

2

3

4

5

6

jQuery.extend({

    cache: {},

    // Please use with caution

    uuid: 0,

    ...

});

即给jQuery添加了静态字段/方法，有jQuery.cache/jQuery.uuid/jQuery.expando等。下面分别介绍

jQuery.cache 空对象，用来缓存。它的结构较复杂。

jQuery.uuid 自增唯一的数字。

jQuery.expando 字符串，使用Math.random生成，去掉了非数字字符。它作为HTMLElement或JS对象的属性名。


1

expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),

jQuery.noData JS对象，对于指定的HTMLElement禁用data方法。如embed、applet。

jQuery.hasData 用来判断HTMLElement或JS对象是否具有数据。返回true或false。即如果调用了jQuery.data方法添加了属性，则返回true。


1

2

3

4

5

6

7

<div>aa</div>

<script>

    var div = document.getElementsByTagName(‘div‘)[0];

    $.hasData(div); // false

    $.data(div, ‘name‘,‘jack‘);

    $.hasData(div); // true

</script>

jQuery.acceptData 用来判断该元素是否能接受数据，返回true或false。在jQuery.data中使用。

jQuery.data 这是提供给客户端程序员使用的方法，它同时是setter/getter。

  1. 传一个参数，返回附加在指定元素的所有数据，即thisCachejQuery.data(el); // thisCache
  2. 传二个参数，返回指定的属性值jQuery.data(el, ‘name‘);
  3. 传三个参数，设置属性及属性值jQuery.data(el, ‘name‘, ‘jack‘);jQuery.data(el, ‘uu‘, {});
  4. 传四个参数，第四个参数pvt仅提供给jQuery库自身使用。即jQuery._data方法中传true。因为jQuery的事件模块严重依赖于jQuery.data，为避免人为的不小心重写在这个版本中加入的

jQuery.removeData 删除数据。

上面是jQuery数据缓存模块的整体概述，下面详细说下jQuery.data方法。jQuery.data为两种对象提供缓存:JS对象和HTMLElement


1

2

3

4

5

6

7

8

9

10

11

12

// 为JS对象提供缓存

var myObj = {};

$.data(myObj, ‘name‘, ‘jack‘);

$.data(myObj, ‘name‘); // jack

// 为HTMLElement提供缓存

<div id="xx"></div>

<script>

    var el = document.getElementById(‘xx‘);

    $.data(el, ‘name‘, ‘jack‘);

    $.data(el, ‘name‘); // jack

</script>

内部实现上也是有区别的，

1，为JS对象提供缓存时，直接将数据保存在JS对象上。cache为JS对象。此时会偷偷的给JS对象添加个属性（类似于jQuery16101803968874529044），属性值也是个JS对象。举例说明


1

2

3

var myObj = {};

$.data(myObj, ‘name‘, ‘jack‘);

console.log(myObj);

myObj的结构如下


1

2

3

4

5

myObj = {

    jQuery16101803968874529044 : {

        name : ‘jack‘

    }

}

“jQuery16101803968874529044”这个字符串在data内部命名为id（注意并非HTMLElement元素的id），它实际就是jQuery.expando。上面已经提到它是在jQuery.js引入到页面后随机生成的。

2，为HTMLElement提供缓存时，却不会直接保存在HTMLElement上。而是保存在jQuery.cache上。cache为jQuery.cache。此时先给HTMLElement添加属性（类似于jQuery16101803968874529044），属性值为数字（1,2,3递增）。即只将一些数字保存在了HTMLElement上，不会直接将数据置入。这是因为IE老版本中可能会存在内存泄露危险。而HTMLElement如何与jQuery.cache建立联系呢？ 还是id。刚刚提到属性值数字就是id。举例说明


1

2

3

4

5

6

7

<div id="xx"></div>

<script>

    var el = document.getElementById(‘xx‘);

    $.data(el, ‘name‘, ‘jack‘);

    console.log(el[jQuery.expando]); // 1

    console.log(jQuery.cache); // {1 : {name:‘jack‘}}

</script>

　　

el 上添加了属性jQuery.expando，值为id，这个id是从1开始递增的。而id又作为jQuery.cache的属性（key）。这样就HTMLElement就与jQuery.cache建立了联系。如图

不知注意到没有，jQuery.data还有第四个参数pvt，这个参数只在jQuery._data中使用。


1

2

3

4

// For internal use only.

_data: function( elem, name, data ) {

    return jQuery.data( elem, name, data, true );

},

　　

jQuery._data从命名上就指定它是私有的，使用jQuery的客户端程序员不应该去调用该方法。jQuery的API文档上也不会公开它。

jQuery的数据缓存模块从1.2.3到1.6.1几乎每个版本都在变。jQuery._data的提出就是为了避免客户端程序员覆盖/重写了默写模块。如jQuery事件模块中事件handler等就使用jQuery.data存储，如果重写了该模块。那么事件模块将瘫痪。因此特意添加了pvt参数及jQuery._data方法。

但如果你刻意要破坏，那么还是可以做的。如下


1

2

3

4

5

6

7

8

9

10

<div id="xx">Test</div>

<script>

    $(‘#xx‘).click(function(){

        alert(‘click‘);

    });

    // 语句1

    $.data($(‘#xx‘)[0], ‘events‘, ‘‘, true);

    // 语句2

    //$._data($(‘#xx‘)[0], ‘events‘, ‘‘);

</script>

　　

点击div[id=xx]将不会触发点击事件。

整个jQuery.data设置(set)数据缓存的过程就是如此，理解的这个。取数据(get)的过程就好理解了。不重复。

最后，我会给zChian.js添加zChain.data/removeData方法，因为是“迷你版”，仅给HTMLElement添加数据缓存。请注意。

时间： 2024-11-09 08:48:12

jQuery缓存数据的相关文章

jQuery.data的是jQuery的数据缓存系统

jQuery.Data源码 jQuery.data的是jQuery的数据缓存系统.它的主要作用就是为普通对象或者DOM元素添加数据. 1 内部存储原理 这个原理很简单,原本要添加在DOM元素本身的数据,现在被集中的存储在cache集合中.它们之间靠一个从1开始的数字键来联系着.这样DOM元素就不会像以前那么笨重了,更不会出现以前那种循环引用而引起的内存泄漏.现在DOM只需要保存好这个数字键值即可.这个属性值被保存在DOM元素的一个属性里,该属性名是由jQuery.expando生成的. 2 Da

读jQuery之六（缓存数据）

很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如 1 2 3 4 <div data="some data">Test</div> <script>     div.getAttribute('data'); // some data </script> 给页面中div添加了自定义属性“data”及值“some data”.后续JS代码中使用getAttribute获取. jQuery从1.2.3开始提供了data/re

jQuery对象数据缓存Cache原理及jQuery.data详解

网上有很多教你怎么使用jQuery.data(..)来实现数据缓存,但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几乎没有什么文章说清楚它们两的区别,所以我用到了,研究下分享给大家.$("").data([key],[value])与jQuery.data(element,[key],[value])的区别这两个函数都是用来在元素上存放数据也就平时所说的数据缓存,都返回jQuery对象,当时我分别在使用

（五）JS学习笔记 - JQuery缓存机制

历史背景 开发中常常因为方便,把状态标志都写到dom节点中,也就是HTMLElement,缺点: 循环引用 直接暴露数据,安全性? 增加一堆的自定义属性标签,对浏览器来说是没意义的 取数据的时候要对HTML节点做操作 根本目的: 使用一种低耦合的方式让DOM和缓存数据能够联系起来 jQuery现在支持两种: •$("ele").data() 1 jQuery.fn.extend({ 2 data: function( elem, name, data ) { 3 return jQue

ThinkPHP使用Memcached缓存数据

ThinkPHP默认使用文件缓存数据,支持Memcache等其他缓存方式,有两个PHP扩展:Memcache和Memcached,Memcahe官方有说明,主要说一下Memcached. 相对于PHP Memcache,php Memcached是基于原生的c的libmemcached的扩展,更加完善,建议替换为php memcached. 版本3.2.2开始内置了Memcached驱动(ThinkPHP/Library/Think/Cache/Driver/Memcached.class.ph

基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式

在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括获取数据并显示,插入新数据到服务器,更新数据,删除数据等操作. 1.利用Jquery获取数据并显示 为了顺利获取数据,我们需要保持页面端调用和服务器端保持一致,并相应的把数据转换或者封装为对象实体进行处理. 下面我们以一个简单的全国省份.全国城市.全国城市行政区的案例进行Demo代码的介绍.   总

基于MVC+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式

在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括获取数据并显示,插入新数据到服务器,更新数据,删除数据等操作. 1.利用Jquery获取数据并显示 为了顺利获取数据,我们需要保持页面端调用和服务器端保持一致,并相应的把数据转换或者封装为对象实体进行处理. 下面我们以一个简单的全国省份.全国城市.全国城市行政区的案例进行Demo代码的介绍.   总

Android Volley 获取磁盘已有缓存数据

经过学习,我们知道Volley的架构如下: 从架构上我们可以看到,volley有设置缓存机制,当找不到数据缓存或数据缓存过期时,才会联网获取新的数据.Volley 本身有缓存机制,不仅仅默认缓存图片,也有缓存Json数据.通过手机文件管理软件,我们发现Volley缓存地址:/data/data/软件包/cache/volley 目录下. 那么,在联网获取了数据缓存后,如何获取到Volley缓存中的数据呢?在百度上找了一整天的资料都没有说明如何获取到最新的数据.最后还是再stack overflo

plain framework 1 网络流 缓存数据详解

网络流是什么?为什么网络流中需要存在缓存数据?为什么PF中要采用缓存网络数据的机制?带着这几个疑问,让我们好好详细的了解一下在网络数据交互中我们容易忽视以及薄弱的一块.该部分为PF现有的网络流模型,但是在这里只讲解最本质的概念,而没有详细说明代码,如果有兴趣的不妨先看了这部分再去看下代码,一切或许会豁然开朗. 网络流 如果你不知道计算机中流数据模型的定义,那么你就可以试想一下河流,有着固定起点和终点的河流.将流水从某一个地方送向另一个地方的通道,我们现实中一般叫做渠道,这种渠道在计算机之间就是网