Question

我正在开发一个大型单页Backbone JS应用程序。我有几个由大型div组成的视图，当用户导航到特定的哈希位置时，骨干路由器加载视图，这基本上触发了一个事件＆＃34; show＆＃34;在特定的主干视图上，它卸载所有其他视图，$（this.el）变得可见。

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

禁用或取消激活非活动/隐藏视图的事件有什么好处？现在所有的视图都已经实例化，并准备好触发＆＃34; show＆＃34;或者＆＃34;隐藏＆＃34;事件，但我认为，在隐藏的视图上禁用所有与DOM相关的事件，并且解除隐藏视图正在使用的模型或集合，可能更有效的内存/性能。

我正在考虑进行一次＆＃34;清理＆＃34;当用户从活动视图切换到新视图时触发的触发器，它会禁用所有事件然后隐藏div，但这是必要的，还是有更好的方法来实现这一点，减少内存使用并提高性能？

Answer 1

我使用的解决方案是在DOM中只保留一种类型的视图。即：

假设我们有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({
});

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

Answer 2

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

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

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

你还应该考虑一下你是否真的希望保存这么多观点。它不是你会得到的记忆问题。它关于地狱的一致性。您必须确保所有视图都能获得模型的所有更改，并且即使它们不可见也会自行更新。在一些较大的单页应用程序上工作，我可以说，重新渲染您的视图然后保存它们会好得多。

在大型主干js app中切换视图时禁用事件侦听器

2 个答案: