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

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;
}
}
}

(0)

相关推荐

  • jQuery 源码分析笔记(7) Queue

    每个Element可以拥有多个队列,但是基本上都只使用到一个,即默认的fn队列.队列允许一系列函数被异步地调用而不会阻塞程序.例如:$("#foo").slideUp().fadeIn();其实这个就是我们大家常用的链式调用,实际上这是一个Queue.所以队列和Deferred地位类似,是一个内部使用的基础设施.当slideUp运行时,fadeIn被放到fx队列中,当slideUp完成后,从队列中被取出运行.queue函数允许直接操作这个链式调用的行为.同时,queue可以指定队列名称

  • jQuery插件-jRating评分插件源码分析及使用方法

    该插件被广泛应用于各种需要评分的页面当中,今天作为学习,把源码拿出来分析一下,顺便学习其使用方法. 一.插件使用一览. 复制代码 代码如下: <div> <div>第一个例子</div> <div id="16_1" class="myRating"></div> </div> 复制代码 代码如下: <link href="Script/jRating/jRating.jquer

  • 从JQuery源码分析JavaScript函数的apply方法与call方法

    最近在使用jQuery的$.each方法时很,突然想到$.each($('div'),function(index,entity){});中的这个index和entity是哪冒出来的,而且可有可无的,而且这么高大上的能告诉我们当前遍历的下标和实例.所以看了一下jQuery源代码,是这么写的: 调试的时候走的是标红的这段代码,然后用到了callback.call这个函数,于是翻看了一下<js高级程序设计>,其中有比较深的解释. 首先,function是一个指向Function对象,函数名是一个指

  • jQuery-1.9.1源码分析系列(十)事件系统之事件包装

    在上篇文章给大家介绍了jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构,本篇继续给大家介绍jquery1.9.1源码分析系列相关知识,具体内容请看下文吧. 首先需要明白,浏览器的原生事件是只读的,限制了jQuery对他的操作.举个简单的例子就能明白为什么jQuery非要构造一个新的事件对象. 在委托处理中,a节点委托b节点在a被click的时候执行fn函数.当事件冒泡到b节点,执行fn的时候上下文环境需要保证正确,是a节点执行了fn而非b节点.如何保证执行fn的上下文环境是a节点

  • jQuery 2.0.3 源码分析之core(一)整体架构

    拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! github上最新是jquery-master,加入了AMD规范了,我就以官方最新2.0.3为准 整体架构 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 例如: 复制代码 代码如下: $().find().

  • jQuery源码分析-05异步队列 Deferred 使用介绍

    5. 异步队列 Deferred 5.1 概述 异步队列是一个链式对象,增强对回调函数的管理和调用,用于处理异步任务. 异步队列有三种状态:初始化(unresolved),成功(resolved),失败(rejected). 执行哪些回调函数依赖于状态. 状态变为成功(resolved)或失败(rejected)后,将保持不变. 回调函数的绑定可以是同步,也可以是异步的,即可以在任何时候绑定. (本节中的 绑定 注册 增加 具有相同的含义) 5.2 关键方法 先看看jQuery. Deferre

  • jQuery源码分析-02正则表达式 RegExp 常用正则表达式

    作者:nuysoft/JS攻城师/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 后文预告:jQuery中的正则表达式分析 2.4 常用正则表达式 在网上找到一篇广为流传的文章<常用正则表达式>,逐一分析,不足地方进行补充和纠正. 复制代码 代码如下: 常用的数字正则(严格匹配) 正则 含义 ^[1-9]\d*$ 匹配正整数 ^-[1-9]\d*$ 匹配负整数 ^-?[1-9]\d*$ 匹配整数 ^[1-

  • jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构

    又是一个重磅功能点. 在分析源码之前分析一下体系结构,有助于源码理解.实际上在jQuery出现之前,Dean Edwards的跨浏览器AddEvent()设计做的已经比较优秀了:而且jQuery事件系统的设计思想也是基于该思想的,所以我们先分析一下Dean Edwards前辈的事件绑定. a. jQuery事件原型--Dean Edwards的跨浏览器AddEvent()设计 源码解读 //事件添加方法 function addEvent(element, type, handler) { //

  • jQuery 1.9.1源码分析系列(十)事件系统之绑定事件

    事件绑定的方法有很多种,使用了jquery那么原理那种绑定方式(elem.click = function(){...}))就不太想推荐给大家了.最主要的原因是elem.click=fn这种方式只能绑定一个事件处理,多次绑定的只会保留最后一次绑定的结果. 下面给大家介绍jquery绑定事件的方式有哪些吧. 复制代码 代码如下: jQuery.fn.eventType([[data,] fn]) 比如eventType指的是事件类型,比如click: $("#chua").click(f

  • jQuery 源码分析笔记(5) jQuery.support

    其中jQuery.browser已经提供了根据UserAgent检测的浏览器信息.而jQuery.support 使用特性检测来检查浏览器的功能以及Bug. 和文档一样,首先说明一下,这个模块是很底层的代码,基本不需要在日常开发中使用,但是插件的开发者更需要.因为插件需要兼容各个浏览器.首先看一下 support模块提供了哪些浏览器特性的检测,以下结果是在Chrome 13 Dev下看到的结果.根据浏览器的不同,这里的成员可能会有变化.(PS:再次吐槽IE,大部分属性都是IE比较特别) ajax

随机推荐