在ts中,我们也需要一个通用的事件传递机制,类似于android中的eventBus,当然这个在ts中实现起来是很简单的。
代码如下:
核心类,处理事件的核心/。
/**
* 观察者
*/
namespace T {
export class Observer {
/** 回调函数 */
private callback: Function = null;
/** 上下文 */
private context: any = null;
constructor(callback: Function, context: any) {
let self = this;
self.callback = callback;
self.context = context;
}
/**
* 发送通知
* @param args 不定参数
*/
notify(...args: any[]): void {
let self = this;
self.callback.call(self.context, ...args);
}
/**
* 上下文比较
* @param context 上下文
*/
compar(context: any): boolean {
return context == this.context;
}
}
}
下面是的整个事件的处理中心。
/**
* 事件消息处理
*/
namespace T{
export class EventCenter {
/** 监听数组 */
private listeners = {};
private static instance = null;
public static getInst(): EventCenter {
if(!this.instance || this.instance == null) {
this.instance = new EventCenter();
}
return this.instance;
}
/**
* 注册事件
* @param name 事件名称
* @param callback 回调函数
* @param context 上下文
*/
public register(name: string, callback: Function, context: any) {
let observers: Observer[] = this.listeners[name];
if (!observers) {
this.listeners[name] = [];
}
this.listeners[name].push(new Observer(callback, context));
}
/**
* 移除事件
* @param name 事件名称
* @param callback 回调函数
* @param context 上下文
*/
public removeListener(name: string, context: any) {
let observers: Observer[] = this.listeners[name];
if (!observers) return;
let length = observers.length;
for (let i = 0; i < length; i++) {
let observer = observers[i];
if (observer.compar(context)) {
observers.splice(i, 1);
break;
}
}
if (observers.length == 0) {
delete this.listeners[name];
}
}
/**
* 发送事件
* @param name 事件名称
*/
public fire(name: string, ...args: any[]) {
let observers: Observer[] = this.listeners[name];
if (!observers) return;
let length = observers.length;
for (let i = 0; i < length; i++) {
let observer = observers[i];
observer.notify(name, ...args);
}
}
}
}
使用起来也很简单,使用示例代码如下:
事件的监听
T.EventCenter.getInst().register("test", ()=>{
//dosomthing()
},this);
// 注意,需要在和removeListener成对使用
T.EventCenter.getInst().removeListener("test",this);
发送消息
T.EventCenter.getInst().fire("test");
打包成js
当然我们可以选择将其打包成js,操作也很简单,在项目的更目录下添加tsconfig.json
的ts项目工程配置文件,示例的代码如下:
{
"compilerOptions": {
"target": "es5",
"noImplicitAny": false,
"lib": [
"dom",
"es5",
"es6",
"es2015.promise"
],
"removeComments": true,
"sourceMap": false,
"declaration": true,
"outFile": "bin/eventBus.js"
},
"include": [
"src/*.ts",
"libs/*.d.ts"
],
"exclude": [
"node_modules",
"library",
"local",
"temp",
"build",
"settings"
]
}
详情参考官网https://www.tslang.cn/docs/handbook/tsconfig-json.html.