jQuery源码之$.data()数据缓存
attr()与prop()
$.data()或者$(selector).data()可以向元素上添加数据，类似于attr()或者prop()方法。但是attr()或者prop()方法容易形成循环引用，造成内存泄露。例如:
require(["math","jquery"],function(math,$){
var obj={
dom:$(".test5")[0],
name:"div"
};
$(".test5").attr("name",obj);
});
模块中的代码就形成了一个循环引用。
原理分析
data()数据缓存会在元素上生成一个属性，该属性是
this.expando = jQuery.expando + Data.uid++;
是一个唯一的，属性的值为 数值：1,2,3...，jquery内部会建立一个对象cache用于缓存数据。
例如：$("#div1").data("name","myDiv")，这时，cache[1]="myDIv"
<div id="div1" jQuery2140289804814383387571="1">
由此可见，使用data()数据缓存，不会造成循环引用。
源码分析
构造函数
function Data() {
// Support: Android<4,
// Old WebKit does not have Object.preventExtensions/freeze method,
// return new empty object instead with no [[set]] accessor
Object.defineProperty( this.cache = {}, 0, {
get: function() {
return {};
}
});
this.expando = jQuery.expando + Data.uid++;
}
Data.uid = 1;
Data.accepts = jQuery.acceptData;
Data()构造函数，函数内部定义了cache属性，cache属性用于缓存数据。Object.defineProperty()是ES5中定义的用于生成或者对象属性，这里get方法用于读取属性值，没有set方法说明该属性是只读的。jQuery.expando是jquery版本号加一个随机数，当调用data()时，会向元素添加属性expando。而Data.uid
作为键值来确定是cache中的哪个值。下面看下acceptData()
jQuery.acceptData = function( owner ) {
// Accepts only:
// - Node
// - Node.ELEMENT_NODE
// - Node.DOCUMENT_NODE
// - Object
// - Any
/* jshint -W018 */
return owner.nodeType === 1 || owner.nodeType === 9 || !( +owner.nodeType );
};该函数只有在DOM元素、document和对象是返回true；
Data原型上的方法
Data.prototype={
key:function(){//.....}, //用于获取键值
set:function(){//......}, //写入值
get:function(){//......}, //读值
access:function(){//......}, //get set的快捷方式
remove:function(){//......}, //删除cache中key对应的值
hasData:function(){//......}, //判断是否有缓存
discard:function(){} //删除cache中的值包括key
}
key()解析：
key: function( owner ) {
// We can accept data for non-element nodes in modern browsers,
// but we should not, see #8335.
// Always return the key for a frozen object.
if ( !Data.accepts( owner ) ) {//如果不是对象、DOM元素或者document对象，就返回0
return 0;
}
var descriptor = {},
// Check if the owner object already has a cache key
unlock = owner[ this.expando ]; //键值
// If not, create one
if ( !unlock ) { //键值不存在，就创建一个
unlock = Data.uid++;
// Secure it in a non-enumerable, non-writable property
try {
descriptor[ this.expando ] = { value: unlock }; //将对象添加到元素上，同时保证对象不能被修改
Object.defineProperties( owner, descriptor );
// Support: Android<4
// Fallback to a less secure definition
} catch ( e ) { //如果不支持就使用extend
descriptor[ this.expando ] = unlock;
jQuery.extend( owner, descriptor );
}
}
// Ensure the cache object
if ( !this.cache[ unlock ] ) { //确保
this.cache[ unlock ] = {};
}
return unlock; //返回键值
},
set()解析：
</pre><pre name="code" class="javascript">set: function( owner, data, value ) {
var prop,
// There may be an unlock assigned to this node,
// if there is no entry for this "owner", create one inline
// and set the unlock as though an owner entry had always existed
unlock = this.key( owner ),//获取键值
cache = this.cache[ unlock ]; //然后cache引用键值对应的对象
// Handle: [ owner, key, value ] args
if ( typeof data === "string" ) { //单个数据赋值操作
cache[ data ] = value;
// Handle: [ owner, { properties } ] args
} else { //
// Fresh assignments by object are shallow copied
if ( jQuery.isEmptyObject( cache ) ) { //如果cache是空对象，直接利用jq的extend方法扩展
jQuery.extend( this.cache[ unlock ], data );
// Otherwise, copy the properties one-by-one to the cache object
} else { //不是空对象想，则利用for in循环添加。
for ( prop in data ) {
cache[ prop ] = data[ prop ];
}
}
}
return cache;
},
get()方法：
get: function( owner, key ) {
// Either a valid cache is found, or will be created.
// New caches will be created and the unlock returned,
// allowing direct access to the newly created
// empty data object. A valid owner object must be provided.
var cache = this.cache[ this.key( owner ) ]; //根据键值来获取值
return key === undefined ? //如果没有入参，则返回整个缓存
cache : cache[ key ];
},
access()方法：
access: function( owner, key, value ) {
var stored;
// In cases where either:
//
// 1. No key was specified
// 2. A string key was specified, but no value provided
//
// Take the "read" path and allow the get method to determine
// which value to return, respectively either:
//
// 1. The entire cache object
// 2. The data stored at the key
//
if ( key === undefined || //如果键值不存在或者键值存在但是值不存在的情况下，就调用get方法
((key && typeof key === "string") && value === undefined) ) {
stored = this.get( owner, key );
return stored !== undefined ?
stored : this.get( owner, jQuery.camelCase(key) );
}
// [*]When the key is not a string, or both a key and value
// are specified, set or extend (existing objects) with either:
//
// 1. An object of properties
// 2. A key and value
//
this.set( owner, key, value ); //设值
// Since the "set" path can have two possible entry points
// return the expected data based on which path was taken[*]
return value !== undefined ? value : key;
},
remove()方法
remove: function( owner, key ) {
var i, name, camel,
unlock = this.key( owner ),
cache = this.cache[ unlock ];
if ( key === undefined ) { //如果没有传入键值，则删掉所有值
this.cache[ unlock ] = {};
} else {
// Support array or space separated string of keys
if ( jQuery.isArray( key ) ) { //如果传入的是数组(可以删除多个值)
// If "name" is an array of keys...
// When data is initially created, via ("key", "val") signature,
// keys will be converted to camelCase.
// Since there is no way to tell _how_ a key was added, remove
// both plain key and camelCase key. #12786
// This will only penalize the array argument path.
name = key.concat( key.map( jQuery.camelCase ) ); 将key值转换为驼峰写法，加到数组中
} else {
camel = jQuery.camelCase( key ); //删除单个
// Try the string as a key before any manipulation
if ( key in cache ) {
name = [ key, camel ];
} else { //入参不再cache中，则看看驼峰写法有没有，如果还没有，去完空格看看是否匹配，如果还没有，返回空
// If a key with the spaces exists, use it.
// Otherwise, create an array by matching non-whitespace
name = camel;
name = name in cache ?
[ name ] : ( name.match( rnotwhite ) || [] );
}
}
i = name.length;
while ( i-- ) {
delete cache[ name[ i ] ]; //删除
}
}
},
hasData()：
hasData: function( owner ) { //如果存在返回true
return !jQuery.isEmptyObject(
this.cache[ owner[ this.expando ] ] || {}
);
},
discard():
discard: function( owner ) {
if ( owner[ this.expando ] ) {
delete this.cache[ owner[ this.expando ] ]; //删除键值对应的对象
}
}
jQ data()工具方法
源码
jQuery.extend({
hasData: function( elem ) {
return data_user.hasData( elem ) || data_priv.hasData( elem ); //调用公开的Data实例或者私有实例上的hasData()方法
},
data: function( elem, name, data ) {
return data_user.access( elem, name, data ); //调用Data实例上的access()方法
},
removeData: function( elem, name ) { //删除元素上的数据缓存
data_user.remove( elem, name );
},
// TODO: Now that all calls to _data and _removeData have been replaced
// with direct calls to data_priv methods, these can be deprecated.
_data: function( elem, name, data ) { //内部使用的的方法
return data_priv.access( elem, name, data );
},
_removeData: function( elem, name ) { //jq内部使用的私有删除方法
data_priv.remove( elem, name );
}
});
实例：
$.data($(".test5")[0],"name","vuturn");
console.log($.data($(".test5")[0],"name")); //vuturn
$.removeData($(".test5")[0],"name");
console.log($.data($(".test5")[0],"name")); //undefined
jq的data()实例方法
jQuery.fn.extend({
data: function( key, value ) {
var i, name, data,
elem = this[ 0 ],
attrs = elem && elem.attributes;
// Gets all values
if ( key === undefined ) { //如果键值不存在
if ( this.length ) { //. 如果选择器的长度大于1
data = data_user.get( elem ); //利用公开的data实例的get方法获取。
if ( elem.nodeType === 1 && !data_priv.get( elem, "hasDataAttrs" ) ) { //如果是DOM元素，且没有hasDataAttr
i = attrs.length; //DOM元素属性的个数
while ( i-- ) {
// Support: IE11+
// The attrs elements can be null (#14894)
if ( attrs[ i ] ) {
name = attrs[ i ].name;
if ( name.indexOf( "data-" ) === 0 ) {
name = jQuery.camelCase( name.slice(5) ); //遍历看看是否有html5自定义属性
dataAttr( elem, name, data[ name ] );
}
}
}
data_priv.set( elem, "hasDataAttrs", true );
}
}
return data;
}
// Sets multiple values
if ( typeof key === "object" ) { //设多个值
return this.each(function() {
data_user.set( this, key );
});
}
return access( this, function( value ) { //调用access设值
var data,
camelKey = jQuery.camelCase( key );
// The calling jQuery object (element matches) is not empty
// (and therefore has an element appears at this[ 0 ]) and the
// `value` parameter was not undefined. An empty jQuery object
// will result in `undefined` for elem = this[ 0 ] which will
// throw an exception if an attempt to read a data cache is made.
if ( elem && value === undefined ) {//如果value不存在，取值
// Attempt to get data from the cache
// with the key as-is
data = data_user.get( elem, key );
if ( data !== undefined ) {
return data;
}
// Attempt to get data from the cache
// with the key camelized
data = data_user.get( elem, camelKey ); //这时是转换为驼峰写法，继续查找
if ( data !== undefined ) {
return data;
}
// Attempt to "discover" the data in
// HTML5 custom data-* attrs
data = dataAttr( elem, camelKey, undefined ); //如果还找不到，则把自定义属性返回
if ( data !== undefined ) {
return data;
}
// We tried really hard, but the data doesn't exist.
return;
}
// Set the data...
this.each(function() {
// First, attempt to store a copy or reference of any
// data that might've been store with a camelCased key.
var data = data_user.get( this, camelKey );
// For HTML5 data-* attribute interop, we have to
// store property names with dashes in a camelCase form.
// This might not apply to all properties...*
data_user.set( this, camelKey, value );
// *... In the case of properties that might _actually_
// have dashes, we need to also store a copy of that
// unchanged property.
if ( key.indexOf("-") !== -1 && data !== undefined ) {
data_user.set( this, key, value );
}
});
}, null, value, arguments.length > 1, null, true );
},
removeData: function( key ) {
return this.each(function() {
data_user.remove( this, key );
});
}
});