[编者按] 本文作者 Matt 解释了如何构建一个好的架构。除了选择正确的工具外，在我们的组织工作流程中遵循清晰整洁的原则对我们来说非常重要。可能有人会认为文章所说的是DOS时代的标准做法，但这篇文章可能对新手有所帮助。如果您是资深架构师，也欢迎您在评论中与我们分享您的经验和心得。

构建良好的前端架构是开始开发 Web 应用程序或网站的重要一步。良好的实践和编码约定是必不可少的，但是结构呢？我们如何在可管理的时间内构想出一个好的架构？但最重要的是，我们应该从哪里开始？

我想要一个多页项目（网络应用程序或网站）；我希望我的项目支持不同的屏幕尺寸和分辨率，换句话说网站开发，我希望它具有响应性；我希望最终产品是可维护的；我希望最终产品是高性能的；我希望将来的项目可以重复使用相同的模板。正确的工具

现在，我们拥有大量用于现代前端开发工作流程的酷工具。所以面对第 1 点和第 2 点，我告诉自己我需要一个基于 CSS 架构的断点（这将帮助我支持不同的设备和桌面尺寸）。另一方面，大量的 CSS 和文件可能有点令人困惑（这与第 3 点背道而驰），这就是我决定开始使用 CSS 预处理器的原因。关于第4点，答案很简单，我决定使用。在我看来，第 5 点是一个很好的解决方案。

组织工作流程

每个前端项目总是包含库、插件和大量 &CSS 文件（或本示例中的 SCSS），以服务于不同的目的和目标。混合所有元素并使用不同的技术手段将它们组合在一起意味着构建前端工作流程。我们会发现自己在管理一个涉及不同技术的庞大工作流程。这就是为什么我们需要通过在文件夹中遵循模式或约定来保持一切清晰和整洁。这对我们来说非常重要。

我们可以选择在一个巨大的组合中分解所有基本的前端组件，如下所示：

当然，我们可以继续细分：

SCSS

js

在基于模板的架构中（例如使用.php 或jade with），我们还可以按如下方式拆分视图：

本文不讨论视图，因为我假设项目中的每个页面或布局只有一个视图（HTML 文件）。

基于这些初步考虑，这是我的文件夹树：

文件夹树注解

图片

存储所有图像文件：.png、.jpg、.jpeg、壁纸等。

示例：icon.png、home-.jpeg、.jpg。

js（主文件夹）

存储 .js 文件。子文件夹的组织方式如下：

\（子文件夹）

存储控制器，每个控制器都与对应的视图同名。例如，如果 home.html 需要一个控制器，您可以像这样创建一个文件：\js\\home.js。

示例：home.js、user-.js、user-.js

\libs（子文件夹）

对于存储库php网站前台模板，这里当然不包含任何插件。

示例：-.js、.js、.js

\（子文件夹）

插件需要依赖才能工作，库不需要，这就是这里创建两个文件夹的原因。

示例：-.js、.js、.js、-.js

\（子文件夹）

存储所有展示的东西php网站前台模板，每个文件都和对应的视图同名。例如，如果 home.html 需要一些效果、材质和插件初始值，您可以创建如下文件：\js\\home.js。

示例：home-.js、user-.js、user-.js、site-.js

CSS（主文件夹）

此文件夹包含从主 SCSS 文件生成的所有 CSS。例如 home.scss 会在这个文件中生成对应的 home.css 文件。

\libs（子文件夹）

即使对于 CSS 文件，我也会区分库和插件，这里有一些 CSS 库的示例。

示例：- .scss、.scss、.scss、.scss

\（子文件夹）

此文件夹中包含的 CSS 文件是插件工作的基本样式。

示例：-.scss、.scss

\（子文件夹）

我决定把这个目录下的scss文件分享到整个项目页面，框架子文件会按如下方式组织：

\（子文件夹）

这是一个敏感的部分。此目录中的文件以涵盖所有屏幕分辨率并遵循移动优先原则的方式组织。因此，您应该使用 _all.scss 声明您自己的样式。此文件中的规范声明适用于所有屏幕尺寸和所有视图。如果您希望您的网站具有适应性，不要只是重写规则并声明它们用于其他屏幕分辨率。

文件夹组织如下：

这些文件将掌握布局异常并被调用。

注意：这些文件在所有视图（HTML 页面）之间共享。这就是为什么您需要在 scss\ 下创建一个新文件夹来为特定页面赋予特定样式的原因。

最后

我知道这不是一个通用的解决方案，在某些情况下可能会有一些冗余网站制作，但我认为这是一个很好的起点。无论目的是什么，我的建议是根据您的需求定制您自己的架构或框架，特别是在不损失用户体验的情况下保证性能和可维护性。（编译：​​陈明）