在 DOM 中为 JavaScript Web 应用程序构建多个页面答案

【问题标题】：Structuring multiple pages within DOM for JavaScript web app在 DOM 中为 JavaScript Web 应用程序构建多个页面
【发布时间】：2012-07-06 17:31:28
【问题描述】：

我正在构建一个管理应用程序，用户必须在其中输入 PIN，将信息与加载的变量进行比较，然后用户继续访问为其部门指定的特定页面。从那里，他们可以产生一棵大约五页的树；都是动态的。

我应该如何管理 DOM 中的多个页面？

最初，我的想法是创建一个 HTML 树，每个部门都有一个 DIV，然后在该 HTML 树中的其他页面中创建树，在需要时使用 JavaScript 编辑动态内容。

我进行了一些研究，并遇到了模板引擎和使用 iframe 等解决方案。我希望这是一个结构牢固且稳定的应用程序，所以我认为使用 iframe 并不是最好的解决方案。

【问题讨论】：

您愿意使用任何框架吗？他们可能会简化这一点......
查看 jQuery 手机：jquerymobile.com 我曾经创建了一个单页应用程序，其中包含多个“页面”（部分？），这些页面要么是隐藏的 div，要么是 iframe，要么是加载 ajax 的 div，然后我创建了一个“manager”对象来记录页面的当前状态，比如哪个部分是活动的，以及包含改变页面的功能、动画等等。如果我再做一个，我想我会用 jQuery Mobile 来做. PS：jquery mobile通过ajax加载HTML页面，这就是它有用的原因。你可能不太需要 jquery 移动 UI 的东西，但如果你有移动 usr 可能会很有用
@hvgotcodes jQuery，但我愿意接受建议。
This page 可能与您的问题有关。

【解决方案1】：

您应该遵循所选框架的最佳实践。我建议看看ember.js。在 ember（和 sproutcore）中，您定义视图，可以通过模板或以编程方式声明。所以你的应用程序的每个部分都是一个视图，带有子视图。 ember 的好处是：

1) 允许您的视图在模型更改时更新的绑定
2) 一种状态图机制，可让您分离关注点并处理应用程序逻辑
3) 灵活的视图系统
4) 允许做你想做的事情的机制，比如将视图绑定到 url...

如果我必须直接用 js 来做，我可能会开发最简单的视图系统来满足我的需求，将视图的概念从 dom 的渲染中抽象出来。没有它，我看不到任何保持代码整洁的方法。

【讨论】：