javascript - 重用主干 View

Question

我正在编写一个用户以线性方式移动的 Backbone 应用程序。该应用程序的工作方式类似于电视节目，旁白会引导用户从一个场景到另一个场景。

为了实现这一目标，我有一个父 Episode View 负责在正确的时间加载正确的 Scene View 。到目前为止，我对它的功能很满意。

我需要添加用户在闲暇时从一个场景跳到另一个场景的功能。可能在应用程序的整个生命周期中多次查看同一场景。我的问题是我是否应该在每次加载同一个场景时都创建一个新的场景 View ，或者我是否应该创建一个场景实例，然后在用户第二次、第三次或第四次加载它时重新使用它时间。

下面的示例展示了到目前为止我是如何重用这些场景的。

loadSceneView: function()
{
    var sceneIndex = this.model.getCurrentIndex();

    if(this.scenes[sceneIndex])
    {
        this.scenes[sceneIndex].render();
        console.log('Scene: ' + sceneIndex + ' already loaded. Reusing');
    }
    else
    {
        console.log('Loading Scene: ' + sceneIndex);

        switch(sceneIndex)
        {
            case 0:

                this.scenes[sceneIndex] = new cith.Views.Scene1();
                break;

            case 1:

                this.scenes[sceneIndex] = new cith.Views.Scene2();
                break;

            case 2:

                this.scenes[sceneIndex] = new cith.Views.Scene3();
                break;
        }
    }

    this.currentScene = this.scenes[sceneIndex];
    this.listenTo(this.currentScene, 'scene:ended', this.goToNextScene);

    $('#scene').html(this.currentScene.el);
}

基本上，如果场景数组有一个与当前 sceneIndex 匹配的索引，只需将该 View 加载到 dom 中。否则，创建它，在场景数组中保留对它的引用并将其加载到 DOM 中。

任何人都可以帮助我确定这种方法的优缺点吗？具体来说，我关心尽可能最佳的性能，以及避免内存泄漏作为保留对我(或可能不会)再次使用的这些对象的引用的副作用。

谢谢。

Answer 1

除非您正在构建一个真正的资源密集型应用程序，否则这可能是过早的优化。我会采用最简单的方法，如果性能证明是个问题，稍后再优化代码。

除此之外，可能没有绝对正确的答案。您需要权衡几个因素:

• (重新)构建场景所需的时间。
• 非事件场景使用的内存量
• 场景的使用频率
• 一共有多少个场景

如果构建场景的速度足够快以至于用户不会注意到，并且不涉及下载或加载额外的资源，那么每次都重新渲染 View 可能会很好。但是，如果渲染需要很长时间，那么也许您应该考虑保留 View 。同样，我肯定会保留一个可以重复使用的资源缓存。

另一方面，我猜您的 View 将使用非常少量的内存(特别是与当今大多数机器和手机的 RAM 演出相比)，因此将它们保存在内存中可能行不通成为一个很大的问题(除非你认为你最终会在内存中保留数千个 - 这真的取决于你认为用户将在单个 session 中与多少 View 交互)

如果你真的担心使用太多内存，那么你总是可以只缓存一些 View 而不是所有 View - 或者通过它们被重用的可能性，或者某种“最近的” View 的方案，其中最近的 20 个(或其他) View 存储在内存中，其余的在需要时构建。然而，这有点复杂，而且很可能矫枉过正。