作者：Jiang, Jinlin
在我们使用jQuery中，会用到$(element).data()方法存取赋值到元素上的数据。通过该方法，我们每次通过selector获取该元素时，总能获取其赋值的数据。今天，我们就来看看jQuery是如何实现的。
首先，我们先从data方法看起：
data方法接受两种参数形式，第一种通过key,value形式将数据赋值于元素之上。第二种通过key形式获取赋值的数据。（其中，如果key为空则导出所有key-value map）
通过data方法不但可以获取通过data本身传入的数据，也可以直接获取元素上直接[data-*]形式赋值的数据。接下来，就让我们看一看jQuery的源代码实现（我会在代码中进行标注，当然如果你不愿意看细节，之后会有一个图示来标示jQuery的数据赋值）：
| jQuery.fn.extend({ data: function( key, value ) { var i, name, data, elem = this[0], // 如果存在元素则获取它的attributes属性 attrs = elem && elem.attributes;
// Special expections of .data basically thwart jQuery.access, // so implement the relevant behavior ourselves
// Gets all values // 如果没有设定key，则将元素包含数据全部导出 if ( key === undefined ) { if ( this.length ) { // 获取元素数据，之后会进入分析 data = jQuery.data( elem );
// nodeType属性用于获取类型，其中1为DOM元素类型。因而其只会返回dom元素赋值的数据 // _data为内部使用方法，之后将会详细介绍 if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) { i = attrs.length; while ( i-- ) {
// Support: IE11+ // The attrs elements can be null (#14894) if ( attrs[ i ] ) { name = attrs[ i ].name; // 检查是否存在以data-开头的属性 if ( name.indexOf( "data-" ) === 0 ) { // 使用驼峰法表示属性名，例如data-user-mail，将会被转成userMail name = jQuery.camelCase( name.slice(5) ); // 获取[data-*]值并赋值数据 dataAttr( elem, name, data[ name ] ); } } } // 标示该元素已经获取了[data-*]值，之后添加的 |
