jquery框架在实现过程中对性能优化也做了很多处理,其中使用缓存就是重要的性能优化手段。
实现原理是从对象属性中取值,如果取值为undefined,则为此对象属性赋值,如果取值不为undefined,则直接返回,这样当在页面多次取对象属性值时,可以直接返回之前设置值,避免重复赋值,从而提高页面性能。如下代码模拟jQeruy实现了缓存方法
function TestCache() {
}
TestCache.prototype = {
cache: function(owner) {
var value = owner["cache"];
if (!value) {
value = {};
owner["cache"] = value;
}
return value;
}
};
使用缓存
var testCache = new TestCache();
var owner = {};
// 第一次从缓存取值,缓存不存在,则初始化
var noCache = testCache.cache(owner);
// 给缓存返回值进行赋值
noCache["name"] = "zhangsan";
noCache["age"] = 28;
noCache["handle"] = function() {
alert(this.name + "---" + this.age);
}; }
// 第二次从缓存取值,直接获取
var useCache = testCache.cache(owner);
useCache.handle();
jQuery缓存实现
function Data() {
this.expando = jQuery.expando + Data.uid++;
}
Data.uid = 1;
Data.prototype = {
...
// 提供缓存方法
cache: function( owner ) {
// We can accept data for non-element nodes in modern browsers,
// but we should not, see #8335.
// Always return an empty object.
if ( !acceptData( owner ) ) {
return {};
}
// Check if the owner object already has a cache
// 从对象属性中取缓存值
var value = owner[ this.expando ];
// If not, create one
// 如果不存在,则创建
if ( !value ) {
value = {};
// We can accept data for non-element nodes in modern browsers,
// but we should not, see #8335.
// Always return an empty object.
if ( acceptData( owner ) ) {
// If it is a node unlikely to be stringify-ed or looped over
// use plain assignment
if ( owner.nodeType ) {
// 向对象属性赋值,即缓存了value对象
owner[ this.expando ] = value;
// Otherwise secure it in a non-enumerable property
// configurable must be true to allow the property to be
// deleted when data is removed
} else {
Object.defineProperty( owner, this.expando, {
value: value,
configurable: true
} );
}
}
}
// 返回缓存值
return value;
},
// 通过get方法取得缓存对象
get: function( owner, key ) {
return key === undefined ?
this.cache( owner ) :
owner[ this.expando ] && owner[ this.expando ][ key ];
},
...
}
// 实例化Data对象
var dataPriv = new Data();
在jQuery.event.add方法中初始化缓存对象
jQuery.event = {
...
add: function( elem, types, handler, data, selector ) {
// 从缓存中获取对象,如果缓存中不存在,则初始化缓存对象
var elemData = dataPriv.get( elem );
// 以下对缓存对象进行属性增强
if ( !( events = elemData.events ) ) {
events = elemData.events = {};
}
if ( !( eventHandle = elemData.handle ) ) {
eventHandle = elemData.handle = function( e ) {
...
}
}
...
while ( t-- ) {
...
// handleObj is passed to all event handlers
handleObj = jQuery.extend( {
type: type,
origType: origType,
data: data,
handler: handler,
guid: handler.guid,
selector: selector,
needsContext: selector && jQuery.expr.match.needsContext.test( selector ),
namespace: namespaces.join( "." )
}, handleObjIn );
if ( !( handlers = events[ type ] ) ) {
handlers = events[ type ] = [];
handlers.delegateCount = 0;
}
handlers.push( handleObj );
...
}
}
...
}
在jQuery.event.dispatch方法中使用缓存
jQuery.event = {
...
dispatch: function( event ) {
// 取出缓存值,"events"属性是通过jQuery.event.add方法中对缓存对象进行了属性增强而得到
var handlers = ( dataPriv.get( this, "events" ) || {} )[ event.type ] || [],
...
}
...
}
分享到:
相关推荐
《jQuery源码分析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。深入理解其源码对于提升JavaScript编程技能和优化前端性能至关重要。本文将从核心概念、设计...
《jQuery源码深度剖析》 jQuery,作为一款广泛使用的JavaScript库,它的源码设计和实现方式一直是许多开发者学习和研究的重点。本分析基于jQuery 1.2.6版本,这个版本虽然相对较老,但其中蕴含的设计思想和核心原理...
7. **源码结构分析**:jQuery源码采用模块化设计,分为核心、选择器、遍历、DOM操作等多个部分。理解其模块划分和依赖关系,有助于我们更好地理解代码结构和逻辑。 8. **学习资源**:除了这份源码解读,还有其他...
【jQuery 源码分析最新1.2.6】 ...通过深入分析jQuery的源码,我们可以更好地理解其背后的实现原理,提升我们的JavaScript编程技巧。实际应用中,结合源码分析,可以更好地定制和优化jQuery的功能,以满足项目需求。
综上所述,jQuery 1.2.6 的源码分析涵盖了选择器引擎的实现、DOM 操作、事件处理、动画效果、AJAX 请求、扩展性等多个方面,对于深入理解 JavaScript 库的构建和优化具有重要意义。通过深入学习,开发者不仅能提升...
**jQuery 1.2.6 源码分析教程** jQuery 是一个广泛使用的 JavaScript 库,因其简洁的语法和强大的功能而备受开发者喜爱。在 jQuery 1.2.6 版本中,虽然它已经相对老旧,但其背后的实现原理和优化策略仍然值得深入...
《jQuery源码分析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。对于深入理解JavaScript和前端开发技术的开发者来说,探究jQuery的源码是提升技能的重要途径...
### jQuery源码分析系列_1.6 #### 一、前言 在现代Web开发领域,jQuery无疑是一款具有里程碑意义的JavaScript库。它通过简洁、强大的API极大地简化了DOM操作、事件处理、Ajax交互以及动画等功能,使得前端开发变得...
### jQuery源码详解 #### 一、概述与设计理念 **jQuery** 作为一款优秀的 JavaScript 库,相较于其他同类库如 **Prototype**, **YUI**, **Mootools** 等,以其独特的设计理念脱颖而出。它专注于实用性和高效性,...
总之,通过分析jQuery的源码,不仅可以深化对JavaScript的理解,还能提高实际项目中的代码质量和效率。无论是为了个人技能提升,还是为了更好地解决问题,研究jQuery源码都是值得投入的时间和精力。在学习的过程中,...
提供的压缩包文件名列表与Jquery源码分析的主题不相符,它们看起来是音频文件的名称,可能是相声或者音乐作品。然而,你要求的是关于Jquery的源码分析。因此,我将专注于Jquery这个JavaScript库的相关知识点。 **...
《jQuery源码解读——深入理解jQuery v1.10.2》 jQuery,这个轻量级的JavaScript库,自2006年发布以来,以其简洁的API和强大的功能深受开发者喜爱,成为Web开发领域中不可或缺的一部分。本文将对jQuery v1.10.2的...
《jQuery源码分析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画设计和Ajax交互。对于开发者来说,深入理解jQuery的源码不仅可以提升编程技能,还能帮助我们优化代码,提高网页...
- 事件缓存:jQuery源码中对事件处理的缓存策略,有助于减少内存消耗和提高运行速度。 通过对jQuery源码的学习,开发者不仅能理解其背后的实现原理,还能在实际项目中做出更明智的决策,提升代码质量和效率。无论...
源码分析可以帮助我们了解如何封装XMLHttpRequest对象,处理数据响应,并实现错误处理。 6. **插件开发(Plugin Development)**:jQuery的插件机制允许开发者扩展其功能。源码中可以看到如何利用`.fn.extend()`...
**jQuery博客源码详解** jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM...通过分析和实践这些源码,你可以深入了解jQuery的工作原理,提升你的前端开发技能,并能更好地构建高效、互动性强的博客系统。
在深入探讨《精通js+jquery源码》这本书中所涵盖的知识点之前,首先需要了解JavaScript和jQuery的基本概念。JavaScript是一种广泛应用于网页和网络应用的脚本语言,它为用户提供动态、交互式的网页体验。而jQuery则...
《锋利的jQuery源码》是一本深入剖析jQuery核心机制的书籍,对于任何希望深入了解这一广泛使用的JavaScript库的开发者来说,都是不可或缺的资源。jQuery以其简洁的语法、强大的功能和良好的浏览器兼容性,成为了Web...