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 jquery数组介绍
Jul 15 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
Nest.js环境变量配置与序列化详解
Feb 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
浅析js中取绝对值的2种方法
2013/07/09 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
Js图片点击切换轮播实现代码
2020/07/27 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
小学生暑假家长评语
2014/04/17 职场文书
开服装店计划书
2014/08/15 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
优秀党员推荐材料
2014/12/18 职场文书
公司员工体检通知
2015/04/21 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
演讲稿之开卷有益
2019/08/07 职场文书