前端的工程化、模块化和组件化

什么是工程化

工程化是一种思想而不是某种特定的技术，当然我们在实现项目工程化的过程中，我们也会去使用一些技术。前端工程化是使用软件工程的技术和方法来对前端的开发流程、技术、工具等进行规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间。

目前，web业务日益复杂化和多元化，单页面应用和webApp风靡。而且前端的生态圈繁荣，各种框架，组件出现，使得前端发展迅速，快速开发已经成为了前端的一个标准。靠传统的前端三剑客 JavaScript、HTML、 CSS 以及传统的项目结构已经不能满足日益壮大的大型应用的需求，会带来开发效率、维护成本、代码可读性差等问题。这就要求我们以工程化的思想去看待一个前端项目而不再是直接撸起袖子开写页面，将前端项目当成一项系统工程去进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率和开发质量提高以及降低项目生产风险的目的。
 

如何工程化

页面组件化
代码模块化
代码质量管理 (QA)： ESLint
代码编译: babel、less、sass、scss等
代码构建：webpack
项目国际化
代码版本管理：Git、SVN

什么是模块化

当应用的JS都以模块来编写时, 这个应用就是一个模块化的应用;

向外提供特定功能的文件， 可以做到按需引入,这就是模块化。

为何要模块化

随着业务逻辑增加，代码越来越多且复杂

模块化作用

复用代码, 简化代码的编写, 提高代码运行效率

什么是组件

从UI上拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，是一个用来实现局部功能效果的代码和资源的集合

为什么要组件化？

一个界面的功能复杂时，组件化抽取，易维护易扩展。易复用。

组件化作用?

复用编码, 简化项目编码, 提高运行效率