一、綜述
有時候業務需要自動識別滿足一定規則下的所有的子類，並且根據指定標識分發業務數據到子類處理。類似於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實現業務需求處理的業務設計源碼，便於擴展和維護。
