自己的 pubsub 实现与使用 addEventListener() + CustomEvent？

Question

自制的pubsub系统和addEventListener()加上使用new CustomEvent的系统有更大的区别吗？

pubsub（taken from here）的伪代码实现：

// Publishing to a topic:
events.publish('/page/load', {
    url: '/some/url/path' // any argument
});
// ...and subscribing to said topic in order to be notified of events:

var subscription = events.subscribe('/page/load', function(obj) {
    // Do something now that the event has occurred
});

// ...sometime later where I no longer want subscription...
subscription.remove();

原生 API：

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

问题

• 两者会做同样的工作吗？ （我想是的？）
• 那么实际上有什么明显的区别吗？喜欢表演吗？
• 如果两种方式都可以使用，两者的优缺点是什么？

我个人认为，如果您自己实现它，API 看起来比使用提供的 API 更优雅。但这不是技术论点。 :)

资源

• David Walsh pub/sub article
• addEventListener()
• Create and trigger events

Answer 1

我没有使用CustomEvent 的经验，但是查看 MDN，我缺少对移动设备和 IE 的支持。上次我不得不处理原生事件 + 自定义负载；这很痛苦。

两者会做同样的工作吗？ （我想是的？）

没有。本机实现与 DOM 紧密耦合。如果您的用例不涉及 DOM，imo。它承载了太多的臃肿来处理事件冒泡、取消、传播等，而我在我的 pubsubs 中发布的事件对象通常是原始有效负载。

那么实际上有什么明显的区别吗？喜欢表演吗？ 如果两种方式都可以使用，两者的优缺点是什么？

本机实现几乎是经过实战考验的。它的功能有限，但应该不会有什么惊喜。

自定义实现可以更好地根据您的需求和您的个人编程方式进行定制。它通常在功能上更丰富，更精简，阅读更流畅。但它可能包含错误。

在性能方面，我不知道本机实现在内部优化了多少，或者它是否很容易超越。我不确定如何设置一个好的测试来在公平的竞争环境中测试这两种方法。

我个人认为，如果您自己实现它，API 看起来比使用提供的 API 更优雅。但这不是技术论点。 :)

优雅很少是一个自给自足的目标。优雅的代码阅读/扫描速度更快，更易于理解，因此更不容易出错。整体更快的开发可能不是技术论点，但绝对是一个值得考虑的论点。

---

最终由您决定，原生事件是否适合您的特定需求，或者您是否最好使用自定义发布订阅。但对我来说，

var waitinForOk = okBtn.once('click', function(){...});
//...
if(cancelled) waitinForOk.stop();

比阅读更好

var okHandler = function(){ 
  okBtn.removeEventListener('click', okHandler); //once
  //... 
};
okBtn.addEventListener('click', okHandler);
//...
if(cancelled) okBtn.removeEventListener('click', okHandler);