jquery中的 $.data() 和 $dom.data() 区别
jquery中的 $.data() 和 $dom.data() 区别
用户7293182
发布于 2022-01-17 21:44:16
发布于 2022-01-17 21:44:16
先来解一道题 HTML：
<div id="myDiv" data-x="x-value"></div>JavaScript：
console.log( $.data( $div.get(0) ) );
console.log( $div.data() );
console.log( $.data( $div.get(0) ) );data 方法的定义是：
这里只从 jQuery 的源码分析入手，版本是3.2.1
1. $.data() 方法
data: function( elem, name, data ) {
return dataUser.access( elem, name, data );
},其中 dataUser 是一个Data() 对象，Data对象没有任何特殊的地方。
access 方法：
access: function( owner, key, value ) {
if ( key === ?developer/article/1935805/undefined ||
( ( key && typeof key === "string" ) && value === ?developer/article/1935805/undefined ) ) {
return this.get( owner, key );
}this.set( owner, key, value );
return value !== ?developer/article/1935805/undefined ? value : key;
},可以看到，$.data(ele) 只会去读取dataUser 结构中存在的数据，而不会去读dom 节点上的 Data 属性相关值。所以，暂时可以认为第一个输出和第二个输出都是一个空对象。
2. $Dom.data();
data: function( key, value ) {
var i, name, data,elem = this[ 0 ],
attrs = elem && elem.attributes;
......
return data;
......
}
},省略绝大部分代码，可以看到，该方法去读取了元素的 attribute，最后返回的 data 会是在attribute 属性中获得的。所以，第二句打印出来的是{x:"x-value"}.
除此之外，它还会 在 dataUser 的 Cache 中存入此次读出来的 data 数据。所以，第三句打印出来的也应该是{x:'x-value'}。
本文参与?腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2017-07-31，如有侵权请联系?cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读