读jQuery源码 jQuery.data
var rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/,
rmultiDash = /([A-Z])/g;
function internalData( elem, name, data, pvt /* Internal Use Only */ ){
//如果elem元素不能附加值,退出
if ( !jQuery.acceptData( elem ) ) {
return;
}
// ## form core.js
// Unique for each copy of jQuery on the page
// Non-digits removed to match rinlinejQuery
// expando: "jQuery" + ( core_version + Math.random() ).replace( /\D/g, "" ),
// 每个Jquery都有单独的一个expando
var ret, thisCache,
internalKey = jQuery.expando,
// We have to handle DOM nodes and JS objects differently because IE6-7
// can't GC object references properly across the DOM-JS boundary
// 由于IE6,7不能自动回收再DOM上的引用,所以要对DOM和JS对象区别对待
isNode = elem.nodeType,
// Only DOM nodes need the global jQuery cache; JS object data is
// attached directly to the object so GC can occur automatically
// 只有DOM需要全局的缓存变量,对象就直接插入值了
cache = isNode ? jQuery.cache : elem,
// Only defining an ID for JS objects if its cache already exists allows
// the code to shortcut on the same path as a DOM node with no cache
id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey;
// 什么时候会出现id为undefined的时候?
// internalData(document.createElement('div'),'namea',...)
// internalData({});
// Avoid doing any more work than we need to when trying to get data on an
// object that has no data at all
if ( (!id || !cache[id] || (!pvt && !cache[id].data)) && data === undefined && typeof name === "string" ) {
return;
}
// 如果有name而没有data,说明这是一个读取的动作
// 但是没有得到id,获取cache[id]中啥都没有,在获取用户数据的时候cache[id].data啥都木有,就返回空
if ( !id ) {
// Only DOM nodes need a new unique ID for each element since their data
// ends up in the global cache
// 如果是DOM元素,则取得一个唯一的ID值
if ( isNode ) {
id = elem[ internalKey ] = core_deletedIds.pop() || jQuery.guid++;
} else {
id = internalKey; //这是jQuery.expando
}
}
if ( !cache[ id ] ) {
// Avoid exposing jQuery metadata on plain JS objects when the object
// is serialized using JSON.stringify
// 避免只用JSON.stringify(cache[id]) 所带来的循环引用
cache[ id ] = isNode ? {} : { toJSON: jQuery.noop };
}
// An object can be passed to jQuery.data instead of a key/value pair; this gets
// shallow copied over onto the existing cache
// 也可以穿一个jQuery.data,浅拷贝过来
// jQuery.data({},{name:'hhstuhacker',age:31})
// cache[id] = {data:{name:'hhstuhacker',age:31}};
// cache[ id ]存入的是jQuery的内部数据
// cache[ id ].data 存入的是用户数据
// 若果pvt为真,就拷贝到cache[ id ]里
// 若果pvt为false,就拷贝到cache[ id ].data 里
if ( typeof name === "object" || typeof name === "function" ) {
if ( pvt ) {
cache[ id ] = jQuery.extend( cache[ id ], name ); //直接拷贝,内部使用
} else {
cache[ id ].data = jQuery.extend( cache[ id ].data, name ); //直接拷贝data
}
}
thisCache = cache[ id ];
// jQuery data() is stored in a separate object inside the object's internal data
// cache in order to avoid key collisions between internal data and user-defined
// data.
// jQuery.cache = {jQuery.expando: {data:{}}};
// 这里是为了防止内部数据跟用户定义的数据项混淆,内部数据定义在jQ.cache里,用户定义数据在jQ.cache.[id] 里
if ( !pvt ) {
if ( !thisCache.data ) {
thisCache.data = {};
}
thisCache = thisCache.data;
}
// 分情况了,如果传入了键值对,就设置之
// 将camelCase驼峰
if ( data !== undefined ) {
thisCache[ jQuery.camelCase( name ) ] = data;
}
// Check for both converted-to-camel and non-converted data property names
// If a data property was specified
// 不管是否读取还是设置缓存,都会返回数据
// 先尝试直接获取,如果获取不成功,就尝试驼峰式获取
// 如果连name都没有指定,就获取整个thisCache对象
if ( typeof name === "string" ) {
// First Try to find as-is property data
ret = thisCache[ name ];
// Test for null|undefined property data
if ( ret == null ) {
// Try to find the camelCased property
ret = thisCache[ jQuery.camelCase( name ) ];
}
} else {
ret = thisCache;
}
return ret;
}
function internalRemoveData( elem, name, pvt ) {
if ( !jQuery.acceptData( elem ) ) { //如果elem元素不能附加值,退出
return;
}
var thisCache, i,
isNode = elem.nodeType,
// See jQuery.data for more information
cache = isNode ? jQuery.cache : elem,
id = isNode ? elem[ jQuery.expando ] : jQuery.expando;
// If there is already no cache entry for this object, there is no
// purpose in continuing
// 如果没有得到cache[ id ] 那就不进行了
if ( !cache[ id ] ) {
return;
}
if ( name ) {
thisCache = pvt ? cache[ id ] : cache[ id ].data;
if ( thisCache ) {
// Support array or space separated string names for data keys
// $.removeData(element,['title','age','createTime']);
// $.removeData(element,'title age createTime');
if ( !jQuery.isArray( name ) ) {
// try the string as a key before any manipulation
if ( name in thisCache ) {
name = [ name ];
} else {
// split the camel cased version by spaces unless a key with the spaces exists
// 检测是否驼峰式在其中,如果不在,将其split
name = jQuery.camelCase( name );
if ( name in thisCache ) {
name = [ name ];
} else {
name = name.split(" ");
}
}
} else {
// 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 = name.concat( jQuery.map( name, jQuery.camelCase ) );
// 将不驼峰和驼峰的全部删除
}
//删除之
i = name.length;
while ( i-- ) {
delete thisCache[ name[i] ];
}
// If there is no data left in the cache, we want to continue
// and let the cache object itself get destroyed
// 如果说删除过后,cache[id]或者cache[id].data 都是空了,那么咱们需要清理下一步吧?
if ( pvt ? !isEmptyDataObject(thisCache) : !jQuery.isEmptyObject(thisCache) ) {
return;
}
}
}
// See jQuery.data for more information
// 如果是用户使用的话,清空cache[id].data
// 如果cache [ id ] 不是空的话,结束该函数
// 如果cahce [ id ] 是空的话,还是下一步的清理行动啊
if ( !pvt ) {
delete cache[ id ].data;
// Don't destroy the parent cache unless the internal data object
// had been the only thing left in it
if ( !isEmptyDataObject( cache[ id ] ) ) {
return;
}
}
// window.window === window;
// isWindow: function (o) {return o.window === window;}
// cache != cache.window 表示不是window
// Destroy the cache
// 如果是个DOM节点,那么cleanData
if ( isNode ) {
jQuery.cleanData( [ elem ], true );
// ses: http://www.cnblogs.com/enein/archive/2012/08/23/2651312.html
// Use delete when supported for expandos or `cache` is not a window per isWindow (#10080)
// 经测试,在IE6,7,8下面,var div = document.createElement('div') delete div.test;
// 是报错的 而 jQuery.support.deleteExpando 正是这种检测
} else if ( jQuery.support.deleteExpando || cache != cache.window ) {
delete cache[ id ];
// When all else fails, null
} else {
cache[ id ] = null;
}
}
jQuery.extend({
cache: {},
// The following elements throw uncatchable exceptions if you
// attempt to add expando properties to them.
// 这几个元素不能有附加值
noData: {
"applet": true,
"embed": true,
// Ban all objects except for Flash (which handle expandos)
"object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
},
hasData: function( elem ) {
elem = elem.nodeType ? jQuery.cache[ elem[jQuery.expando] ] : elem[ jQuery.expando ];
return !!elem && !isEmptyDataObject( elem );
},
data: function( elem, name, data ) {
return internalData( elem, name, data );
},
removeData: function( elem, name ) {
return internalRemoveData( elem, name );
},
// For internal use only.
// 内部适用,这里设置pvt为true,返回内部数据,定位到cache[id]这一层
_data: function( elem, name, data ) {
return internalData( elem, name, data, true );
},
// 内部适用,这里设置pvt为true,返回内部数据,定位到cache[id]这一层
_removeData: function( elem, name ) {
return internalRemoveData( elem, name, true );
},
// A method for determining if a DOM node can handle the data expando
acceptData: function( elem ) {
// Do not set data on non-element because it will not be cleared (#8335).
// 如果是个dom节点,并且不是element也不是document,那就表示不能被附加数据
// see:http://www.cnblogs.com/hhstuhacker/p/NodeType.html
if ( elem.nodeType && elem.nodeType !== 1 && elem.nodeType !== 9 ) {
return false;
}
var noData = elem.nodeName && jQuery.noData[ elem.nodeName.toLowerCase() ];
// nodes accept data unless otherwise specified; rejection can be conditional
// 如果是embed或者applet,或者是flash元素,就返回false
// about falsh:: http://www.w3help.org/zh-cn/causes/HO8001
return !noData || noData !== true && elem.getAttribute("classid") === noData;
}
});
jQuery.fn.extend({
data: function( key, value ) {
var attrs, name,
data = null,
i = 0,
elem = this[0];
// Special expections of .data basically thwart jQuery.access,
// so implement the relevant behavior ourselves
// Gets all values
// 如果key为undefined,那就表示要取得所有的data
if ( key === undefined ) {
if ( this.length ) {
data = jQuery.data( elem ); //默认取第一个
// 看看cache内部是否已经解析过该DOM了,parsedAttrs
// 如果没有,得到属性列表
if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) {
attrs = elem.attributes;
for ( ; i < attrs.length; i++ ) {
name = attrs[i].name;
if ( name.indexOf("data-") === 0 ) {
name = jQuery.camelCase( name.slice(5) );
//这里的data[ name ]为空值
dataAttr( elem, name, data[ name ] );
}
}
//标记已经解析过了
jQuery._data( elem, "parsedAttrs", true );
}
}
return data;
}
// Sets multiple values
// 如果是个对象,递归调用之
if ( typeof key === "object" ) {
return this.each(function() {
jQuery.data( this, key );
});
}
return arguments.length > 1 ?
// Sets one value
this.each(function() {
jQuery.data( this, key, value );
}) :
//$('.color-box').data('someone','new');
// Gets one value
// Try to fetch any internally stored data first
elem ? dataAttr( elem, key, jQuery.data( elem, key ) ) : null;
//$('#box').data('dataFirst');
// <div data-data-first="something....."></div>
},
removeData: function( key ) {
return this.each(function() {
jQuery.removeData( this, key );
});
}
});
function dataAttr( elem, key, data ) {
// If nothing was found internally, try to fetch any
// data from the HTML5 data-* attribute
//这个函数,主要是处理HTML5的问题
if ( data === undefined && elem.nodeType === 1 ) {
// 驼峰反转
var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
data = elem.getAttribute( name );
// rbrace 对象或者数组正则
if ( typeof data === "string" ) {
try {
data = data === "true" ? true :
data === "false" ? false :
data === "null" ? null :
// Only convert to a number if it doesn't change the string
+data + "" === data ? +data :
rbrace.test( data ) ? jQuery.parseJSON( data ) :
data;
} catch( e ) {}
// Make sure we set the data so it isn't changed later
jQuery.data( elem, key, data );
//设置进去
} else {
data = undefined;
}
}
return data;
}
// checks a cache object for emptiness
function isEmptyDataObject( obj ) {
var name;
for ( name in obj ) {
// if the public data object is empty, the private is still empty
// 如果cache.data 为空,跳过本次循环,不判断了
// 如果不跳过啊,就走到下面了吧,name !== data 杠杠的
if ( name === "data" && jQuery.isEmptyObject( obj[name] ) ) {
continue;
}
//toJSON是内置的,如果看到其他name,就不为空
if ( name !== "toJSON" ) {
return false;
}
}
return true;
}
jQuery的版本为1.9.2
读jQuery源码 jQuery.data的更多相关文章
- 读Zepto源码之Data模块
Zepto 的 Data 模块用来获取 DOM 节点中的 data-* 属性的数据,和储存跟 DOM 相关的数据. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading ...
- jquery源码'jQuery.fn.init.prototype'
一般我们在创建构造函数即使用的时候会这样写,使用的时候会使用new 关键字,先实例化,然后使用. function test(name, age) { this.name = name; this.a ...
- jQuery源码04 data() : 数据缓存
/* Implementation Summary 1. Enforce API surface and semantic compatibility with 1.9.x branch 2. Imp ...
- jQuery源码-jQuery.fn.attr与jQuery.fn.prop
jQuery.fn.attr.jQuery.fn.prop的区别 假设页面有下面这么个标签,$('#ddd').attr('nick').$('#ddd').prop('nick')分别会取得什么值? ...
- JQuery源码-------JQuery中数值型变量的判断isNumeric
判断一个数值型变量的方法,在jquery中非常简单,只有一行代码. isNumeric: function( obj ) { // parseFloat NaNs numeric-cast false ...
- jquery 源码解析
静态与实力方法共享设计 遍历方法 $(".a").each() //作为实例方法存在 $.each() //作为静态方法存在 Jquery源码 jQuery.prototype = ...
- jQuery源码解析资源便签
最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...
- jQuery源码中的“new jQuery.fn.init()”什么意思?
所有文章搬运自我的个人主页:sheilasun.me 引子 最近打算试试看看jQuery的源码,刚开个头就卡住了.无论如何都理解不了jQuery源码入口部分中的 return new jQuery.f ...
- 读jQuery源码之整体框架分析
读一个开源框架,大家最想学到的就是设计的思想和实现的技巧.最近读jQuery源码,记下我对大师作品的理解和心得,跟大家分享,权当抛砖引玉. 先附上jQuery的代码结构. (function(){ / ...
随机推荐
- Silverlight学习(五)图形标绘
Silverlight中进行图形标绘的方法太多了,这里的标绘和Arcgis中的标绘不同,这里大多是静态的标绘.标绘的方法主要有Path(路径标记法).直接标绘(Line等).几何标记(LineGeom ...
- Spring学习之Ioc控制反转(2)
开始之前: 1. 本博文为原创,转载请注明出处 2. 作者非计算机科班出身,如有错误,请多指正 ---------------------------------------------------- ...
- Subsets,Subsets II
一.Subsets Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a s ...
- zoj1108 FatMouse's Speed
给你每个物体两个参数,求最长的链要求第一个参数递增,第二个参数递减,要求输出任意最长路径. 首先第一反应根据第二个参数排个序,然后不就是最长上升子序列的问题吗? O(nlogn)的复杂度,当然这样可以 ...
- Python的基础--对象
对象(Objects)是python中数据的抽象,python中所有的数据均可以用对象或者是对象之间的关系来表示.每个对象均有标识符(identity).类型(type).值(value). 标识符. ...
- PHP发红包程序
//红包算法$total = 20; //红包总金额$num = 10; //红包个数$min = 0.01; //每个人最少能收到0.01 for ($i=1;$i<$num; ...
- 查看当前运行的SQL语句
WITH sess AS ( SELECT es.session_id, database_name = DB_NAME(er.database_id), er.cpu_time, er.reads, ...
- 有趣的keil MDK细节
1.MDK中的char类型的取值范围是? 在MDK中,默认情况下,char 类型的数据项是无符号的,所以它的取值范围是0-255.它们可以显式地声明为signed char 或 unsigned.因此 ...
- ubuntu_安装aptana3
下面记录下偶怎么安装aptana3(aptana2应该也适用). 安装java运行时,偷看这里 说明:实际上偶并没有执行这步,因为发现在安装aptana3之前 java的运行时已经安装过了. 貌似是安 ...
- 利用netstat和tasklist查看PC的端口占用情况
经常,我们在启动应用的时候发现系统需要的端口被别的程序占用,如何知道谁占有了我们需要的端口? 1.Windows平台在windows命令行窗口下执行: E:\oracle\ora92\bin>n ...