web前端工程化浅析

           目前来说，Web业务日益复杂化和多元化，前端开发已经由以WebPage模式为主转变为以WebApp模式为主了。现在随便找个前端项目，都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。工程复杂了就会产生许多问题，比如：如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目的开发质量？...

           前端工程化就在这个快速发展的时代下，应运而生，它存在的目的就是为了提高效率、节约成本。

工程化最初的概念来源，是从建筑行业演化使用的，在经济没有开发前，人们盖一个房子，可以根据自己的喜好和经济情况，自己就可以把房子盖起来，但是这样的房子在别人来看是没有多少参考复用的价值的。随着经济和社会的发展，后来人们开始盖高楼大厦，渐渐的建筑引入工程化概念，对于盖房子的成本和效率都有一定的规范。

           软件中的工程化，比建筑行业的工程化，有一个无法比拟的优势，就是复用性很强，在虚拟软件中，复用一套系统成本是几乎为0的，渐渐的软件开发都在遵循一套规则——软件工程。

      

工程化分为两个阶段：

           一个是上面说到的开始实行软件工程：后端使用软件工程，前端使用html+js+jquery+ajax。

           一个是在前端开始实行软件工程：使用前端框架，例如angular、Vue.js、React.js。

 

           前端工程化有四个特点：模块化、组件化、自动化、规范化。

           分别的解释是：

           模块化：就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。在工程化之前，一直是使用js、jquery、ajax，这没有模块概念，对于开发大型且复杂的系统会有一定的限制。

  

      

                 

          组件化：组件化≠模块化。模板化是在文件层面上，对代码和资源的拆分；组件化是在设计层面上，对于UI的拆分。页面上所有的东西都可以看成组件，页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件，小型组件也可以再拆，直到拆成DOM元素为止。DOM元素可以看成是浏览器自身的组件，作为组件的基本单元。

 

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

 

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

• 目录结构的制定
• 编码规范
• 前后端接口规范
• 文档规范
• 组件管理
• Git分支管理
• Commit描述规范
• 定期codeReview
• 视觉图标规范
• … …

 

           总结：前端工程化主要就是前后端分离，复杂流程拆分，使用接口，前端项目独立打包发布，代码模块化管理。这些概念在软件工程里都是很基础的常识，主要是前端发展快，需求大，变化灵活，才从简单的前端页面发展成前端工程化，这些基础概念在前端还是属于比较热乎的概念。 祝好运

参考：

web前端工程化？

怎么给啥也不懂的女朋友讲清楚前端工程化是在做什么？

前后端分离意义大吗？