JavaScript使用自定义事件实现简单的模块化开发
WEB前端最常见驱动方式就是事件了, 所有交互等等都是通过事件,前端的常见事件有：
UI事件；
焦点事件；
鼠标事件；
滚轮事件；
文本事件；
键盘事件；
变动事件；
现在网页上有一个输入框， 如果我们要对用户输入的字符串进行过滤， 或者是截获用户的输入进行处理的话, 我们要肿么办
同学们纷纷举手说：“老师，我知道，是使用添加事件“，
老师也很欣慰地点了点头， 这群家伙真的是越来越聪明了,
老师又问了”如果要取消用户的输入怎么办了“，
坐在最前排眼睛最小的同学急忙说”ev.preventDefault(),ev.returnValue = false;"
老师又说“不错啊，都学会抢答了啊， 我裤子都脱了， 你就答这个2？”
过了一秒钟, 又一位同学主动跑到黑板这边写了如下的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MAKER</title>
</head>
<body>
<div id="log">
Log:
</div>
<input id="text">data</input> <script>
window.onload = init; if(console&&console.log) {
var originalLog = console.log;
var log = document.getElementById("log");
console.log = function(arg) {
var eDiv = document.createElement("div");
eDiv.innerHTML = typeof arg === "string" ? arg : arg.toString();
log.appendChild( eDiv );
originalLog.apply(console, arguments);
};
}; function init () {
var eText = document.getElementById("text");
eText.addEventListener("keypress", function( ev ) {
//逻辑全部在这里面, 很简单吧;
var code = ev.which = ev.which || ev.keyCode || ev.charCode;
console.log( code );
if(code > 80) {
console.log("code>80");
};
if(ev.shiftKey === true) {
console.log("shift key is pressed!")
}
});
};
</script>
</body>
</html>
"哎哟，不错哦，这个*x"老师说道："这个就是我们最常用的方法, 直接为元素绑定了keypress事件，然后通过这个事件的回调对用户的输入进行处理";
如果在事件里面的代码多了, 我们又可以把事件的代码单独取出来作为一个函数:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MAKER</title>
</head>
<body>
<div id="log">
Log:
</div>
<input id="text">data</input> <script>
window.onload = init; if(console&&console.log) {
var originalLog = console.log;
var log = document.getElementById("log");
console.log = function(arg) {
var eDiv = document.createElement("div");
eDiv.innerHTML = typeof arg === "string" ? arg : arg.toString();
log.appendChild( eDiv );
originalLog.apply(console, arguments);
};
};
var 我是事件 = function(ev) {
//逻辑全部在这里面, 很简单吧;
var code = ev.which = ev.which || ev.keyCode || ev.charCode;
console.log( code );
if(code > 80) {
console.log("code>80");
};
if(ev.shiftKey === true) {
console.log("shift key is pressed!")
};
};
function init () {
var eText = document.getElementById("text");
eText.addEventListener("keypress", function( ev ) {
我是事件(ev);
});
};
</script>
</body>
</html>
看起来清楚多了是吧, 但是在大的项目中(我说的是如果哇), 我们想要充分解耦代码, 可以事件里面的代码全部重新分开:
函数1 ：console.log( code );
函数２：
if(code > 80) {
console.log("code>80");
};
函数３：
if(ev.shiftKey === true) {
console.log("shift key is pressed!")
};
好吧，现在问题来了．．．．
现在有要上菜了哇， ＪＳ中的自定义事件， 充分利用JS的事件机制，
抄自百科：对于自定义事件最需要了解的一点是，您的代码必须导致这些事件发生。这些事件不会为响应用户或系统的动作而自动发生，即使能够编写导致事件确实以这种方式发生的代码也不例外。包含自定义事件的类模块还必须包括一个唤起事件的公有方法。这个方法通过调用 RaiseEvent 语句并传入为事件定义的任何参数来唤起事件。这些参数按顺序传入为响应事件而运行的事件过程中
自定义事件就是一种的设计模式,比如订阅者发布者模式, 观察者模式等等, 都是自定义事件基础上的模式(个人观点, 勿拍砖), 关键是很多大神写代码喜欢用这一种模式写, 那么我们也可以借鉴, 这样就够了;
我们现在把上面那段通过自定义事件的方式写出来：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MAKER</title>
</head>
<body>
<script>
//d为目标对象, b为一个函数对象;
var __extends = this.__extends || function (d, b) {
//继承了静态属性
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
//继承了原型
__.prototype = b.prototype;
d.prototype = new __();
}; var EventEmitter = (function () {
function EventEmitter() {
this._events = {};
}
EventEmitter.prototype.emit = function (type) {
var _this = this;
var args = [];
for (var _i = 0; _i < (arguments.length - 1); _i++) {
args[_i] = arguments[_i + 1];
}
// If there is no 'error' event listener then throw.
if (type === 'error') {
if (!this._events[type] || (Array.isArray(this._events[type]) && !this._events[type].length)) {
if (args[0] instanceof Error) {
throw args[0];
} else {
throw new Error("Uncaught, unspecified 'error' event.");
}
return false;
}
}
if (this._events[type]) {
this._events[type].forEach(function (handler) {
return handler.apply(_this, args);
});
return true;
}
return false;
}; EventEmitter.prototype.addListener = function (type, listener) {
if ('function' !== typeof listener) {
throw new Error('addListener only takes instances of Function');
}
var events = this._events;
var listeners = events[type];
if (!listeners)
listeners = events[type] = [];
else if (listeners.indexOf(listener) >= 0)
return this;
listeners.push(listener);
return this;
}; EventEmitter.prototype.removeListener = function (type, listener) {
var events = this._events;
if (!events[type])
return this;
var listeners = events[type];
var i = listeners.indexOf(listener);
if (i >= 0)
listeners.splice(i, 1);
return this;
};
return EventEmitter;
})(); //写一个小的案例, 为了充分解耦代码, 我们可以把代码通过自定义的事件分成几个模块; </script> <input id="text">data</input> <script>
window.onload = init;
function init () {
var TextEvent = (function(Emiter) {
__extends(TextEvent, Emiter);
function TextEvent() {
Emiter.apply(this);
};
return TextEvent;
}.call(TextEvent,EventEmitter)); //创建了这个实例;
var textEvent = new TextEvent(); //为实例添加自定义事件;
textEvent.addListener("keypress", function preventDefault(ev) {
ev.preventDefault();
});
//为实例添加自定义事件;
textEvent.addListener("keypress", function(ev) {
var code = ev.which = ev.which || ev.keyCode || ev.charCode;
console.log( code );
});
//为实例添加自定义事件;
textEvent.addListener("keypress", function(ev) {
var code = ev.which = ev.which || ev.keyCode || ev.charCode;
if(code > 80) {
console.log("code>80");
};
});
//为实例添加自定义事件;
textEvent.addListener("keypress", function(ev) {
var code = ev.which = ev.which || ev.keyCode || ev.charCode;
if(ev.shiftKey === true) {
console.log("shift key is pressed!")
};
}); document.getElementById("text").addEventListener("keypress", function( ev ) {
textEvent.emit("keypress",ev)
});
};
</script>
</body>
</html>
楼主你他妈在逗我？ 这么多
实现要懂JS的继承：
//d为目标对象, b为一个函数对象;
var __extends = this.__extends || function (d, b) {
//继承了静态属性
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
//继承了原型
__.prototype = b.prototype;
d.prototype = new __();
};
其次呢， 自定义事件的代码要懂, 很多地方都有用到;
var EventEmitter = (function () {
function EventEmitter() {
this._events = {};
}
EventEmitter.prototype.emit = function (type) {
var _this = this;
var args = [];
for (var _i = 0; _i < (arguments.length - 1); _i++) {
args[_i] = arguments[_i + 1];
}
// If there is no 'error' event listener then throw.
if (type === 'error') {
if (!this._events[type] || (Array.isArray(this._events[type]) && !this._events[type].length)) {
if (args[0] instanceof Error) {
throw args[0];
} else {
throw new Error("Uncaught, unspecified 'error' event.");
}
return false;
}
}
if (this._events[type]) {
this._events[type].forEach(function (handler) {
return handler.apply(_this, args);
});
return true;
}
return false;
};
EventEmitter.prototype.addListener = function (type, listener) {
if ('function' !== typeof listener) {
throw new Error('addListener only takes instances of Function');
}
var events = this._events;
var listeners = events[type];
if (!listeners)
listeners = events[type] = [];
else if (listeners.indexOf(listener) >= 0)
return this;
listeners.push(listener);
return this;
};
EventEmitter.prototype.removeListener = function (type, listener) {
var events = this._events;
if (!events[type])
return this;
var listeners = events[type];
var i = listeners.indexOf(listener);
if (i >= 0)
listeners.splice(i, 1);
return this;
};
return EventEmitter;
})();
最后通过组合继承, 实现了一个自定义事件类方法：
var TextEvent = (function(Emiter) {
__extends(TextEvent, Emiter);
function TextEvent() {
Emiter.apply(this);
};
return TextEvent;
}.call(TextEvent,EventEmitter));
我们通过实例化TextEvent, 为这个实例添加自定义的方法;
在onkeypress的事件回调触发自定义事件textEvent.emit("keypress",ev), 最后的最后只要为textEvent绑定自定义事件即可,这样做的优势就是： 我们可以通过removeListener去除事件， 事件函数也可以直接复用, 很灵活;
D
JavaScript使用自定义事件实现简单的模块化开发的更多相关文章
- 详解javascript实现自定义事件
这篇文章主要为大家介绍了javascript实现自定义事件的方法,自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,javascript如何实现自定义事件,需要了解的朋友可以参考下 我 ...
- Javascript之自定义事件
Javascript自定义事件,其本质就是观察者模式(又称订阅/发布模式),它的好处就是将绑定事件和触发事件相互隔离开,并且可以动态的添加.删除事件. 下面通过实例,一步一步构建一个具体的Javasc ...
- javascript中自定义事件
自定义事件:用户可以指定事件类型,这个类型实际上就是一个字符串,然后为这个类型的事件指定事件处理函数,可以注册多个事件处理函数(用数组管理),调用时,从多个事件处理函数中找到再调用. function ...
- 使用jQuery在javascript中自定义事件
js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的 ...
- 利用javascript（自定义事件）记录尺寸可变元素的尺寸变化过程
1.效果图 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %&g ...
- javascript和jquey的自定义事件小结
“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...
- Qt 学习之路：自定义事件
尽管 Qt 已经提供了很多事件,但对于更加千变万化的需求来说,有限的事件都是不够的.例如,我要支持一种新的设备,这个设备提供一种崭新的交互方式,那么,这种事件如何处理呢?所以,允许创建自己的事件 类型 ...
- Spring(十)之自定义事件
编写自定义事件的简单流程如下: (1)编写CustomEvent.java package com.tutorialspoint; import org.springframework.context ...
- Qt 学习之路 2（23）：自定义事件
Qt 学习之路 2(23):自定义事件 豆子 2012年10月23日 Qt 学习之路 2 21条评论 尽管 Qt 已经提供了很多事件,但对于更加千变万化的需求来说,有限的事件都是不够的.例如, ...
随机推荐
- Flex(flash)检测摄像头的3种状态(是否被占用,没安装摄像头,正常)
在视频程序的编写过程中,我们经常要使用摄像头,在使用摄像头前有必要对摄像头的现有状态做个检测: 1.被占用 2.没安装摄像头 3.正常 camera=Camera.getCamera(); ...
- 给ros安装arbotix simulator仿真环境
首先下载程序包.编译.安装. cd ~/catkin_ws/src git clone https://github.com/pirobot/rbx1.git cd rbx1 git checkout ...
- iOS多线程之GCD详解
GCD(Grand Central Dispatch)是基于C语言开发的一套多线程开发机制.也是目前苹果官方推荐的多线程开发方法.iOS三种多线程开发中GCD是抽象层次最高的.当然用起来也是最简单的. ...
- linux系统下对网站实施负载均衡+高可用集群需要考虑的几点
随着linux系统的成熟和广泛普及,linux运维技术越来越受到企业的关注和追捧.在一些中小企业,尤其是牵涉到电子商务和电子广告类的网站,通常会要求作负载均衡和高可用的Linux集群方案. 那么如何实 ...
- React Native 项目运行在 Web 浏览器上面
React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...
- ESXi 6.0 配置
ESXi 6.0 添加静态路由 首先打开ESXi的SSH服务, 在Configuration -> Security Profile -> Services , start SSH 用管理 ...
- usb驱动开发18之设备生命线
现在已经使用GET_DESCRIPTOR请求取到了包含一个配置里所有相关描述符内容的一堆数据,这些数据是raw的,即原始的,所有数据不管是配置描述符.接口描述符还是端点描述符都挤在一起,所以得想办法将 ...
- Generate Parentheses
Generate Parentheses Given n pairs of parentheses, write a function to generate all combinations of ...
- LeetCode 解题报告索引
最近在准备找工作的算法题,刷刷LeetCode,以下是我的解题报告索引,每一题几乎都有详细的说明,供各位码农参考.根据我自己做的进度持续更新中...... ...
- CUDA1.1-函数类型限定符与变量类型限定符
这部分来自于<CUDA_C_Programming_Guide.pdf>,看完<GPU高性能变成CUDA实战>的第四章,觉得这本书还是很好的,是一种循序渐进式的书,值得看,而不 ...