jQuery 源码分析笔记(6) jQuery.data


Posted in Javascript onJune 08, 2011

data部分的代码从1381行开始。最开始的几行关键代码:

jQuery.extend({ 
// 存储数据的地方,关键实现核心 
cache: { }, 
// 分配ID用的seed 
uuid: 0, 
// 为了区别不同的jQuery实例存储的数据,使用前缀+jQuery版本号+随机数作为Key 
expando: "jQuery" + (jQuery.fn.jquery + Math.random()).replace(/\D/g, ""), 
// 以下元素没有Data:embed和applet(这玩意还活着么),除了Flash之外的object。 
noData: { 
"embed": true, 
"object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000", 
"applet": true 
} 
});

对外的接口都调用了两个内部函数:jQuery.data(elem, name, data, pvt)和jQuery.removeData(elem, name, pvt)。而removeData的逻辑与data类似,只是data是加入数据,而removeData使用delete或者设置为null删除数据。
data部分的代码中明确区分了JS对象和DOM对象的保存,这是为了解决部分浏览器的内存泄漏问题。在低版本IE中,当DOM和JS对象之间出现循环引用时,GC就无法正确处理。参见Understanding and Solving Internet Explorer Leak Patterns。至于COM对象,因为已经限制object元素没有data,就绕过了这个问题。
data: function(elem, name, data, pvt) { 
// 如果属于noData中定义的元素 
if(!jQuery.acceptData(elem)) { 
return; 
} 
var internalKey = jQuery.expando, 
getByName = typeof name === "string", 
thisCache, 
isNode = elem.nodeType, 
// DOM元素需要保存在Cache,JS对象直接保存到elem 
cache = isNode ? jQuery.cache : elem, 
// 如果elem的jQuery.expando已经有值了,就重用 
id = isNode ? elem[jQuery.expando] : elem[jQuery.expando] && jQuery.expando; 
<PRE class=brush:;gutter:true;><CODE>// data未定义,说明当前调用是查询数据,但是对象没有任何数据,直接返回 
if((!id || (pvt && id && !cache[id][internalKey])) && getByName && data === undefined) { 
return; 
} 
if(!id) { 
if(isNode) { 
// 用uuid种子递增分配唯一ID,只有DOM元素需要。因为需要存在全局cache中 
elem[jQuery.expando] = id = ++jQuery.uuid; 
} else { 
id = jQuery.expando; 
} 
} 
// 清空原来的值 
if(!cache[id]) { 
cache[id] = {}; 
if(!isNode) { 
cache[id].toJSON = jQuery.noop; 
} 
} 
// 用extend扩展cache,增加一个属性,用来保存数据 
if(typeof name === "object" || typeof name === "function") { 
if(pvt) { 
cache[id][internalKey] = jQuery.expand(cache[id][internalKey], name); 
} else { 
cache[id] = jQuery.extend(cache[id], name); 
} 
} 
thisCache = cahce[id]; 
// 避免Key冲突 
if(pvt) { 
if(!thisCache[internalKey]) { 
thisCahce[internalKey] = {}; 
} 
thisCache = thisCache[internalKey]; 
} 
if(data !== undefined) { 
thisCache[jQuery.camelCase(name)] = data; 
} 
return getByName ? thisCache[jQuery.camelCase(name)] : thisCache; 
} 
removeData: function( elem, name, pvt ) { // 前面部分与data类似 // ... // 部分浏览器不支持在Element上进行delete操作,在jQuery.support中检查过这个浏览器特性。 // 如果delete失败的话,就先设置成null。 if ( jQuery.support.deleteExpando || cache != window ) { delete cache[ id ]; } else { cache[ id ] = null; } 
<PRE class=brush:;gutter:true;><CODE>var internalCache = cache[ id ][ internalKey ]; 
// 如果还有数据,就清空一次再设置,增加性能 
if ( internalCache ) { 
cache[ id ] = {}; 
cache[ id ][ internalKey ] = internalCache; 
// 已经没有任何数据了,就全部删除 
} else if ( isNode ) { 
// 如果支持delete,就删除。 
// IE使用removeAttribute,所以尝试一次。再失败就只能设置为null了。 
if ( jQuery.support.deleteExpando ) { 
delete elem[ jQuery.expando ]; 
} else if ( elem.removeAttribute ) { 
elem.removeAttribute( jQuery.expando ); 
} else { 
elem[ jQuery.expando ] = null; 
} 
} 
}
Javascript 相关文章推荐
JS 动态加载脚本的4种方法
May 05 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 #Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 #Javascript
精通Javascript系列之数据类型 字符串
Jun 08 #Javascript
精通Javascript系列之Javascript基础篇
Jun 07 #Javascript
精通Javascript系列之数值计算
Jun 07 #Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 #Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 #Javascript
You might like
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
js动态引入的四种方法
2018/05/05 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
django上传图片并生成缩略图方法示例
2017/12/11 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
深入浅析python的第三方库pandas
2020/02/13 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
Django视图类型总结
2021/02/17 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
运动会口号大全
2014/06/07 职场文书
战友聚会策划方案
2014/06/13 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
组织生活会发言材料
2014/12/15 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书