一、综述
有时候业务需要自动识别满足一定规则下的所有的子类，并且根据指定标识分发业务数据到子类处理。类似于Java中的面向接口编程，便于业务的扩展和维护。在js中该如何处理呢？如果你也有这样的需求，可参考这种处理方式。
二、开发环境
- 开发语言：html、js
- 编辑器：sublime text
三、源码解析
1. 定义接口
- 定义父类EventHandler接口，唯一参数eventId（事件ID）。
- 定义父类注册函数registHandler，可用于子类自定主动发起注册，注册时调用EventHandler的静态方法registHandler注册子类实例。
- 定义子类业务处理方法接口，dealEvent方法，用于业务处理相关事件。
- 在子类实例化的时候会调用父类的方法，自动触发注册当前子类实例。
- 若来新的事件需要分发子类处理时，直接调用EventHandler.dealEvents方法即可，参数可以是数组或者单个事件。
//定义父类
function EventHandler(eventId){
//事件ID
this.eventId = eventId;
//注册Handler
this.registHandler = function(){
EventHandler.registHandler(this);
}
//处理事件
this.dealEvent = function(event){}
//触发注册
this.registHandler.call(this);
}
//静态定义功能注册方法
EventHandler.registHandler = function(newInstance){
console.log("registHandler",newInstance);
if(!EventHandler.allHandlers){
EventHandler.allHandlers = [];
}
EventHandler.allHandlers.push(newInstance);
};
//Trigger Event，分发
EventHandler.dealEvents = function(events){
if(events instanceof Array){
//分发事件集合
events.forEach(function(event, index, array){
EventHandler.allHandlers.forEach(function(handler){
try{
handler.dealEvent.call(handler,event);
}catch(e){
console.error(e);
}
});
});
}else{
EventHandler.allHandlers.forEach(function(handler){
try{
handler.dealEvent.call(handler,events);
}catch(e){
console.error(e);
}
});
}
}
2. 创建EventHandler子类
创建子类时需要继承父类，js继承的方式有多种，不在此处说明。此处使用的是EventHandler.call(this,this.eventId)即可。
- 第一个参数this，表示调用方法时该方法的作用域范围。
- 第二个参数是父类的方法参数。
a. SOS子类DEMO
//定义子类事件处理函数
function SOSHandler(){
this.eventId = "110";
EventHandler.call(this,this.eventId);
this.dealEvent = function(event){
console.log("SOS dealEvent",event,this);
}
}
b.Overspeed子类DEMO
function OverspeedHandler(){
this.eventId = "666";
EventHandler.call(this,this.eventId);
this.dealEvent = function(event){
console.log("Overspeed dealEvent",event,this);
}
}
3. 运行测试
a. 测试源码
//DEMO
var sosHandler = new SOSHandler();
var overspeedHandler = new OverspeedHandler();
var overspeedHandler2 = new OverspeedHandler();
console.log(EventHandler,sosHandler,overspeedHandler,overspeedHandler2);
console.log("allHandlers",EventHandler.allHandlers);
//触发事件处理
EventHandler.dealEvents(["sos","Overspeed"]);
b.浏览器运行结果
四、完整源码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//定义父类
function EventHandler(eventId){
//事件ID
this.eventId = eventId;
//注册Handler
this.registHandler = function(){
EventHandler.registHandler(this);
}
//处理事件
this.dealEvent = function(event){}
//触发注册
this.registHandler.call(this);
}
//静态定义功能注册方法
EventHandler.registHandler = function(newInstance){
console.log("registHandler",newInstance);
if(!EventHandler.allHandlers){
EventHandler.allHandlers = [];
}
EventHandler.allHandlers.push(newInstance);
};
//Trigger Event，分发
EventHandler.dealEvents = function(events){
if(events instanceof Array){
//分发事件集合
events.forEach(function(event, index, array){
EventHandler.allHandlers.forEach(function(handler){
try{
handler.dealEvent.call(handler,event);
}catch(e){
console.error(e);
}
});
});
}else{
EventHandler.allHandlers.forEach(function(handler){
try{
handler.dealEvent.call(handler,events);
}catch(e){
console.error(e);
}
});
}
}
//定义子类事件处理函数
function SOSHandler(){
this.eventId = "110";
EventHandler.call(this,this.eventId);
this.dealEvent = function(event){
console.log("SOS dealEvent",event,this);
}
}
function OverspeedHandler(){
this.eventId = "666";
EventHandler.call(this,this.eventId);
this.dealEvent = function(event){
console.log("Overspeed dealEvent",event,this);
}
}
//DEMO
var sosHandler = new SOSHandler();
var overspeedHandler = new OverspeedHandler();
var overspeedHandler2 = new OverspeedHandler();
console.log(EventHandler,sosHandler,overspeedHandler,overspeedHandler2);
console.log("allHandlers",EventHandler.allHandlers);
//触发事件处理
EventHandler.dealEvents(["sos","Overspeed"]);
</script>
</body>
</html>
五、总结
本文以一个小的demo实现业务需求处理的业务设计源码，便于扩展和维护。
