对 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 相关文章推荐
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
通过循环优化 JavaScript 程序
Jun 24 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
浅谈 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
php入门教程 精简版
2009/12/13 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
js 获取input点选按钮的值的方法
2014/04/14 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
python mysqldb连接数据库
2009/03/16 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python中常见的异常总结
2018/02/20 Python
python多任务及返回值的处理方法
2019/01/22 Python
set在python里的含义和用法
2019/06/24 Python
python nmap实现端口扫描器教程
2020/05/28 Python
Python函数中的可变长参数详解
2019/09/12 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Python hashlib模块的使用示例
2020/10/09 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
专科应届毕业生求职信
2014/06/04 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
工作收入住址证明
2014/10/28 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers