jQuery数据缓存方案详解:$.data()的使用
我们经常使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能。jQuery提供了自己的数据缓存方案,能够达到和隐藏控件、全局变量相同的效果,但是jQuery实现方式更优雅。为了更好地使用jQuery数据缓存方案,我们需要掌握$.data()、$.cache、$.expando、$.hasData()、$.removeData()。
$.hasData()用来判断某个对象是否有附加的属性,可以给任何JavaScript对象和HTMLElement对象附加属性。$.data()用来读取或者修改属性值。$.removeData()用来删除已经添加的属性,这是为了释放内存,避免过多无用属性浪费内存。
- var myObj = {};
- // hasData用来判断HTMLElement或JS对象是否具有数据
- console.log(jQuery.hasData($("#a")));// false
- // data()添加属性
- $.data(myObj, 'name', 'aty');
- console.log(jQuery.hasData(myObj));// true
- // data()读取属性
- console.log($.data(myObj, 'name'));//aty
- // removeData删除属性
- $.removeData(myObj, 'name');
- console.log($.data(myObj, 'name'));//undefined
- // 如果所有属性都被删除,那么hasData返回false
- console.log(jQuery.hasData(myObj));// false
给HTMLElement对象添加属性,使用方式跟为普通js对象添加属性一模一样。
- <div id="content"></div>
- <script>
- var el = document.getElementById('content');
- $.data(el, 'name', 'aty');
- console.log($.data(el, 'name')); // aty
- </script>
可以看到使用jQuery数据缓存的API是很容易的,现在我们要大致看下jQuery是如何实现缓存方案。为普通JS对象提供缓存时,jquery直接将数据保存在原始的JS对象上。此时会偷偷的给JS对象添加个属性(类似于jQuery16101803968874529044),属性值也是一个对象。
- var myObj = {};
- $.data(myObj, 'name', 'aty');
- console.log(myObj);
- console.log($.expando);
我们可以看到myObj结构发生了变化:jquery给普通对象偷偷添加的属性名称其实就是$.expando。
jQuery.expando是一个字符串,使用Math.random生成,去掉了非数字字符。它作为HTMLElement或JS对象的属性名。页面引入jQuery框架的时候,会随机生成一个字符串。
- expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),
现在我们知道了jQuery如何给普通对象添加属性,以及expando的含义,那么我们就可以通过下面的代码获取添加的属性。
- var hisObj = {};
- $.data(hisObj, 'name', 'him');
- console.log(hisObj[jQuery.expando].data.name);//him
为HTMLElement提供缓存时,却不会直接保存在HTMLElement上。而是保存在jQuery.cache这个全局对象上。此时先给HTMLElement添加属性(jQuery.expando),属性值为数字(1,2,3递增)。即只将一些数字保存在了HTMLElement上,不会直接将数据置入。这是因为IE老版本中可能会存在内存泄露危险。而HTMLElement如何与jQuery.cache建立联系呢? 还是id。刚刚提到属性值数字就是id。
- <div id="a"></div>
- <script>
- var dom = document.getElementById("a");
- $.data(dom, 'name', 'aty');
- console.log(dom[jQuery.expando]); // 1
- console.log(jQuery.cache); // {1 : {data:{name:'aty'}}}
- </script>
知道了jQuery如何为dom对象添加属性,我们就可以通过下面的代码获取属性。
- console.log(jQuery.cache[dom[jQuery.expando]].data.name);
现在我们看下DOM对象和jQuery封装后的对象有什么区别。
- // 给dom元素添加数据
- var dom = document.getElementById("a");
- $.data(dom, 'name', 'aty');
- console.log(jQuery.hasData(dom));//true
- console.log($.data(document.getElementById("a"), 'name'));//aty
- console.log($.data($("#a")[0], 'name'));//aty
- // 给jquery包装后的dom附加对象
- var $dom = $("#a");
- $.data($dom, 'age', '25');
- console.log(jQuery.hasData($dom));//true
- console.log($.data($dom, 'age'));//25
- console.log($.data($("#a"), 'age'));//undefined
这是因为本质区别在于:原始的DOM对象会被jQuery特殊对待,而jQuery包装后的对象与普通JS对象无异。通过jQuery选择器每次获取的对象并不是同一个对象。
- var $dom = $("#a");
- $.data($dom, 'age', '25');
- // dom对象支持多次获取,jQuery对象不支持
- console.log( document.getElementById("a") === document.getElementById("a"));///true
- console.log( document.getElementById("a") === $("#a")[0]);///true
- console.log($("#a") === $("#a"));//false
- // jQuery包装后的对象,与普通javascript对象无异
- console.log($dom[jQuery.expando].data.age);//25
最后再提一下,可以使用$.data获取某个对象上附加的所有属性。
- var $dom = $("#a");
- $.data($dom, 'age', '25');
- console.log($.data($dom));//Object {age: "25"}
参考文章:
读jQuery之六(缓存数据)
jQuery数据缓存方案详解:$.data()的使用的更多相关文章
- jquery源码解析:jQuery数据缓存机制详解2
上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析,这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的.我们接下来,来看这几个静态方法和实例方法的源码解 ...
- jquery源码解析:jQuery数据缓存机制详解1
jQuery中有三种添加数据的方法,$().attr(),$().prop(),$().data().但是前面两种是用来在元素上添加属性值的,只适合少量的数据,比如:title,class,name等 ...
- java——包装类数据缓存 ==号详解
Java对部分经常使用的数据采用缓存技术,即第一次使用该数据则创建该数据对象并对其进行缓存, 当再次使用等值对象时直接从缓存中获取,从而提高了程序执行性能.(只对常用数据进行缓存) Java中只是对部 ...
- Oracle DataGuard数据备份方案详解
Oracle DataGuard是一种数据库级别的HA方案,最主要功能是冗灾.数据保护.故障恢复等. 在生产数据库的"事务一致性"时,使用生产库的物理全备份(或物理COPY)创建备 ...
- HTML5数据存储方案data与jQuery数据存储方案$.data()的区别
我们先看下$.fn.data()的使用,这个和$.data()是不一样的,前者是和某个jquery对象相关,后者则是全局方法.主要有data()和removeData()这2个实例方法.通过下面的例子 ...
- jQuery数据缓存data(name, value)详解及实现
一. jQuery数据缓存的作用 jQuery数据缓存的作用在中文API中是这样描述的:“用于在一个元素上存取数据而避免了循环引用的风险”.如何理解这句话呢,看看我下面的举例,不知道合不合适,如果你有 ...
- jQuery源代码学习之六——jQuery数据缓存Data
一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所 ...
- jQuery数据缓存$.data 的使用以及源码解析
一.实现原理: 对于DOM元素,通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来,关联id被附加到以jQuery.expando的值命名的属性上,数据存储在全局缓存对象jQu ...
- 触碰jQuery:AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
随机推荐
- 多个文件下载打包生成zip格式下载
这个多个文件下载生成zip格式必须先引用一个ICSharpCode.SharpZipLib.dll. 代码如下 //将多个文件打包成压缩文件zip格式下载 protected voi ...
- 软工实践——github文件整理
软工实践中,整理github上文件遇到的一些问题 先扔github链接Transcend/ActivityHelper 1.原来呢我们团队的github上的文件的安排十分凌乱,没有归档.把说明文档.源 ...
- POJ 2226二分图最大匹配
匈牙利算法是由匈牙利数学家Edmonds于1965年提出,因而得名.匈牙利算法是基于Hall定理中充分性证明的思想,它是二部图匹配最常见的算法,该算法的核心就是寻找增广路径,它是一种用增广路径求二分图 ...
- Struts的jar说明
- webbrower判断页面是否加载完成的好方法
public void WaitPageCompleted(int timeOutSec) { ; ; j < timeOutSec * ; j++) { _wb.Invoke(new Acti ...
- grep-2.26 sed-4.2.2 awk-4.1.4 wget-1.18 pcregrep-8.39 pcre2grep-10.22 for windows 最新版本静态编译
-------------------------------------------------------------------------------------------- grep (G ...
- 通过挂载系统光盘搭建本地yum仓库的方法
在CentOS系统中,我们常常会安装大量的软件,但许多软件包都存在需要依赖性,当然我们可以通过一一安装依赖包来完成安装,但对于有些软件包需要大量的依赖包,再一一安装起来会显得特别麻烦.接下来我们就来讲 ...
- QQ聊天界面模式切换
1.打开一个聊天窗口 2.按照图上步骤 3.模式 3-1气泡模式 3-2文本模式
- CentOS7 cacti 安装
首先centos7 web环境的安装这里就不说了.安装cacti,首先得web环境配置好 其次添加两个用户,一个是cacti用于操作mysql的 cactimysql 一个是cacti操作Linux ...
- zend studio 13.5破解以及集成xdebug
环境说明: 操作系统:Windows 7 Ultimate Edition Service Pack 1 PHP:7.0.11 TS Zend Studio:13.5.0 Xdebug:2.5.0 一 ...