在ts中并闲,我們也需要一個(gè)通用的事件傳遞機(jī)制细睡,類(lèi)似于android中的eventBus,當(dāng)然這個(gè)在ts中實(shí)現(xiàn)起來(lái)是很簡(jiǎn)單的帝火。
代碼如下:
核心類(lèi)溜徙,處理事件的核心/。
/**
* 觀察者
*/
namespace T {
export class Observer {
/** 回調(diào)函數(shù) */
private callback: Function = null;
/** 上下文 */
private context: any = null;
constructor(callback: Function, context: any) {
let self = this;
self.callback = callback;
self.context = context;
}
/**
* 發(fā)送通知
* @param args 不定參數(shù)
*/
notify(...args: any[]): void {
let self = this;
self.callback.call(self.context, ...args);
}
/**
* 上下文比較
* @param context 上下文
*/
compar(context: any): boolean {
return context == this.context;
}
}
}
下面是的整個(gè)事件的處理中心犀填。
/**
* 事件消息處理
*/
namespace T{
export class EventCenter {
/** 監(jiān)聽(tīng)數(shù)組 */
private listeners = {};
private static instance = null;
public static getInst(): EventCenter {
if(!this.instance || this.instance == null) {
this.instance = new EventCenter();
}
return this.instance;
}
/**
* 注冊(cè)事件
* @param name 事件名稱(chēng)
* @param callback 回調(diào)函數(shù)
* @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 事件名稱(chēng)
* @param callback 回調(diào)函數(shù)
* @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];
}
}
/**
* 發(fā)送事件
* @param name 事件名稱(chēng)
*/
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);
}
}
}
}
使用起來(lái)也很簡(jiǎn)單蠢壹,使用示例代碼如下:
事件的監(jiān)聽(tīng)
T.EventCenter.getInst().register("test", ()=>{
//dosomthing()
},this);
// 注意,需要在和removeListener成對(duì)使用
T.EventCenter.getInst().removeListener("test",this);
發(fā)送消息
T.EventCenter.getInst().fire("test");
打包成js
當(dāng)然我們可以選擇將其打包成js九巡,操作也很簡(jiǎn)單图贸,在項(xiàng)目的更目錄下添加tsconfig.json
的ts項(xiàng)目工程配置文件,示例的代碼如下:
{
"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"
]
}
詳情參考官網(wǎng)https://www.tslang.cn/docs/handbook/tsconfig-json.html.