请问下 JavaScript 的 CustomEvent 和自己手搓的发布订阅哪个更快效率更好？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

// JS 的内置发布订阅

// create custom events
const catFound = new CustomEvent("animalfound", {
  detail: {
    name: "cat",
  },
});
const dogFound = new CustomEvent("animalfound", {
  detail: {
    name: "dog",
  },
});

const element = document.createElement("div"); // create a <div> element

// add an appropriate event listener
element.addEventListener("animalfound", (e) => console.log(e.detail.name));

// dispatch the events
element.dispatchEvent(catFound);
element.dispatchEvent(dogFound);

// "cat" and "dog" logged in the console

// 我的自定义发布订阅，我的桌面应用移动应用网页应用都是用它驱动的。

export class StateManage<T> {
  private inValue: T
  private publishChangeCalls: (() => void)[] = []

  constructor(v: T) {
    this.inValue = v
  }

  subscriptChange(subCall: () => void) {
    this.publishChangeCalls.push(subCall)
  }

  unsubscriptChange(subCall: () => void) {
    this.publishChangeCalls = this.publishChangeCalls.filter(sub => !Object.is(sub, subCall))
  }

  set value(v: T) {
    this.inValue = v
    this.publishChangeCalls.forEach(call => call())
  }

  get value(): T {
    return this.inValue
  }
}

CustomEvent

发布订阅

效率

4 条回复

DOLLOR

1 天前

设计 Pub/Sub ，需要考虑的一些问题：
1 、set value 收到的新值（ v ）跟旧值（ inValue ）相等(===)时，有无必要触发事件？
2 、publishChangeCalls 被调用时如果再次修改 value ，如何确保其他订阅者的调用顺序？
3 、publishChangeCalls 应该考虑接收两个参数，新值和旧值，比如这样：(newValue: T, oldValue: T) => void 。
4 、有时我们刚订阅的时候，想让该新的 publishChangeCalls 立刻被执行一次，方便初始化。
5 、是 subscribe ，不是 subscript （😂）。

参考我也曾经造过轮子。
https://imgur.com/a/NdlvoNf

ChrisFreeMan

1 天前

@DOLLOR 靠，居然一直没发现我打错了，好在都是自己的项目。。。😅

你说的 1 ，2 ，3 ，4 都不是我遇到的问题啊，这些问题我都会在其他地方处理的。而且我问的也不是这个。

ChrisFreeMan

1 天前

算了，突然发现我问了一个很无聊的问题，我已经问 AI 了解决了，我自己沉了吧。

rimworld

1 天前

一般来说是语言自带的会比较好吧，运行环境（ v8 ）啥的会做优化。