背景介绍
什么是组件？
- 组件
- 它的核心意义在于代码复用。功能相对单一或者独立，在整个系统的代码层次上位于最底层，被其他代码所依赖。
- 模块
- 它的核心意义在于分离职责。它的关注点在于功能划分。 例如： 视频通话、语音通话等功能就可以被分为不同的模块
为什么要做组件库
传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用，而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。
针对此弊端，其实业界早就有了一些探索，我们希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。就拿电脑主机来说，一台整机包括CPU，主板，内存，硬盘等等，而这些部件其实都是由不同的公司进行生产的，他们彼此之间根据一套标准分别生产，最后组装在一起。当某个部件出现问题时，不需要将整台主机都进行维修，只需要将坏的部件拿下来，维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务，而在前端开发中的体现就是组件化。
组件化的意义
- 为前端提供了很好的分治策略，可以实现独立维护，可维护性强
- 组件具有独立性，组件之间可以自由组合
- 页面只不过是组件的容器，负责组合组件即可形成功能完整的界面
组件开发的原则
- 标准性
- 任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。
- 组合性
- 组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。
- 重用性
- 任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。
- 可维护性
- 任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减少发生bug的几率。
组件化的方法
我们把一个组件保存为一个文件夹，把相应的HTML, CSS, JS 文件都放在一起。在需要用的时候再引用相应的文档就可以了。
编码实战
十等分的栅格系统
body{
margin: 0;
padding: 0;
}
.myrow{
margin:0 -15px;
&::after{
content: "";
display: block;
clear: both;
}
}
.mycol-sm-1,
.mycol-sm-2,
.mycol-sm-3,
.mycol-sm-4,
.mycol-sm-5,
.mycol-sm-6,
.mycol-sm-7,
.mycol-sm-8,
.mycol-sm-9,
.mycol-sm-10{
float: left;
padding: 0 15px;
box-sizing: border-box;
}
.mycol-sm-1{
width: 10%;
}
.mycol-sm-2{
width: 20%;
}
.mycol-sm-3{
width: 30%;
}
.mycol-sm-4{
width: 40%;
}
.mycol-sm-5{
width: 50%;
}
.mycol-sm-6{
width: 60%;
}
.mycol-sm-7{
width: 70%;
}
.mycol-sm-8{
width: 80%;
}
.mycol-sm-9{
width: 90%;
}
.mycol-sm-10{
width: 100%;
}
扩展思考
在一个页面中引入多个组件，如何防止CSS污染呢？
才HTML中采用BEM命名的方法。