理解前端组件化、模块化、工程化

什么是组件化、模块化、工程化？

组件化：把重复的代码提取出来合并成为一个个组件，组件最重要的就是复用，位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强。组件化更多关注UI部分，每个组件有独立的HTML、css、js代码。可以根据需要把它放在页面的任意部位，也可以和其他组件一起形成新的组件。一个页面是各个组件的结合，可以根据需要进行组装。

模块化：分属同一功能/业务的代码进行分装，让它成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。侧重功能的封装，主要是针对Js代码，隔离、组织复制的js代码，将它封装成一个个具有特定功能的的模块。模块可以通过传递参数的不同修改这个功能的的相关配置，每个模块都是一个单独的作用域，根据需要调用。一个模块的实现可以依赖其它模块。

工程化：前端工程化不是具体的某项技术和方法，只要我们引入的方法、技术方案、工具可以提升开发效率、提高前端应用质量，那么都属于前端工程化。前端工程化就是通过一系列的工具、方法、工程化的思维，将成千上万个模块、组件或其他静态资源进行有序、规范、标准化、可控、可追踪的组织起来，作为一个整体运行，以便提高前端工程的性能、稳定性、可用性、可维护性等。

组件化、模块化、工程化带来的好处

组件化带来的好处

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

1、组件

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

2、为什么要组件化？

一个界面的功能更复杂

3、作用

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

模块化带来的好处

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

1、模块

向外提供特定功能的文件， 可以做到按需引入

2、为什么要模块化？

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

3、作用

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

工程化带来的好处

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

1、为什么要以工程化的思想来看待前端项目？

​目前，web业务日益复杂化和多元化，单页面应用和webApp风靡。而且前端的生态圈繁荣，各种框架，组件出现，使得前端发展迅速，快速开发已经成为了前端的一个标准。

靠传统的前端三剑客 JavaScript、HTML、 CSS 以及传统的项目结构已经不能满足日益壮大的大型应用的需求，会带来开发效率、维护成本、代码可读性差等问题。

这就要求我们以工程化的思想去看待一个前端项目而不再是直接撸起袖子开写页面，将前端项目当成一项系统工程去进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率和开发质量提高以及降低项目生产风险的目的。

2、 那我们又该怎样去做到前端的工程化呢？

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