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

Best practices attaching Event Handlers in large systems

本文关键字:程序 最佳 事件处理 大型 系统      更新时间:2023-09-26

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

我可以这样做:

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

  2. 将处理程序存储在单独的处理程序集合对象中并使用辅助函数访问项目对象getItemFromDOM(div) 读取divs id 并搜索数组中的相应项,其中文档中的所有项都位于数据处理。

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

我猜最优雅的是第三个,但我可能高估了整洁,拒绝了第一个。另外,使用第三个,如果我开始删除项目,对它们的关闭是否会阻止内存被释放,最终减慢整个事情的速度?是否可以通过在删除项目之前简单地释放事件处理程序来解决此问题?

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

无论你选择如何实现(jquery,yui,other,custom),雅虎的这篇文章都有一些很好的信息

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