拥有pubsub实现vs使用addEventListener()+ CustomEvent?

时间:2017-11-22 00:37:17

标签: javascript events design-patterns publish-subscribe

自制的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更优雅。但这不是技术论证。 :)

资源

1 个答案:

答案 0 :(得分:2)

我没有CustomEvent的经验但是检查MDN,我缺少对移动和IE的支持。最后一次我不得不处理原生事件+自定义有效载荷;这是一种痛苦。

  

两者都会做同样的工作吗? (我想是这样吗?)

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

  

那么实际上是否存在明显差异?喜欢表演?   如果可以使用这两种方法,两者的优点和缺点是什么?

本机实现几乎经过了战斗测试。它的功能有限,但应该没有意外。

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

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

  

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

优雅很少是一个自给自足的目标。优雅的代码读取/扫描速度更快,易于理解,因此不易出错。总体而言,更快的发展可能不是一个技术论点,但它绝对是一个需要考虑的论据。

归根结底,这取决于您,本地活动是否适合您的特定需求,或者您最好使用自定义的pubsub。但对我来说,

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);