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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
javascript实现控制div颜色
Jul 07 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
node.js 微信开发之定时获取access_token
Feb 07 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
PHP学习记录之数组函数
2018/06/01 PHP
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
妇产科护士自我鉴定
2013/10/15 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
演讲稿格式
2014/04/30 职场文书
工作失职检讨书500字
2014/10/17 职场文书
初中中等生评语
2014/12/29 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS