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 相关文章推荐
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
JS实现扫雷项目总结
May 19 Javascript
js前端图片加载异常兜底方案
Jun 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
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
手机端转换rem适应
2017/04/01 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
什么是唯一索引
2015/07/05 面试题
股权转让协议书范本
2014/04/12 职场文书
事业单位考察材料范文
2014/12/25 职场文书
单位介绍信格式范文
2015/05/04 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
初中历史教学反思
2016/02/19 职场文书
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js