单页网页应用基本逻辑

Question

我正在创建一个小型 Web 应用程序。 该应用程序有几个屏幕（列表、内部列表、项目详细信息等）。 我在服务器上有一个 REST API，我需要创建客户端。

一开始我考虑了每个主屏幕的 HTML 页面。 对于每个页面，我都有一个 CSS 和 JS 代码。 HTML 将仅包含将由 JS 代码填充的占位符（空 div）。

然后我决定将应用程序创建为单页应用程序，并使用带有锚点的 URL 来暗示状态 (domain.com/#list1#item1)。

我发现this 问题可以提供有关应用程序架构的信息，但我想知道：

1) 如何以干净的方式将正确的 CSS 提供给页面？

2) 如何以简洁的方式定义页面基本结构（HTML div 的方式）？

Answer 1

除非您的 css 从一页到下一页有很大不同，否则它可能应该在一页中。您将拥有一个基本 css 文件，该文件将提供给每个页面，然后根据需要为每个页面提供页面特定 css 文件。这个想法是减少页面加载开销，但在您的情况下，它听起来很小，所以将所有内容放在一个 css 文件中应该不会产生太大的影响。

至于页面结构，首先在纸上粗略地绘制每个页面，然后在 div 中使用铅笔。然后看看事情是如何重叠的，什么是主页面布局元素，什么是实际的页面布局元素。然后看看常见的部分来决定如何设置你的 div。

老实说，试图在一页中完成所有操作，div 的布局充其量只会有点混乱。除非它是相关的功能，如向导的步骤或类似的东西，否则如果您尝试添加或更改内容，将它们全部放在一个页面中可能会导致问题。