【问题标题】:Best practices attaching Event Handlers in large systems在大型系统中附加事件处理程序的最佳实践
【发布时间】:2012-06-21 13:24:34
【问题描述】:

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

我可以这样做:

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

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

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

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

【问题讨论】:

    标签: javascript performance events closures


    【解决方案1】:

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

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

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

    【讨论】:

      猜你喜欢
      • 2012-08-12
      • 1970-01-01
      • 2017-04-26
      • 2011-08-16
      • 2020-07-28
      • 2015-04-25
      • 1970-01-01
      • 2014-09-04
      • 1970-01-01
      相关资源
      最近更新 更多