工程化、组件化、模块化
一、工程化
工程化是一种思想而不是某种特定的技术，当然我们在实现项目工程化的过程中，我们也会去使用一些技术。前端工程化是使用软件工程的技术和方法来对前端的开发流程、技术、工具等进行规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间。
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、作用
复用编码, 简化项目编码, 提高运行效率
拓展
1.什么是组件和模块
1.1组件： 把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用），位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强。
1.2模块： 分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。
模块就像有多个USB插口的充电宝，可以和多部手机充电，接口可以随意插拔。复用性很强，可以独立管理。
2.组件和模块的区别
2.1组件： 就像一个个小的单位，多个组件可以组合成组件库，方便调用和复用，组件间也可以嵌套，小组件组合成大组件。
2.2模块： 就像是独立的功能和项目（如淘宝：注册、登录、购物、直播...），可以调用组件来组成模块，多个模块可以组合成业务框架。
3.为什么要使用组件化和模块化？
3.1开发和调试效率高： 随着功能越来越多，代码结构会越发复杂，要修改某一个小功能，可能要重新翻阅整个项目的代码，把所有相同的地方都修改一遍，重复劳动浪费时间和人力，效率低；使用组件化，每个相同的功能结构都调用同一个组件，只需要修改这个组件，即可全局修改。
3.2可维护性强： 便于后期代码查找和维护。
3.3避免阻断： 模块化是可以独立运行的，如果一个模块产生了bug，不会影响其他模块的调用。
3.4版本管理更容易： 如果由多人协作开发，可以避免代码覆盖和冲突。
组件化和模块化一般情况是一起出现的，他们就像好兄弟，虽然可以分离但最好一起有个照应。
如图：“我的淘宝”页调用了会员模块、物流模块、充值模块和运动模块，而且可以发现他们调用了同一个组件在“我的淘宝”来展示各自的 模块。
4.组件的创建和嵌套方法
了解了程序逻辑，那么在我们设计中如何运用呢，我用sketch简单演示一下组件的创建和嵌套。（PS中的智能对象也能达到相应的目的）
4.1组件的创建：
选中要创建的组件的元素，点击创建组件，在组件中就可以看到该组件，修改组件样式，会发现所有使用该组件的样式都发生了改变。
4.2组件的嵌套：
在组件中，找到刚刚创建的组件，选中组件中的按钮元素，再次点击创建组件，可以看到生成了一个新的组件，改变新组件的样式，发现原组件也同步发生了变化，返回看到所有应用该嵌套组件的样式都被改变。
下面来总结一下本文内容：
组件： 把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用）
模块： 分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，独立管理，每个模块有很多接口，可供调用
组件化模块化优点： 开发调试效率高、可维护性强、避免阻断、版本管理更容易
