我的前端架构养成记之整洁的工作流

【编者按】本文作者Matt Carella为我们讲解了如何构建一个良好的架构。除了选择正确的工具以外，在组织工作流中遵循清晰整洁的原则对于我们来说是非常重要的。或许有的人会觉得文中所说的是在DOS时代的标准的做法，不过本文对新入门的人来说或许会有帮助。如果您是一位资深的架构师，也欢迎您在评论中与我们一起分享您的心得与体会。

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

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

正确的工具

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

组织工作流

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

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

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

SCSS

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

js

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

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

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文件。

\libs（子文件夹）

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

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

\plugins（子文件夹）

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.scss
• tablets and small laptops (768up) _tablets.scss
• desktops (1030up) _desktop.scss
• desktops with large screens (1204up) _desktop-large.scss
• retina displays exceptions (@2x) _retina.scss

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

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

最后

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

编者注：关于文件夹树结构可查看详情，当然你也可以下载。

原文来自：sitepoint