对 jQuery 中 data 方法的误解分析


Posted in Javascript onJune 18, 2014

今天 谢亮 兄弟和我讨论一个东西的时候,谈到了性能,他用的是 attr 操作自定义属性 data-uid,我说用 data 好,因为是 dataset 实现,然后他去翻了下 jQuery 源码和我说,没有发现这个东西,我就纳闷了。于是我去仔细读了下 data 方法的源码,才发现我一直误会了,再此,向之前问我 data 方法的群友道歉,我 "骗" 了你们,你们来打我吧。

今天我就重新解释下 data 方法,先看下 jQuery 1.11.0 的手册里肿么说的吧,请移步至http://shouce.3water.com/jquery/data.html、
用法这里说的很清楚了,但是内部是怎么实现的呢? 戳我看源码  (看不懂没关系,我会简单分析下他的流程)

其实是这样的,当我们执行例如这样的语句时 $("#id").data("test"); (简化后的过程) 
第一步: jQuery 会获取到 $("#id") 元素,对吧、 
第二步: 执行到 data方法 的时候,他会通过 attributes 取我们要的对应值。 
第三步: 返回结果给我们,然后 jQuery 把值缓存到内部对象里 
第一次取的时候,我们可以得到的 undefined,字符串,数字或者解析后的json。 
 
那有人会说这个和 attr 有什么区别呢? 
当我们第二次执行 $("#id").data("test"); 的时候: 
第一步: jQuery 会获取到 $("#id") 元素,和上面一样。 
第二步: 执行到 data方法 的时候,从 jQuery 的缓存中取值 
第三步: 返回结果给我们 
 
发现第二步不同了,对吧,为什么不是从 attributes 取值,而是从缓存中取呢? 
缓存其实是js的对象,简单说就类似 var cache = {}; jQuery 在第一次取值之后就会保存到这个缓存对象中,这样我们再次操作的时候就非常快了、 
往往性能的损耗都是在 dom 操作上,所以避免重复操作 dom 是非常必要的。 
 
到这,也能看出他和 attr 最大的区别了,比如 <div id="id" data-test="hehe"></div> 
$("#id").data("test", "123"); 执行后依然是 data-test="hehe"
$("#id").attr("data-test", "123"); 执行后会是 data-test="123"
 
那么我们要给一个元素赋值值,或者对象的时候他们有什么区别呢?比如 <div id="id" data-test="hehe"></div> 
$("#id").data("test", {str: "hehe"}); 会把 {str: "hehe"} 赋值给 缓存,元素节点上依然是 data-test="hehe"
$("#id").attr("data-test", {str: "hehe"}); 执行后会是 data-test="[object Object]"
这个应该也有不少人遇到,至少群里有不少人问过这个问题。

其实我之前也没骗你们,自定义属性没必要老是 attr 他,data 是 jQuery 赋予我们的一把瑞士军刀,非常锋利的。

好了,我是懒人,懒的配图,已经写了不少字了,如果有什么说的不对的地方,你们来打我吧

Javascript 相关文章推荐
三级下拉菜单的js实现代码
May 23 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
详解Puppeteer 入门教程
May 09 Javascript
小程序实现多选框功能
Oct 30 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
正则表达式基础与常用验证表达式
Jun 16 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 #Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 #Javascript
js调试系列 控制台命令行API使用方法
Jun 18 #Javascript
js调试系列 初识控制台
Jun 18 #Javascript
ext前台接收action传过来的json数据示例
Jun 17 #Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 #Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 #Javascript
You might like
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
php提交post数组参数实例分析
2015/12/17 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
python中反射用法实例
2015/03/27 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
刘胡兰的英雄事迹材料
2014/02/11 职场文书
学校文明单位申报材料
2014/05/06 职场文书
企业整改报告范文
2014/11/08 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
请客吃饭开场白
2015/06/01 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android