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

160 天前
 ChrisFreeMan
// 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
  }
}
1422 次点击
所在节点    Node.js
4 条回复
DOLLOR
160 天前
设计 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
160 天前
@DOLLOR 靠,居然一直没发现我打错了,好在都是自己的项目。。。😅

你说的 1 ,2 ,3 ,4 都不是我遇到的问题啊,这些问题我都会在其他地方处理的。而且我问的也不是这个。
ChrisFreeMan
160 天前
算了,突然发现我问了一个很无聊的问题,我已经问 AI 了解决了,我自己沉了吧。
rimworld
160 天前
一般来说是语言自带的会比较好吧,运行环境( v8 )啥的会做优化。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1122655

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX