良好前端架构的搭建

建立一个好的前端架构是开始开发 Web 应用或网站的一个基本步骤。良好的实践和编码常规是必不可少的，但是结构呢？我们如何在可控的时间内构思一个好的架构？但最重要的事情是，我们应该从哪里开始？

当我开始思考这个问题时，我意识到一些事情：

我想要一个多页面项目（一个 Web 应用或网站）；我希望我的项目支持不同的屏幕尺寸和分辨率，换句话说，我希望它是响应式的；我希望最终产品是可被维护的；我希望最终产品性能上是出色的；我希望可以为将来的项目重复使用相同的模板。

正确的工具

现在我们拥有大量很酷的工具可以用于现代化前端开发工作流中。因此，面对第 1、2 点我告诉自己我需要一个基于 CSS 体系结构的中断点（能够帮我支持不同的设备和桌面的大小）。而另一个方面大量的 CSS 和文件可能会有点混乱（这违背了第 3 点），这就是为什么我决定开始使用 CSS 预处理器的原因。关于第 4 点，答案很简单，我决定使用 Gruntjs。而第 5 点在我看来 Yeoman 是一个很好的解决方案。

组织工作流

每个前端项目总是包含库、jQuery 插件和大量的 JavaScript&CSS 文件（或本文例子中的 SCSS）以达到不同的目的和目标。使用不同的技术手段混合所有的元素，并把它们放在一起，这意味着建立一个前端工作流。我们会发现自己在管理一个巨大的、涉及不同技术的工作流。这就是为什么我们需要将所有东西通过遵循一种模式或公约置入文件夹中，以此来保持清晰、整洁。这对我们而言是非常重要的。

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

SCSS 文件 scripts（脚本）views（视图）

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

SCSS

variables（变量）mixins（混合类）公共部分到每一个布局单一布局

js

库（如：jquery、angularjs、gAnalytics 等等）插件（通常为 jquery 插件）控制器（我的意思是类似 angularjs 这样的控制器）

在一个基于模板的架构（例如使用 blade.php 或 jadewithnodejs）我们也可以将视图分割如下：

views

公共部分到每一个视图单一视图

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

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

文件夹树注解

imgs

存放所有的图片文件：.png、.jpg、.jpeg、壁纸等。

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

js（主文件夹）

存放.js 文件。子文件夹组织情况如下：

\controllers（子文件夹）

存放 angular 控制器，每一个控制器都有一个与对应视图相同的名字。比如，如果 home.html 需要一个 angular 控制器，你可以创建一个像这样的文件：project\js\controllers\home.js。

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

\libs（子文件夹）

用于存放 JavaScript 库，当然这里不包含插件。

示例：jquery-latest.js、angular.js、googleAnalytics.js

\plugins（子文件夹）

插件需要依赖关系来工作，而库不需要，这也就是为什么这里创建两个文件夹的原因。

示例：jquery-fancyInput.js、restangular.js、customPlugin.js、jquery-airport.js

\views（子文件夹）

存放所有表象的东西，每个文件都与对应的视图名称相同。例如，如果 home.html 需要一些效果、材料以及插件初始值，你可以创建一个像这样的文件：project\js\views\home.js。

示例：home-animations.js、user-registration.js、user-login.js、site-animations.js

CSS（主文件夹）

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

即使是对 CSS 文件，我也会区分库和插件，这里有些 CSS 库例子。

示例：_meyers-reset.scss、_normalize.scss、_animate.scss、_960gridSystem.scss

CSS 文件包含于该文件夹中是使 JavaScript 插件工作的必备风格。

示例：_jquery-fancyInput.scss、_jqueryTooltip.scss

\framework（子文件夹）

我决定在这个目录中存放 scss 文件以共享到整个项目页面，框架子文件将以下面的方式组织：

_variables.scss（项目变量声明——colors、spacings 等）_mixins.scss（项目 mixin 声明——typography、clearfix、animations 等）_forms.scss（自定义表单样式和重置）_input.scss（自定义输入样式和重置）

\layouts(子文件夹)

这是一个敏感的部分。这个目录中的文件以这种方式组织：它们涵盖所有屏幕分辨率、遵循移动第一的原则。所以，你应该使用 _all.scss 声明你自己的风格。在该文件中的规格声明是对所有屏幕尺寸和所有视图都有效的。如果你希望你的网站适应性强的话，就不要仅仅是重写规则，为其他屏幕分辨率声明它们。

文件夹组织结构如下：

phablets(481up)_phablets.scsstabletsandsmalllaptops(768up)_tablets.scssdesktops(1030up)_desktop.scssdesktopswithlargescreens(1204up)_desktop-large.scssretinadisplaysexceptions(@2x)_retina.scss

这些文件将把握布局异常，被称为 mediaqueries。

请注意：这些文件共享于所有视图（HTML 页面）。这就是为什么你需要在 scss\layouts 文件下创建一个新的文件夹以给定一个特定的风格到一个特定的页面。

最后

我知道这不是一个普遍的解决方案，也许在某些情况下还会包含一些冗余，但我认为这是一个很好的起点。不管目的是什么，我的建议是根据自己的需求定制自己的体系结构或框架，特别是在不丢失用户体验的前提下保障性能和可维护性。

作者：3xmq
链接：http://www.3xmq.com/article/1516961285790
来源：架构师小秘圈
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。