jquery中的 $.data() 和 $dom.data() 区别

Posted 2021-04-08 jQuery每日经典

先来解一道题
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 === undefined ||
        ( ( key && typeof key === "string" ) && value === undefined ) ) {
	    return this.get( owner, key );
    }

    this.set( owner, key, value );
    return value !== 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'}。