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实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
vue之数据交互实例代码
Jun 20 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 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 strtotime 函数UNIX时间戳
2009/01/14 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
JavaScript 序列化对象实现代码
2009/12/18 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
js比较日期大小的方法
2015/05/12 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
利用Python进行异常值分析实例代码
2017/12/07 Python
python查看数据类型的方法
2019/10/12 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
EJB发布WEB服务一般步骤
2012/10/31 面试题
工伤事故赔偿协议书
2014/04/15 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
项目合作协议书
2014/09/23 职场文书
学生检讨书怎么写
2014/10/09 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript