Flutter實(shí)戰(zhàn) 事件總線

在 APP 中，我們經(jīng)常會(huì)需要一個(gè)廣播機(jī)制，用以跨頁面事件通知，比如一個(gè)需要登錄的 APP 中，頁面會(huì)關(guān)注用戶登錄或注銷事件，來進(jìn)行一些狀態(tài)更新。這時(shí)候，一個(gè)事件總線便會(huì)非常有用，事件總線通常實(shí)現(xiàn)了訂閱者模式，訂閱者模式包含發(fā)布者和訂閱者兩種角色，可以通過事件總線來觸發(fā)事件和監(jiān)聽事件，本節(jié)我們實(shí)現(xiàn)一個(gè)簡單的全局事件總線，我們使用單例模式，代碼如下：

//訂閱者回調(diào)簽名
typedef void EventCallback(arg);
class EventBus {
  //私有構(gòu)造函數(shù)
  EventBus._internal();
  //保存單例
  static EventBus _singleton = new EventBus._internal();
  //工廠構(gòu)造函數(shù)
  factory EventBus()=> _singleton;
  //保存事件訂閱者隊(duì)列，key:事件名(id)，value: 對(duì)應(yīng)事件的訂閱者隊(duì)列
  var _emap = new Map<Object, List<EventCallback>>();
  //添加訂閱者
  void on(eventName, EventCallback f) {
    if (eventName == null || f == null) return;
    _emap[eventName] ??= new List<EventCallback>();
    _emap[eventName].add(f);
  }
  //移除訂閱者
  void off(eventName, [EventCallback f]) {
    var list = _emap[eventName];
    if (eventName == null || list == null) return;
    if (f == null) {
      _emap[eventName] = null;
    } else {
      list.remove(f);
    }
  }
  //觸發(fā)事件，事件觸發(fā)后該事件所有訂閱者會(huì)被調(diào)用
  void emit(eventName, [arg]) {
    var list = _emap[eventName];
    if (list == null) return;
    int len = list.length - 1;
    //反向遍歷，防止訂閱者在回調(diào)中移除自身帶來的下標(biāo)錯(cuò)位 
    for (var i = len; i > -1; --i) {
      list[i](arg);
    }
  }
}
//定義一個(gè)top-level（全局）變量，頁面引入該文件后可以直接使用bus
var bus = new EventBus();

使用示例：

//頁面A中
...
 //監(jiān)聽登錄事件
bus.on("login", (arg) {
  // do something
});
//登錄頁B中
...
//登錄成功后觸發(fā)登錄事件，頁面A中訂閱者會(huì)被調(diào)用
bus.emit("login", userInfo);

注意：Dart 中實(shí)現(xiàn)單例模式的標(biāo)準(zhǔn)做法就是使用 static 變量+工廠構(gòu)造函數(shù)的方式，這樣就可以保證new EventBus()始終返回都是同一個(gè)實(shí)例，讀者應(yīng)該理解并掌握這種方法。

事件總線通常用于組件之間狀態(tài)共享，但關(guān)于組件之間狀態(tài)共享也有一些專門的包如 redux、以及前面介紹過的 Provider。對(duì)于一些簡單的應(yīng)用，事件總線是足以滿足業(yè)務(wù)需求的，如果你決定使用狀態(tài)管理包的話，一定要想清楚您的 APP 是否真的有必要使用它，防止“化簡為繁”、過度設(shè)計(jì)。