javascript 事件设计模式
http://plkong.iteye.com/blog/213543
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>
javascript 事件设计模式的更多相关文章
- javascript事件设计模式
JavaScript事件设计模式 http://plkong.iteye.com/blog/213543 http://www.docin.com/p-696665922.html
- Javascript事件设计模式(七)
一:事件设计概述 事件机制可以使程序逻辑更加符合现实世界,在JavaScript中很多对象都有自己的事件,例如按钮就有onclick事件,下拉列表框就有 onchange事件,通过这些事件可以方便编程 ...
- JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- Javascript事件模型系列(四)我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- JavaScript事件详解-zepto的事件实现
zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...
- 7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...
- JavaScript 事件代理
转自:http://www.cnblogs.com/silence516/archive/2009/09/03/delegateEvent.html 如果你想给网页添加点JavaScript的交互性, ...
- JavaScript事件代理和委托(Delegation)
JavaScript事件代理 首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委 ...
- JavaScript事件概览
JavaScript事件 JavaScript是单线程,在同一个时间点,不可能同时运行两个"控制线程". 事件句柄和事件对象 1.注册事件句柄 标准和非标准 var button= ...
随机推荐
- win7 Oracle 11g安装及安装中遇到的问题
根据自己的系统从oracle官方下载安装包,官方地址:http://www.oracle.com/index.html win7的oracle 11g 安装包(2个): http://223.20.2 ...
- 【转】Objective-C 与 Runtime:为什么是这样?
原文地址: http://t.cn/RyyNIXd?u=2483713130&m=3884400301576073&cu=2483713130 笔者非常高兴能为Objective-C写 ...
- 十四、职责链(Chain of Responsibility)模式--行为型模式(Behavioral Pattern)
职责链模式是一种对象的行为模式[GOF95].在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链.请求在这个链上传递,直到链上的某一个对象决定处理此请求.发出这个请求的客户端并不知 ...
- C# 内存泄露
一.事件引起的内存泄露 1.不手动注销事件也不发生内存泄露的情况 我们经常会写EventHandler += AFunction; 如果没有手动注销这个Event handler类似:EventHan ...
- jQuery的入门与简介《思维导图》
<初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我知道了jQuery拥有强大的选择器, 出色的DOM操作 ...
- 如何从Eclipse导入github上的项目源码
1.首先在github.com上申请一个账号,比如笔者的账号为puma0072.Eclipse需要安装egit插件,在Eclipse中选择help->Marketplace,在search中输入 ...
- 安装配置MongoDB数据库
一.关闭SElinux.配置防火墙 1.vi /etc/selinux/config #SELINUX=enforcing #注释掉 #SELINUXTYPE=targeted #注释掉 SELINU ...
- 【原创】System.Data.SQLite内存数据库模式
对于很多嵌入式数据库来说都有对于的内存数据库模式,SQLite也不例外.内存数据库常常用于极速.实时的场景,一个很好的应用的场景是富客户端的缓存数据,一般富客户端的缓存常常需要分为落地和非落地两种,而 ...
- HttpApplication事件执行顺序(转)
HttpApplication 类的实例(Global继承自该类)是在 ASP.NET 基础结构中创建的,而不是由用户直接创建的.HttpApplication 类的一个实例在其生存期内被用于处理多个 ...
- js下拉菜单默认值为当前年份,下拉菜单的选项为当前年份往前推5年
1:在jsp或者HTML页面中新建一个下拉框 年度:<select id="cx_nd" name="cx_nd" style="width: ...