1

我正在开发一个大型单页 Backbone JS 应用程序。我有几个由一个大 div 组成的视图，当用户导航到特定的哈希位置时，主干路由器会加载视图，这基本上会在特定的主干视图上触发“显示”事件，并卸载所有其他视图和 $( this.el) 变得可见。

基本上最后我会得到几个视图，在它们之间切换时会做同样的事情，隐藏活动视图 div，并显示与您单击的链接相对应的下一个视图（链接都是主题标签位置）。

禁用或取消委派非活动/隐藏视图的事件有什么好处？现在所有视图都已经实例化并准备好触发“显示”或“隐藏”事件，但我认为在隐藏的视图上禁用所有与 DOM 相关的事件可能会更有效地内存/性能，并取消绑定隐藏视图正在使用的模型或集合。

我正在考虑有一个“清理”触发器，当用户从活动视图切换到新视图时触发，禁用所有事件，然后隐藏 div，但是否有必要，或者有更好的方法来做到这一点，减少内存使用并提高性能？

4

2 回答 2

0

您绝对应该取消绑定视图中隐藏或不再需要的所有事件。考虑一个绑定到模型或集合的视图。该视图不可见，并且模型中的某些内容发生了变化。现在视图会更新其 DOM，尽管更改将不可见。

只有在删除视图时解除绑定 DOM 事件才有意义，因此垃圾收集器可以删除 DOM 元素。如果它仍然具有绑定事件，则可能导致内存泄漏。

看看Marionette框架处理这个问题的方式。在close视图的方法中，它解除绑定到模型/集合的所有事件，并将所有事件解除绑定到 DOM。

您还应该考虑是否真的想保存那么多视图。它与您将遇到的内存问题无关。它关于一致性地狱。您必须确保所有视图都获得模型的所有更改并自行更新它们，即使它们不可见。在处理一些较大的单页应用程序时，我可以说重新渲染视图比保存视图要好得多。

于 2012-09-22T21:34:16.373 回答
0

我为此使用的解决方案是在 DOM 中只保留一种视图。IE：

假设我们有 3 个视图：

var MainView = Backbone.View.extend({
  el: '#main-view',

  events: {
    "click .openView1":   "openView1",
    "click .openView2":   "openView2"
  },

  render: function() {
    //...
  },

  openView1: {
      this.activeView = new View1();
  },

  openView2: {
      this.activeView = new View2();
  }
});

var View1 = Backbone.View.extend({
});

var View2 = Backbone.View.extend({
});

当您将活动视图保存在一个变量中时，您不应该有内存问题。

于 2012-09-22T17:35:24.783 回答