很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如
<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代码片段
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对象的属性名。
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。
<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。
- 传一个参数,返回附加在指定元素的所有数据,即thisCachejQuery.data(el); // thisCache
- 传二个参数,返回指定的属性值jQuery.data(el, 'name');
- 传三个参数,设置属性及属性值jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu', {});
- 传四个参数,第四个参数pvt仅提供给jQuery库自身使用。即jQuery._data方法中传true。因为jQuery的事件模块严重依赖于jQuery.data,为避免人为的不小心重写在这个版本中加入的
jQuery.removeData 删除数据。
上面是jQuery数据缓存模块的整体概述,下面详细说下jQuery.data方法。jQuery.data为两种对象提供缓存:JS对象和HTMLElement
// 为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对象。举例说明
var myObj = {}; $.data(myObj, 'name', 'jack'); console.log(myObj);
myObj的结构如下
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。举例说明
<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中使用。
// 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方法。
但如果你刻意要破坏,那么还是可以做的。如下
<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添加数据缓存。请注意。
相关推荐
在探讨“清除Jquery缓存”的话题之前,我们先来了解一下jQuery是什么以及为什么需要清除缓存。 ### jQuery简介 jQuery是一款流行的JavaScript库,它极大地简化了HTML文档的遍历、事件处理、动画以及Ajax交互等操作...
一、jQuery缓存简介 jQuery提供了一个便利的功能,即`$(selector)`,用于选取DOM元素。然而,每次调用此函数都会执行一次DOM查询,这在页面元素众多或者频繁操作时可能导致性能下降。为了解决这个问题,jQuery引入...
AJAXCache是一款针对jQuery库设计的插件,其主要功能是为$.ajax()方法提供缓存支持。在Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛用于实现页面的部分更新,提高用户体验,而缓存机制则进一步...
在JavaScript和jQuery中,缓存机制对于提高网页性能起着重要作用,因为它允许浏览器保存先前请求的数据,以便在后续请求时快速获取。然而,在某些情况下,如开发过程中或更新内容时,我们可能希望禁用缓存以确保用户...
**jQuery 图片缓存插件与脚本** 在网页设计中,图片的加载速度往往对用户体验有着重大影响。当用户浏览网页时,如果图片加载缓慢,可能会导致页面显得卡顿,影响用户对网站的整体评价。为了解决这个问题,开发者...
jQuery数据缓存是一种高效的方法,用于在DOM元素上存储和检索数据,同时避免了JavaScript中的内存泄漏问题,尤其是与DOM元素绑定时常见的循环引用风险。本文将深入探讨jQuery的`data()`方法及其相关使用规范。 一、...
### jQuery缓存数据功能知识点 jQuery作为一个流行的JavaScript库,提供了强大的数据缓存功能,允许开发者在不同的对象上存储和管理数据。本文将详细介绍jQuery的缓存数据功能,包括其方法的使用、实现原理及应用...
### 进行jQuery缓存使用说明介绍讲析 在频繁访问DOM元素的情况下,直接通过选择器获取元素会导致性能下降。为了避免这种情况,jQuery提倡使用缓存选择结果的方法。具体做法是将选择器的结果赋值给一个变量,然后对该...
- 避免不必要的DOM操作,使用jQuery缓存变量提高性能。 - 使用事件委托提高大规模DOM交互的性能。 8. **API参考** - jQuery的API文档详细列举了所有可用的方法、事件和属性,每个都有清晰的解释和示例,是开发者...
前言 对于jQuery的数据缓存,相信大家都不会陌生,jQuery缓存系统不仅运用于DOM元素,动画、事件等都有用到这个缓存系统。所以在平时实际应用中, 我们经常需要给元素缓存一些数据,并且这些数据往往和DOM元素紧密...
下面是一个简单的模拟jQuery缓存机制的实现: ```javascript var cacheData = {}, // 用来存储数据的全局对象 uuid = 0, // 声明随机数 expando = "cacheData" + (new Date().getTime()).toString().slice(-8); /...
jQuery 图像缓存 localStorage中图片缓存的jQuery插件 注意: localStorage 的大多数浏览器内存限制为 5MB。 注意:图像缓存的正确方法是使用 http 服务器缓存标头的响应。 版本 1.0.0 要求 jQuery [ ] 如何使用 ...
静态html+Jquery+缓存实现日志存储记录和删除
本项目“jQuery本地缓存添加记录列表特效”利用jQuery实现了一个功能,即在用户浏览数据记录时,将这些记录存储在本地,以便于快速加载和呈现,提升用户体验。这个特效涉及到的主要知识点包括jQuery、CSS样式以及...
在本篇jQuery学习记录中,我们将探讨两个关键的前端开发问题:页面缓存与中文处理。这两个主题在构建高效、用户友好的Web应用时都起着至关重要的作用。 首先,让我们深入了解页面缓存。在Web应用中,缓存是一种优化...