如何更好地组织Web单页面应用程序中的多视图？

Question

假设我的单页应用中有很多视图。这意味着，我在div中放置了一些 view ，并根据用户的操作显示该视图或该视图。所以，我通常一次在视野中展示。例如，我有这些视图 - 信息中心，设置，条目，条目详细信息。

根据应用的当前状态，其中一个视图可见，而其他视图则不可见。当我走这条路时仪表板＆gt; 条目＆gt; 条目详细信息，然后修改一些条目详细信息，然后点击保存或返回按钮，我希望该应用返回条目。但是，如果我在仪表板上有一个链接，例如转到最新编辑的条目，我就可以这样仪表板＆gt; 条目详细信息，在这种情况下，我想通过点击保存或返回按钮返回信息中心。

使用更深入的视图路径，这种情况会变得更加复杂。现在我像这样管理它 - 当点击负责视图切换的按钮时，变量state正在改为from_dashboard_to_entries。我监听要更改的变量，然后根据state变量值从另一个函数切换所有视图。这样我就必须手动定义所有可能的场景并测试所有可能的案例组合。现在这种方法效果很好，但我担心更深或更长的视图序列。

我的想法是以某种方式创建一个数组或其他东西的视图历史，但我不清楚如何更好地做到这一点。 请分享您的想法，如何组织这个。

Answer 1

只需不要担心源视图 - 您无需知道它就可以更改为目标视图。如果您想要一个历史记录，而不是手动存储它，请考虑使用HTML5 History API，最好使用包装程序库（例如History.js）。

Answer 2

相反，我们应该在更改应用程序状态时设置视图。这可以通过在启动时不加载所有视图来优化初始应用程序启动时间，并为按需加载提供方法。