事件总线

在APP中,我们经常会需要一个广播机制,用以跨页面事件通知,比如一个需要登录的APP中,页面会关注用户登录或注销事件,来进行一些状态更新。这时候,一个事件总线便会非常有用,事件总线通常实现了订阅者模式,订阅者模式包含发布者和订阅者两种角色,可以通过事件总线来触发事件和监听事件,本节我们实现一个简单的全局事件总线,我们使用单例模式,代码如下:

  1. //订阅者回调签名
  2. typedef void EventCallback(arg);
  3. class EventBus {
  4. //私有构造函数
  5. EventBus._internal();
  6. //保存单例
  7. static EventBus _singleton = new EventBus._internal();
  8. //工厂构造函数
  9. factory EventBus()=> _singleton;
  10. //保存事件订阅者队列,key:事件名(id),value: 对应事件的订阅者队列
  11. var _emap = new Map<Object, List<EventCallback>>();
  12. //添加订阅者
  13. void on(eventName, EventCallback f) {
  14. if (eventName == null || f == null) return;
  15. _emap[eventName] ??= new List<EventCallback>();
  16. _emap[eventName].add(f);
  17. }
  18. //移除订阅者
  19. void off(eventName, [EventCallback f]) {
  20. var list = _emap[eventName];
  21. if (eventName == null || list == null) return;
  22. if (f == null) {
  23. _emap[eventName] = null;
  24. } else {
  25. list.remove(f);
  26. }
  27. }
  28. //触发事件,事件触发后该事件所有订阅者会被调用
  29. void emit(eventName, [arg]) {
  30. var list = _emap[eventName];
  31. if (list == null) return;
  32. int len = list.length - 1;
  33. //反向遍历,防止在订阅者在回调中移除自身带来的下标错位
  34. for (var i = len; i > -1; --i) {
  35. list[i](arg);
  36. }
  37. }
  38. }
  39. //定义一个top-level变量,页面引入该文件后可以直接使用bus
  40. var bus = new EventBus();

使用

  1. //页面A中
  2. ...
  3. //监听登录事件
  4. bus.on("login", (arg) {
  5. // do something
  6. });
  7. //登录页B中
  8. ...
  9. //登录成功后触发登录事件,页面A中订阅者会被调用
  10. bus.emit("login", userInfo);

注意:Dart中实现单例模式的标准做法就是使用static变量+工厂构造函数的方式,这样就可以保证new EventBus()始终返回都是同一个实例,读者应该理解并掌握这种方法。

事件总线通常用于Widget之间状态共享,但关于Widget之间状态共享也有一些专门的Package如redux,这和web框架Vue/React是一致的。通常情况下事件总线是足以满足业务需求的,如果你决定使用redux的话,一定要想清楚业务是否真的有必要用它,防止“化简为繁”、过度设计。