eventBus.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. class EventBus {
  2. constructor() {
  3. // 初始化事件列表
  4. this.eventObject = {};
  5. // 回调函数列表的id
  6. this.callbackId = 0;
  7. }
  8. // 发布事件
  9. publish(eventName, ...args) {
  10. // 取出当前事件所有的回调函数
  11. const callbackObject = this.eventObject[eventName];
  12. if (!callbackObject) return console.warn(eventName + " not found!");
  13. // 执行每一个回调函数
  14. for (let id in callbackObject) {
  15. // 执行时传入参数
  16. callbackObject[id](...args);
  17. // 只订阅一次的回调函数需要删除
  18. if (id[0] === "d") {
  19. delete callbackObject[id];
  20. }
  21. }
  22. }
  23. // 订阅事件
  24. subscribe(eventName, callback) {
  25. // 初始化这个事件
  26. if (!this.eventObject[eventName]) {
  27. // 使用对象存储,注销回调函数的时候提高删除的效率
  28. this.eventObject[eventName] = {};
  29. }
  30. const id = this.callbackId++;
  31. // 存储订阅者的回调函数
  32. // callbackId使用后需要自增,供下一个回调函数使用
  33. this.eventObject[eventName][id] = callback;
  34. // 每一次订阅事件,都生成唯一一个取消订阅的函数
  35. const unSubscribe = () => {
  36. // 清除这个订阅者的回调函数
  37. delete this.eventObject[eventName][id];
  38. // 如果这个事件没有订阅者了,也把整个事件对象清除
  39. if (Object.keys(this.eventObject[eventName]).length === 0) {
  40. delete this.eventObject[eventName];
  41. }
  42. };
  43. return { unSubscribe };
  44. }
  45. // 只订阅一次
  46. subscribeOnce(eventName, callback) {
  47. // 初始化这个事件
  48. if (!this.eventObject[eventName]) {
  49. // 使用对象存储,注销回调函数的时候提高删除的效率
  50. this.eventObject[eventName] = {};
  51. }
  52. // 标示为只订阅一次的回调函数
  53. const id = "d" + this.callbackId++;
  54. // 存储订阅者的回调函数
  55. // callbackId使用后需要自增,供下一个回调函数使用
  56. this.eventObject[eventName][id] = callback;
  57. // 每一次订阅事件,都生成唯一一个取消订阅的函数
  58. const unSubscribe = () => {
  59. // 清除这个订阅者的回调函数
  60. delete this.eventObject[eventName][id];
  61. // 如果这个事件没有订阅者了,也把整个事件对象清除
  62. if (Object.keys(this.eventObject[eventName]).length === 0) {
  63. delete this.eventObject[eventName];
  64. }
  65. };
  66. return { unSubscribe };
  67. }
  68. // 清除事件
  69. clear(eventName) {
  70. // 未提供事件名称,默认清除所有事件
  71. if (!eventName) {
  72. this.eventObject = {};
  73. return;
  74. }
  75. // 清除指定事件
  76. delete this.eventObject[eventName];
  77. }
  78. }
  79. // 测试
  80. const eventBus = new EventBus();
  81. // 订阅事件eventX
  82. // eventBus.subscribe("eventX", (obj, num) => {
  83. // console.log("模块A", obj, num);
  84. // });
  85. // eventBus.subscribe("eventX", (obj, num) => {
  86. // console.log("模块B", obj, num);
  87. // });
  88. // eventBus.subscribe("eventX", (obj, num) => {
  89. // console.log("模块C", obj, num);
  90. // });
  91. // 发布事件eventX
  92. // eventBus.publish("eventX", { msg: "EventX published!" }, 1);
  93. // 清除
  94. // eventBus.clear("eventX");
  95. // 再次发布事件eventX,由于已经清除,所有模块都不会再收到消息了
  96. // eventBus.publish("eventX", { msg: "EventX published again!" }, 2);
  97. export default eventBus;