浅谈前端工程化、模块化、组件化、自动化、规范化

引言：提到前端往往很多人的印象就是入门简单只是一个“画图”的，HTML、CSS加一起一个星期基本上就能大概上手，JS难一点但也能很快写一些简单的小效果，在网上随便一搜索各种特效代码随意用，一个新手前端也能在很短的时间里写出炫酷的页面效果，然而入门简单并不意味着前端这碗饭很好吃，做惯了切图、布局、扣特效的前端新同学在向前发展的路上越来越觉得吃力，而没有任何编程思想和软件开发基础很多人对前端工程化、组件化、模块化、自动化、MVC、MVVC、MVVM这些“高大上”的词汇云里雾里。

下面就用最好理解的方式去说我对工程化、模块化、组件化等的理解，难免会有很多“幼稚”的表述，请大神们轻喷。

 

前端工程化

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

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

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

 

前端模块化

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

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

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

 

前端组件化

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

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

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

前端自动化

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

 

前端规范化

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

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

---

总之：这些概念在软件工程里都是很基础的常识，主要是前端发展快，需求大，变化灵活，才从简单的前端页面发展成前端工程化，开发人员还是需要不断的学习，不进则退。

---