1.概述

对于前端来说，我们为用户创造价值才是特别需要关注的一个问题，这么多年过去了，前端到底为用户创造了什么价值呢？

70 年代，施乐公司做的一个软件管理的流程图软件，那个时代，整个的界面就是这个样子，施乐已经算比较先进的了。

再到 90 年代，当时这个画面还是很惊艳，按钮键是立体的。现在来看这个东西就有不那么美观了。

2006 年左右的时候，Vista 的界面已经开始有了一个非常大的变化了，这时已经是设计师在主导这个界面的了，但是性能并不佳。

再之后，手机出现了，比如 iPhone 的界面，这时不但交互模式发生了巨大的改变，而且屏幕也变了，甚至我们熟悉的鼠标不见了，变成了触屏。虽然两者之间操作上有一定的相似，但是变化还是非常大的。

计算机的功能也在演变。70 年代，计算机主要用来计算。

我们今天计算机主要用来上网，基本上，大家的计算机都是 24 小时联网的，你的手机也是 24 小时联网的，所以计算机的职责在发生变化。

这个变化对于 UI 有很大的影响，1970 年的那个 MVC 那篇论文里的图，model 很大，view 很小，而到了 2018 年，今天我们很多的 model，都是放在服务端的，而今天 model 的大小已经不是说一台机器上能去存的，你存在本地的只是视图展现一点点的 model，这个是很小的一部分的东西。而这部分，对应的可能是不同终端的view，view变得越来越大了。

存在的问题：

视图变的越来越重要，内容越来越丰富，技术上越来越复杂。一个页面内，可能有导航头，轮播图，滚动等动画，各种手势交互，信息流等与后端的交互。

通常我们会根据职责划分把交互都写在代JS文件里，布局都写在HTML里，样式写在CSS里面，当目标页面内容很少的时候，看起来没什么问题，但是当目标页面变得足够复杂，我们就会发现，JS里面的逻辑代码越来越多，如果一个手势交互，要同时触发页面的加载，滚动动画还有导航变动，那么开发者，要处理的情况就会很复杂。这个时候，如果另一个人来接手这个项目，或者又要加上一个新的交互去触发更多的联动。就会非常痛苦。

你也应该遇到过，将一个页面的几百行，甚至上千行的代码逻辑写在一个 js 文件中的情况。通常这种代码都很难读下去，更别说要维护起来，添加新功能，移除一些老功能了，因为你不知道改动一个地方，会不会出现意想不到的 bug。

这是因为很多时候，在项目开始时需求不多，所以就将一个页面做成了整块应用，而后随着业务的增长或者变更，项目的复杂富会呈现指数级的增长，等项目足够复杂后，就会发生一个小小的改动或者一个功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身的状况。

那么如何解决这种状况：

其实在此之前早就有了一些探索，如果一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。拿电脑主机来说，一台整机包括CPU，主板，内存，硬盘等等，而这些部件其实都是由不同的公司进行生产的，他们彼此之间根据一套标准分别生产，最后组装在一起。当某个部件出现问题时，不需要将整台主机都进行维修，只需要将坏的部件拿下来，维修之后再将其组合上就可以了。这种化繁为简的思想，在前端开发中 就是： 组件化，后端就是微服务。

2.组件化

1.基本概述

现代化前端框架通常都是实现 MVVM 的方案，数据层（M）和 视图层（V）相互连接，同时变更，使得页面交互保持高度的一致性。

前端的组件涉及到更多的是展示和交互方面的逻辑。当然，前端组件与后端架构的微服务概念类似，可以理解成一个组件就是一个服务组件，只提供某个服务。

前端组件化开发，就是将页面的某一部分独立出来，将这一部分的 数据层（M）、视图层（V）和 控制层（C）用黑盒的形式全部封装到一个组件内，暴露出一些开箱即用的函数和属性供外部组件调用。

一个前端组件，包含了 HTML、CSS、JavaScript，包含了组件的模板、样式和交互等内容，基本上涵盖了组件的所有的内容，外部只要按照组件设定的属性、函数及事件处理等进行调用即可，完全不用考虑组件的内部实现逻辑，对外部来说，组件是一个完全的黑盒。

组件可以多层封装，通过调用多个小组件，最后封装成一个大组件，供外部调用。比如：一个 Input 输入框 是一个组件，一个 Select下拉选择框 也是一个组件，可以用 form 在这两个组件上包装一层，就是一个 Form 的组件。

有一些比较常用的前端组件，像 vue-router，vuex，react-router，redux等，都是基于 Vue 和 React 的组件，它们只专注于 路由、状态存储 的工作。

只要利用好组件化开发，开发一个页面，就像是搭积木一样，将各个组件拼接到一起，最后融合到一起，就是一个完整的系统。

组件化以后，你的页面可能是这样的：

组件化以后你的项目可能是这个样子的：

2.优点

前端的组件化开发，可以很大程度上降低系统各个功能的耦合性，并且提高了功能内部的聚合性。这对前端工程化及降低代码的维护来说，是有很大的好处的。

耦合性的降低，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本。

总结：

随着前端的发展，视图变的越发庞大，伴随而来的就是页面的内容越来越多，复杂度越来越高，开发者面临着，要为页面编写越来越多的代码，往往面临着，难以维护，代码不可复用，应对需求繁琐问题。

为了解决开发效率低，维护成本高的问题，引入前端组件化的思想。 我们希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。

组件化的核心思想：对内高内聚，对外低耦合。对内各个元素彼此紧密结合、相互依赖。对外和其他组件的联系最少且接口简单，可复用，可组合。