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

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

//訂閱者回調(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;


  //保存事件訂閱者隊列，key:事件名(id)，value: 對應事件的訂閱者隊列
  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ā)后該事件所有訂閱者會被調(diào)用
  void emit(eventName, [arg]) {
    var list = _emap[eventName];
    if (list == null) return;
    int len = list.length - 1;
    //反向遍歷，防止訂閱者在回調(diào)中移除自身帶來的下標錯位 
    for (var i = len; i > -1; --i) {
      list[i](arg);
    }
  }
}


//定義一個top-level（全局）變量，頁面引入該文件后可以直接使用bus
var bus = new EventBus();

使用示例：

//頁面A中
...
 //監(jiān)聽登錄事件
bus.on("login", (arg) {
  // do something
});


//登錄頁B中
...
//登錄成功后觸發(fā)登錄事件，頁面A中訂閱者會被調(diào)用
bus.emit("login", userInfo);

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

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