JavaScript事件设计模式
2013-10-08 15:21
246 查看
1. 事件设计概述 事件机制可以是程序逻辑更加清晰可见,在JavaScript中很多对象都有自己的事件,如:button有onclick事件,selcet有 onchange事件。对于我们自己设计的类,是否也可以有事件机制呢?答案是肯定的。我们可以通过事件机制,将类设计为独立的模块,从而使其可以通过事 件与外通信,提高程序的开发效率。 2. 不带参数的事件设计模式 最简单的一种模式是将一个类的方法成员定义为事件,可以借助JavaScript的基本语法来实现,通常是一个空的方法。例如: Js代码 <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. 给事件处理程序传递参数 给事件处理程序传递参数不仅是自定义事件中存在的问题,也是系统内部对象的事件机制中存在的问题,因为事件机制仅传递一个函数名称,不带有任何参数信息,所以无法传递参数进去。例如: Js代码 <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> 上面的程序是无法传递参数进去的,为了解决这个问题,我们可以从相反的思维方式去考虑问题。不考虑怎么把参数传递进去,而是考虑如何构建一个无需参数的事件处理程序。我们看看先看看下面的函数: Js代码 /* 将参数的函数封装为无参数的函数 */ 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。最后完成的代码如下: Js代码 <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>
相关文章推荐
- Javascript事件设计模式
- javascript 事件设计模式
- javascript事件设计模式
- JavaScript 事件设计模式
- javascript事件设计模式
- Javascript事件设计模式 | Chinaddv.com | 中国网站资源 | 中国WEB技术资源 | China website resources | Chinadu.cn
- JavaScript事件设计模式
- javascript事件设计模式(zt)
- Javascript事件设计模式(七)
- 深入理解JavaScript系列(32):设计模式之观察者模式
- Javascript 设计模式学习笔记(2) - 继承(Inheritance) (下)
- 深入理解JavaScript系列(27):设计模式之建造者模式
- javascript简单工厂设计模式////javascript构造函数//////prototype原型介绍
- [学习笔记]c#中的委托、事件、Func、Predicate、Observer设计模式以及其他
- 深入理解JavaScript系列(32):设计模式之观察者模式
- JavaScript学习记录——《学用 JavaScript 设计模式》学习笔记(1)
- JavaScript常用设计模式
- JavaScript学习之设计模式->观察者模式
- 深入理解JavaScript系列(37):设计模式之享元模式
- 深入理解JavaScript系列(35):设计模式之迭代器模式