javascript - 用于单页 Web 应用程序的 ExtJS 5 架构

Question

单页 Web 应用程序架构 ExtJS 5 的正确方法是什么。

• ExtJS 适合“单页 Web 应用程序 (SPA)”吗？我们没有多个标记页面来将不同的 JS 文件引用到不同的 url。或者更确切地说，我们如何在 SPA 中最好地使用 ExtJS？
  • 详细信息:在www.domain/home.html中，我可以引用tab.js，它将加载选项卡布局，然后用户单击“关于us”链接，它将加载一个 www.domain/about.html，这里我引用 aboutTree.js 它将在左侧面板上加载树小部件。这看起来很容易。我可以创建一个新的 JS 文件，该文件将具有完整的 store、model、OnReady()，如 sencha 文档 examples 中所示。 .
• 大多数客户主要如何使用 Sencha ExtJS？只是其应用程序某些部分的小部件，还是整个应用程序由 Sencha ExtJS 驱动？
• 完整的 Web 应用程序可以仅由 ExtJS 驱动吗？我尝试了一个用于移动网站的 Sencha Touch 示例，该示例可以使用单个 URL 导航到新页面(例如: Sencha Fiddle 或 Practice Site )。但这对于 Web 应用程序来说可能吗？有没有任何示例可供我引用如何仅使用 Sencha ExtJS 在页面之间导航。
• 友好网址:如果我遵循此结构，我尝试移动网站“Practice Site”(仅处理“关于”和“主页”链接)我网站中的所有页面都将总是有 /mobile.html 网址，我该如何使其具有友好的网址，例如 /about、/contact 等？

这里有类似的问题ExtJS Architecture for Multi Page Application ，但关注不同的问题。

Answer 1

ExtJS 对于单页应用程序来说非常出色。这将是它更好的用途之一。我会按顺序回答。

1. 在创建 SPA 时，您应该考虑通过 ajax 调用将数据拉入选项卡，如果这不是一个选项，并且您只有静态信息，您可以在面板中预设 html。如果您像在第一部分中讨论的那样放弃 MVC 范例，那么最好将每个组件构建在单个 onReady 中。如果使用正确的 MVC/MVVM 范例，您将需要在每个组件下设置大部分应用程序，例如单独的集合存储、单独的模型，并将它们全部调用到主 application.js 中，并使用 Controller 来管理应用程序的逻辑。对于这两种情况，您应该仍然只调用单个索引文件并允许 ExtJS 管理您的应用程序，而不是拥有多个 html 页面。
2. ExtJS 几乎完全用于创建完全由 ExtJS 在前端驱动的完整应用程序。该平台拥有如此多的功能，如果您选择使用它，就没有理由使用它之外的任何功能。
3. 是的，ExtJS 可以完全驱动您的应用程序。建议进行一些备份设置以动态提取数据，否则您将只有一个静态页面。以下是 ExtJS 中路由功能的示例 Extjs 5 Guide Router
4. 就像上一节一样，路由器将为您的应用程序创建友好的 URL。只需看一下路由器即可。

从查看您所引用的内容来看，最好摆脱这些多个 html 页面并允许 ExtJS 执行其维护和控制整个应用程序的操作。