`
plkong
  • 浏览: 179817 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JavaScript事件设计模式

阅读更多

本文章参考自:《征服Ajax Web 2.0 开发技术详解》为了自己日后查阅并与大家共享。

 

1. 事件设计概述

    事件机制可以是程序逻辑更加清晰可见,在JavaScript中很多对象都有自己的事件,如:button有onclick事件,selcet有onchange事件。对于我们自己设计的类,是否也可以有事件机制呢?答案是肯定的。我们可以通过事件机制,将类设计为独立的模块,从而使其可以通过事件与外通信,提高程序的开发效率。

2. 不带参数的事件设计模式

    最简单的一种模式是将一个类的方法成员定义为事件,可以借助JavaScript的基本语法来实现,通常是一个空的方法。例如:

 

<script language="javascript" type="text/javascript" >

function User(){
}
User.prototype={
	show:function(){
		this.onShow();//触发onShow事件
	},
	onShow:function(){}//定义事件接口
}
var obj = new User();
//创建obj的onShow事件处理程序
obj.onShow = function(){
	alert("事件触发了");
}
//调用obj的show方法
obj.show();
</script>

     obj.onShow 方法在类的外部被定义,在类的内部方法 show() 中被调用,这就实现了事件机制。

    此设计模式应用起来简单,但有其有以下缺点:

  • 不能够给事件处理程序传递参数,原因是我们是在 show() 这个内部方法中调用事件处理程序的,无法知道外部的参数。
  • 每个事件接口只能绑定一个事件处理程序,而内部方法则可以使用 attachEvent addEventListener 方法绑定多个处理程序。

3. 给事件处理程序传递参数

    给事件处理程序传递参数不仅是自定义事件中存在的问题,也是系统内部对象的事件机制中存在的问题,因为事件机制仅传递一个函数名称,不带有任何参数信息,所以无法传递参数进去。例如:

<script language="javascript" type="text/javascript" >
function User(){
}
User.prototype={
	show:function(){
		this.onShow();//触发onShow事件
	},
	onShow:function(){}//定义事件接口
}
var obj = new User();
//创建obj的onshow事件处理程序
function objOnShow(userName){
	alert("hello,"+userName);
}
//定义username变量
var userName = "plkong";
//绑定obj的onshow事件
obj.onShow = objOnShow;//无法将userName这个变量传递进去
obj.show();
</script>

  上面的程序是无法传递参数进去的,为了解决这个问题,我们可以从相反的思维方式去考虑问题。不考虑怎么把参数传递进去,而是考虑如何构建一个无需参数的事件处理程序。我们看看先看看下面的函数:

/* 将参数的函数封装为无参数的函数 */
function createFunction(obj, strFunc){
	var args = [];//定义args用于存储传递给事件处理程序的参数
	if(!obj) obj = window;//如果是全局函数则obj = window;
	//得到传递给事件处理程序的参数
	for( var i = 2; i<arguments.length; i++)
		args.push(arguments[i]);
	//用无参函数封装事件处理程序的调用
	/*
	JavaScript为函数对象定义了两个方法:apply 和 call, 它们的作用都是函数绑定到另外一个对象上运行。
	*/
	return function(){
		obj[strFunc].apply(obj, args);//将参数传递给指定的事件处理程序
	}
}

 该方法将一个有参数的函数封装为一个无参数的函数,不仅对全局函数适用,作为对象方法存在的函数也是适用的。该方法首先接收两个参数:obj 和 strFunc ,obj 表示事件处理程序所在的对象; strFunc 表示事件处理程序的名称。程序中还利用了arguments对象(arguments是传递给函数的隐含参数,arguments对象存储的是实际传递给函数的参数,而且不局限与函数声明所定义的形参列表。关于arguments对象可以参考其他资料)处理第二个参数以后的隐式参数,即未定义为形参的参数,

    例如:事件处理程序

    someObject.eventHandler = function(_arg1, _arg2){

                   //事件处理代码

}

    应该调用:creatFunction(someObject, "eventHander", arg1, arg2);

    这样就返回一个无参数的函数,在返回的函数中已经包括了传递进去的参数。如果是全局函数作为事件处理程序,事实上它是window 对象的一个方法,所以可以传递window对象作为obj参数,为了更清晰一点,也可以指定obj为null, creatFunction函数内部会自动认为该函数是全局函数,从而自动吧obj赋值为window。最后完成的代码如下:

 

<script language="javascript" type="text/javascript" >
/* 将参数的函数封装为无参数的函数 */
function createFunction(obj, strFunc){
	var args = [];//定义args用于存储传递给事件处理程序的参数
	if(!obj) obj = window;//如果是全局函数则obj = window;
	//得到传递给事件处理程序的参数
	for( var i = 2; i<arguments.length; i++)
		args.push(arguments[i]);
	//用无参函数封装事件处理程序的调用
	/*
	JavaScript为函数对象定义了两个方法:apply 和 call, 它们的作用都是函数绑定到另外一个对象上运行。
	*/
	return function(){
		obj[strFunc].apply(obj, args);//将参数传递给指定的事件处理程序
	}
}
/**/
function User(){
}
User.prototype={
	show:function(){
		this.onShow();//触发onShow事件
	},
	onShow:function(){}//定义事件接口
}
var obj = new User();
//创建obj的onshow事件处理程序
function objOnShow(userName){
	alert("hello,"+userName);
}
//定义username变量
var userName = "plkong";
//绑定obj的onshow事件
//obj.onShow = objOnShow;//无法将userName这个变量传递进去
obj.onShow = createFunction(null, "objOnShow", userName);
obj.show();
</script>
 

 

 

 

 

 

 

分享到:
评论
1 楼 xo_tobacoo 2008-07-11  
晚上再来细细研究!不错

相关推荐

    JavaScript设计模式与开发实践.pdf

    "JavaScript设计模式与开发实践.pdf" 本书《JavaScript设计模式与开发实践》是JavaScript语言的设计模式和开发实践的指南,旨在帮助初、中、高级Web前端开发人员和想往架构师晋级的中高级程序员,掌握JavaScript...

    JavaScript设计模式.pdf

    JavaScript设计模式.pdf JavaScript设计模式是指在软件开发中使用JavaScript语言编写的设计模式。这些设计模式旨在提高代码的重用性、可读性、维护性和扩展性。以下是JavaScript设计模式的知识点总结: 1. 单体...

    JAVASCRIPT设计模式[收集].pdf

    在现代前端开发中,JavaScript设计模式已经成为了一门必修课程。它不仅能够提升开发者的编码效率,而且还能保证编写的代码更加健壮、可维护。本文将对JavaScript设计模式的核心概念进行深入探讨,以期帮助开发者更好...

    学用 JavaScript 设计模式.pdf

    外文翻译:学用JavaScript设计模式,pdf版本,中文版 设计模式是可重用的用于解决软件设计中一般问题的方案。设计模式如此让人着迷,以至在任何编程语言中都有对其进行的探索。 其中一个原因是它可以让我们站在巨人...

    JavaScript高级与设计模式.zip

    接下来,我们讨论JavaScript设计模式。设计模式是在特定场景下解决问题的通用、可重用的解决方案。在JavaScript中,常见的设计模式有: 1. **单例模式(Singleton)**:确保一个类只有一个实例,并提供一个全局访问...

    javascript 设计模式简化版

    包括面向对象,面向对象编程思想,javascript面向对象,设计模式通俗版,快速进入模式学习与实践。

    javascript 面向对象编程.pdf javascript 设计模式与开发实践.pdf

    面向对象编程(Object-Oriented Programming, OOP)是JavaScript中的核心概念,而设计模式则是解决常见编程问题的经验总结,对于提升代码质量和可维护性至关重要。这两本书——"JavaScript 面向对象编程.pdf"和...

    Javascript 设计模式系统讲解与应用

    在深入探讨《JavaScript设计模式系统讲解与应用》的内容之前,我们先来了解一下设计模式的基本概念以及为什么它对于前端开发人员尤为重要。设计模式是一套被反复使用的、经过分类编目的、包含结构化的解决方案,用于...

    Javascript 设计模式系统讲解与应用视频资源地址.7z

    JavaScript设计模式是编程实践中的一种重要思想,它提供了一套经过时间考验的最佳实践,用来解决常见的编程问题和提高代码的可维护性、可扩展性和可复用性。在JavaScript这种动态类型的脚本语言中,设计模式尤其重要...

    【JavaScript设计模式】根据曾探所著《JavaScript设计模式与开发实践》整理的学习笔记_pgj.zip

    JavaScript设计模式是软件开发领域中一个非常重要的概念,它为编程人员提供了一套标准的解决方案,以解决在软件设计中遇到的常见问题。曾探所著的《JavaScript设计模式与开发实践》是一本专注于JavaScript语言的模式...

    JavaScript设计模式与开发实践_himppf_js_jspremise_精通javascript_Js设计模式_

    JavaScript设计模式与开发实践是深入理解并提升JavaScript编程能力的关键领域。设计模式是对在软件设计中经常出现的问题的解决方案的描述,它代表了最佳实践,是经验丰富的开发者们经过时间检验后总结出来的解决常见...

    JavaScript常见设计模式视频教程下载

    JavaScript常见设计模式

    (源码)基于JavaScript的设计模式教程.zip

    # 基于JavaScript的设计模式教程 ## 项目简介 本项目是一个基于JavaScript语言的设计模式教程,旨在帮助开发者理解并应用常见的软件设计模式。通过详细的解释和代码示例,项目涵盖了创建型、结构型和行为型设计...

    Javascript 设计模式之构造函数模式.zip

    JavaScript设计模式是编程实践中一种优秀的代码组织方式,它总结了在特定场景下解决常见问题的最佳实践。构造函数模式是JavaScript中的一种重要设计模式,用于创建对象。本文将深入探讨构造函数模式及其应用。 构造...

    JavaScript 设计模式.zip

    在本压缩包中包含的文件中,"literals-and-constructors"、"function-patterns"、"jquery-plugin-patterns"、"general-patterns" 等文件夹名称暗示了本资源包含了关于各种JavaScript设计模式的详细介绍和示例代码。...

    js设计模式详解和 函数式编程PDF

    JavaScript设计模式详解与函数式编程是开发者提升代码质量和可维护性的重要工具。设计模式是对在软件设计中经常出现的问题和解决方案的一种模式化描述,而函数式编程则是一种编程范式,强调程序数据的不可变性和函数...

    【JavaScript设计模式】根据曾探所著《JavaScript设计模式与开发实践》整理的学习笔记.zip

    JavaScript设计模式是前端开发中非常重要的一个概念。它不仅可以提高代码的复用性,还能提高系统的可维护性和扩展性。在曾探所著的《JavaScript设计模式与开发实践》一书中,作者详细介绍了JavaScript中的各种设计...

Global site tag (gtag.js) - Google Analytics