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

目录

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

个人理解，不一定对，欢迎指正

一、工程化

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

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

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

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

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

二、模块化

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

1、模块

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

2、为什么要模块化？

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

3、作用

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

三、组件化

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

1、组件

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

2、为什么要组件化？

一个界面的功能更复杂

3、作用

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