组件化的简单介绍

Component，中文称为组件，或者构件。它的核心意义在于代码复用。功能相对单一或者独立，在整个系统的代码层次上位于最底层，被其他代码所依赖。
Module, 中文为模块或模组。它的核心意义在于分离职责。它的关注点在于功能划分。 例如： 视频通话、语音通话等功能就可以被分为不同的模块

为什么要做组件库？

传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用，而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。

组件化的意义

为前端提供了很好的分治策略，可以实现独立维护，可维护性强

组件具有独立性，组件之间可以自由组合

页面只不过是组件的容器，负责组合组件即可形成功能完整的界面

组件开发的原则

标准性

任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。

组合性

组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。

重用性

任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。

可维护性

任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减少发生bug的几率。

这样区分了不同的组件。

base下存放的是reset模板相关的文件。

component下存放了一些更细致化的组件。我把导航栏和轮播图分别拆分，放在了这里。

helpers主要包含了项目中关于Sass的工具和帮助之类。我把mixin混合器放在了这里。

layout下文件夹(有时也称为partials/)中放置了大量的文件，每个文件主要用于布局方面的，比如说"header"，“footer”等。他也会包括_grid.scss文件，用来创建网格系统。

这里我把header和footer- -还有栅格布局的scss文件放在了这里面。

page下主要存放的是对页面特定的样式，且需要以页面名命名。

1.组件化该如何实践？

对开发者的能力有一定的要求，比如传统开发方式可能只要求开发者懂HTML，JS，CSS这些就可以了，而组件化开发方式下还可能要求开发者掌握less，sass，或者ES6等的语法，以及webpack，glup等的前端打包以及构建工具。

技术选型，当前前端组件化框架可以说是百家齐放，这就要求技术经理或者架构师具有超前的前瞻性，根据项目需求以及框架的未来发展进行分析选型。

2.组件化的优点

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

3.怎么设计一个组件

首先要有一个标准，其次要有组合性，重用性，可维护性