前端工程化简介

一、描述

在软件开发的领域当中，一些工程化的东西是必不可少，它可以把我们的效率，质量，还有团队合作，维护方面更加的轻松。

二、必要性

在一些简单的项目当中，例如，邀请函H5项目等，这种纯展示的，没有什么业务逻辑，不涉及数据库的项目当中，其实是没什么必要性的，因为花费一大堆时间搭起webpack,gulp,grunt,parcel，这些打包编译工具，只会增加你的成本。打个比方，在生活当中，我们有时候会接到一些私单，可能就纯粹的HTML页面，或者就类似于PPT式的展示项目，我们的目录结构，其实就很简单，可以搭建成以下。

三、工程化的发展

1.古老时代

在很早的时候，还没出现Vue、React、Angular这些利用组件开发和Ajax实现页面和与后端交互的时候，我们一般小公司，采取都是PHP或者Java等后端语言的模版引擎进行开发，也就是什么意思呢，如下图。

从此图可以看出，最辛苦的是PHP和JAVA，为什么呢？假设我的产品哥哥和小姐姐需要迭代某一个功能和页面，又要前端重新的弄下一个按钮的样式啊之类的，弄完之后，又把静态页面给了我们苦逼的后端人员，那时候的后端人员，本人觉得才叫全栈工程师，为什么呢，因为模版引擎通常只有后端人员才会使用，以前的前端切图仔只负责还原UI设计图和血一些简单的交互，而且在这过程中，我们一般都会使用jquery，这里有一个不好的地方，一般对于没什么经验的后端人员来说，通常很喜欢，前端给了的页面，直接使用上面的class名，来操作元素，但是这有个很恶心的问题带来了，就是前端人员修改了样式，删了这个class名，这时候，测试发现了bug，点不了，或者报错，这又到了后端人员找来bug了，找了老半天可能才发现，前端人员原来修改样式的时候把class名删了，这时候前端后端大家一起推卸责任，这样的开发效率大大的减少。

这个时期，由于整个项目几乎都是由后端人员进行开发完成交付，因此前后端的代码经常混杂在一起。例如，php的娃娃们就很喜欢使用他们的模版符号""在页面中嵌入后端代码，从而实现数据交互。 一个简单的php使用场景代码如下：

这显然来说长期的项目迭代更新和维护，是十分困难的。

2.铜器时代

这个阶段就是开始有一些组件化的思想和异步加载的实现在项目里面。

“组件化”是指不再把所有代码都放到一个文件里面，而是通过一些iframe和frameset的标签来进行页面的组织，把Javascript代码放到“.js”文件里面，通过外部链接引入到页面去。

异步加载，就要提到Ajax，这个技术帮助了开发者提升网站性能，优化用户的体验，利用局部加载，使得页面加载速度更快，用户更加快速的看到页面。也正因为ajax的出现，一些前端框架也慢慢的兴起。

3.农业时代

在“铜器时代”出现的一些框架，让开发者更好的组织代码，从而提高代码的可读性，增加维护性。

随着产品项目越来越大，越来越复杂，代码量也越来越多，大大降低了页面加载的速度，影响了用户体验。为了解决这个问题，一些模块加载的规范就衍生出来了，主要分成两种，就是我们在别人口中听到的AMD(Asynchronous Module Definition)和CMD(Common Module Definition)。

在实现AMD的规范的框架中，用得最多就是RequireJS，下面是一个依赖于Jquery来实现js代码的RequireJS框架下的写法:

4.工业时代

在这个阶段当中，互联网产品越来越复杂，交互也越来越多，为了降低开发难度和成本，一些前端的MVC、MVVM框架就诞生了，一般统称MV*，用得最多就是Backbone，AngularJS、React、Vue等。本人最喜欢其实就是Backbone和React。

这些框架的好处分别有：

• 前后端分离，不再有后端语言的依赖。

• 分层明确，代码单一原则化，降低复杂度。

同时，就是这些框架的出现，为了更加提高团队的效率，出现了一大堆的打包工具，例如Gulp,Grunt,webpack等。更加灵活的使用它们做一些代码压缩混淆，编译，单元测试，打包发布等重复性的任务，来降低开发者的工作。