javascript - 在大型系统中附加事件处理程序的最佳实践

Question

我开始在 javascript 上构建更大的东西，我想知道编码风格和性能。现在我试图弄清楚在这种情况下附加事件处理程序的最佳方法是什么:我有 Item() 构造的对象，文档中有 div，每个 div 一个，具有对应的 id。我想从每个 div 的事件处理程序访问它的项目对象表示。这些项目将被大量操作、创建、删除等，它们的 div 也是如此。可以看看代码here (非常感谢任何关于一般编码风格的反馈)。

我可以这样做:

1. 通过在 Item 构造函数中直接拥有我所有的事件处理程序他们可以访问正在构造的对象(var that = this)。我不认为把所有这些代码放在这里是个好主意，但是我可能想多了。

2. 将处理程序存储在单独的 handlerCollection 对象中并使用辅助功能访问项目对象getItemFromDOM(div) 读取 div id 并搜索数组中的相应项目，其中文档中的所有项目都是存储。

3. 在代码的某个地方有一个函数registerItemEvents(item) 在 Item 构造函数中调用并用于为处理程序生成项目闭包，该闭包将存活在里面。

我猜最优雅的是第三个，但我可能高估了整洁度而拒绝了第一个。也有没有机会，使用第三个，如果我开始删除项目，关闭它们将阻止内存被释放，最终减慢整个事情？我可以通过在删除项目之前简单地释放事件处理程序来解决这个问题吗？

Answer 1

如果可能，我认为您应该考虑使用委托(delegate)。据我所知，添加和删除事件处理程序会增加不必要的开销。

无论您选择如何实现(jquery、yui、其他、自定义)，这篇文章来自 Yahoo!有一些好的信息

http://www.yuiblog.com/blog/2009/11/13/event-delegation-3/