`
qingfengjushi1
  • 浏览: 141343 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery源码分析之jQuery缓存处理

阅读更多
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源码分析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。深入理解其源码对于提升JavaScript编程技能和优化前端性能至关重要。本文将从核心概念、设计...

    Jquery源码分析.rar

    《jQuery源码深度剖析》 jQuery,作为一款广泛使用的JavaScript库,它的源码设计和实现方式一直是许多开发者学习和研究的重点。本分析基于jQuery 1.2.6版本,这个版本虽然相对较老,但其中蕴含的设计思想和核心原理...

    jquery源码框架解读

    7. **源码结构分析**:jQuery源码采用模块化设计,分为核心、选择器、遍历、DOM操作等多个部分。理解其模块划分和依赖关系,有助于我们更好地理解代码结构和逻辑。 8. **学习资源**:除了这份源码解读,还有其他...

    jQuery 源码分析最新1.2.6

    【jQuery 源码分析最新1.2.6】 ...通过深入分析jQuery的源码,我们可以更好地理解其背后的实现原理,提升我们的JavaScript编程技巧。实际应用中,结合源码分析,可以更好地定制和优化jQuery的功能,以满足项目需求。

    Jquery1.2.6源码分析+源代码

    综上所述,jQuery 1.2.6 的源码分析涵盖了选择器引擎的实现、DOM 操作、事件处理、动画效果、AJAX 请求、扩展性等多个方面,对于深入理解 JavaScript 库的构建和优化具有重要意义。通过深入学习,开发者不仅能提升...

    Jquery1.2.6源码分析教程

    **jQuery 1.2.6 源码分析教程** jQuery 是一个广泛使用的 JavaScript 库,因其简洁的语法和强大的功能而备受开发者喜爱。在 jQuery 1.2.6 版本中,虽然它已经相对老旧,但其背后的实现原理和优化策略仍然值得深入...

    Jquery源码分析

    《jQuery源码分析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。对于深入理解JavaScript和前端开发技术的开发者来说,探究jQuery的源码是提升技能的重要途径...

    jQuery源码分析系列_1.6

    ### jQuery源码分析系列_1.6 #### 一、前言 在现代Web开发领域,jQuery无疑是一款具有里程碑意义的JavaScript库。它通过简洁、强大的API极大地简化了DOM操作、事件处理、Ajax交互以及动画等功能,使得前端开发变得...

    jquery源码详解

    ### jQuery源码详解 #### 一、概述与设计理念 **jQuery** 作为一款优秀的 JavaScript 库,相较于其他同类库如 **Prototype**, **YUI**, **Mootools** 等,以其独特的设计理念脱颖而出。它专注于实用性和高效性,...

    jquery各种版本源码

    总之,通过分析jQuery的源码,不仅可以深化对JavaScript的理解,还能提高实际项目中的代码质量和效率。无论是为了个人技能提升,还是为了更好地解决问题,研究jQuery源码都是值得投入的时间和精力。在学习的过程中,...

    Jquery详解-源码分析

    提供的压缩包文件名列表与Jquery源码分析的主题不相符,它们看起来是音频文件的名称,可能是相声或者音乐作品。然而,你要求的是关于Jquery的源码分析。因此,我将专注于Jquery这个JavaScript库的相关知识点。 **...

    jQuery-, jQuery源码解读 -- jQuery v1.10.2.zip

    《jQuery源码解读——深入理解jQuery v1.10.2》 jQuery,这个轻量级的JavaScript库,自2006年发布以来,以其简洁的API和强大的功能深受开发者喜爱,成为Web开发领域中不可或缺的一部分。本文将对jQuery v1.10.2的...

    jQuery源码分析

    《jQuery源码分析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画设计和Ajax交互。对于开发者来说,深入理解jQuery的源码不仅可以提升编程技能,还能帮助我们优化代码,提高网页...

    Jquery源码资料_jquery_

    - 事件缓存:jQuery源码中对事件处理的缓存策略,有助于减少内存消耗和提高运行速度。 通过对jQuery源码的学习,开发者不仅能理解其背后的实现原理,还能在实际项目中做出更明智的决策,提升代码质量和效率。无论...

    锋利的JQuery源码

    源码分析可以帮助我们了解如何封装XMLHttpRequest对象,处理数据响应,并实现错误处理。 6. **插件开发(Plugin Development)**:jQuery的插件机制允许开发者扩展其功能。源码中可以看到如何利用`.fn.extend()`...

    JQUERY博客源码 JQUERY博客源码

    **jQuery博客源码详解** jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM...通过分析和实践这些源码,你可以深入了解jQuery的工作原理,提升你的前端开发技能,并能更好地构建高效、互动性强的博客系统。

    精通js+jquery源码

    在深入探讨《精通js+jquery源码》这本书中所涵盖的知识点之前,首先需要了解JavaScript和jQuery的基本概念。JavaScript是一种广泛应用于网页和网络应用的脚本语言,它为用户提供动态、交互式的网页体验。而jQuery则...

    锋利的jQuery源码

    《锋利的jQuery源码》是一本深入剖析jQuery核心机制的书籍,对于任何希望深入了解这一广泛使用的JavaScript库的开发者来说,都是不可或缺的资源。jQuery以其简洁的语法、强大的功能和良好的浏览器兼容性,成为了Web...

Global site tag (gtag.js) - Google Analytics