对 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调试logger组件实现代码
Nov 20 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
vue实现文件上传读取及下载功能
Nov 17 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制作图型计数器的例子
2006/10/09 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
在node中如何使用 ES6
2017/04/22 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
软件测试面试题
2014/01/05 面试题
大专毕业生自我鉴定
2013/11/21 职场文书
工作中个人的自我评价
2013/12/31 职场文书
大学生演讲稿范文
2014/01/11 职场文书
基层工作经历证明
2014/01/13 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
分享几个实用的CSS代码块
2022/06/10 HTML / CSS