前端工程化

前端工程化

1. 前端工程化

• 最早期写前端代码时，往往一个页面就是一个文件，HTML/CSS/JS 全部写在一起，后来知道应该把结构层、表现层和行为层分离；

• 再后来随着工程复杂化，产生的诸多问题，比如：如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目的开发效率？

• 前端工程化思想就在这时应用而生。所谓前端工程化，就是将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率提高的目的。

2. 前端模块化

模块化是在文件层面上，对代码和资源的拆分。就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。

那具体什么是模块化呢，举一个简单的例子，我们要写一个实现 A 功能的 JS 代码，这个功能在项目其他位置也需要用到，那么我们就可以把这个功能看成一个模块采用一定的方式进行模块化编写，既能实现复用还可以分而治之。同理在写样式的时候，如果我们需要某种特殊的样式，会在很多地方应用，那么我们也可以采用一定的方式进行 CSS 的模块化。具体说来，JS 模块化方案很多有 AMD/CommonJS/UMD/ES6 Module 等，CSS 模块化开发大多是在 less、sass、stylus 等预处理器的 import/mixin 特性支持下实现的。

模块化不难理解，重点是要学习相关的技术并且灵活运用。

3. 前端组件化

组件化是在设计层面上，对于 UI 的拆分。

组件化将页面视为一个容器，页面上各个独立部分例如：头部、导航、焦点图、侧边栏、底部等视为独立组件，不同的页面根据内容的需要，去盛放相关组件即可组成完整的页面。

组件具有独立性，因此组件与组件之间可以自由组合；当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换。

4. 前端自动化

”简单重复的工作交给机器来做”，自动化也就是有很多自动化工具（glup、webpack）代替我们来完成，例如持续集成、自动化构建、自动化部署、自动化测试等等。

5. 前端规范化

在项目规划初期制定的好坏对于后期的开发有一定影响。包括的规范有：

目录结构的制定、编码规范、前后端接口规范、文档规范、组件管理、代码包管理（SVN、Git）、Commit 提交代码备注描述规范、定期 codeReview、视觉图标规范等。