在 JavaScript 中,不同的自定义事件处理方式有什么区别?
我偶然看到下面关于 JavaScript 自定义事件处理的帖子。从这些文章中,至少有两种处理/触发自定义事件的方法:
- 使用 DOM 方法(createEvent、dispatchEvent)
- 我如何在 Javascript 中创建自定义事件类?
- http://the.unwashedmeme.com/blog/2004/10/04/custom-javascript-events/
- 自定义代码
- http://www.nczonline.net/blog/2010/03/09/custom-events-in-javascript/
- http://www.geekdaily.net/2008/04/02/javascript-defining-and-using-custom-events/
但是处理(触发和订阅)自定义事件的推荐方法是什么?
[编辑] 这个问题的背景是不使用任何像 jQuery、YUI 等库,只使用纯 JavaScript
[编辑 2] 似乎存在一些微妙的差异,至少在错误处理方面如此。Dean Edwards ( http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/ ) 推荐采用前一种方式进行自定义事件处理。我们能说这是一个差异吗?
答案#1
你描述的是……之间的区别
- 基于自定义事件的消息传递系统
- 手动触发 DOM 事件。
前者是一种使用事件进行消息传递的方法。一个例子是创建一个 EventEmitter
后者只是手动使用浏览器内置的 DOM 事件系统的一种方式。这基本上是使用 DOM 3 事件 API,该 API 本身存在于(有能力的/现代的)浏览器中。
所以问题很简单,你想做什么?触发 DOM 事件还是使用事件进行消息传递?
基准显示 DOM 3 自定义事件慢 98%
DOM 似乎有一个 巨大的 开销。这是因为它支持事件传播和冒泡。它的开销还因为它支持将事件绑定到 DOM 元素。
如果你不需要 DOM3 事件的任何功能,那么可以使用你选择的发布/订阅库。
[编辑 2]
这就是关于错误处理的全部内容,你如何进行错误处理取决于你自己。如果你知道你的事件发射器是同步的,那么这是预期的行为。要么自己处理错误,要么使用setTimeout使其变为异步。
请注意,如果你将其设为异步,你就“失去了”在 emit/trigger/dispatch 调用返回后,事件处理程序已经完成其逻辑的保证。这需要一个与假设事件触发器是同步的情况完全不同的高层设计。这不是一个可以轻率做出的选择
答案#2
每种都有利弊。使用适合你的。
使用 DOM 方法最明显的“缺点”是它们与基于浏览器的部署绑定在一起,并且即使在不太合理的情况下也会涉及 DOM(例如,消息传递与 DOM 对象无关),而标准的观察者风格实现可以在任何环境中使用,不仅限于网页浏览器,而且可以用于你喜欢的任何通用对象。
自行实现 Observer 的最明显缺点是,你自己实现了 Observer,而不是重用环境中已有的(已测试、调试、优化等)。