Javascript 单页web应用程序基本逻辑

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

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

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

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

1） 如何以干净的方式将正确的CSS服务到页面

---

2） 如何以干净的方式定义页面的基本结构（就像HTML div那样）？

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

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

---

老实说，试图在一页中完成所有工作，div的布局最多也会有点混乱。除非它是相关的功能，如向导的步骤或类似的内容，否则如果您试图添加或更改内容，将所有内容放在一个页面中可能会导致后续问题

我将添加单页功能作为额外功能。您可以使用常规链接和重定向构建页面，但可以使用JavaScript拦截所有这些请求并使页面运行良好。