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

时间:2012-06-21 13:24:35

标签: javascript performance events closures

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

我可以这样做:

  1. 直接在Item构造函数中包含所有事件处理程序 他们可以访问正在构造的对象(var that = this)。 我不认为在这里拥有所有这些代码是个好主意,但是 我可能会过分思考这个。

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

  3. 在代码中有一个区别的函数 registerItemEvents(item)在Item构造函数中调用并用于 在处理程序的项目上生成一个闭包,它将存在 在里面。

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

1 个答案:

答案 0 :(得分:0)

我认为如果可能的话,你应该考虑使用代表。据我所知,添加和删除事件处理程序会增加不必要的开销。

无论您如何选择实施(jquery,yui,其他,自定义),这篇帖子来自Yahoo!有一些很好的信息

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