这是我参与「第五届青训营」伴学笔记创作活动的第5天。
一、本堂课重点内容
本节课详细介绍了前端技术栈之一JavaScript的三个编码原则-各司其职、组件封装、过程抽象，本篇笔记将对组件封装这一原则作记录并提出自己的想法。
二、详细知识点介绍
组件封装的编码原则
在前端中，从UI页面抽出包含html、css、js这三者的一个个单元被称组件，它们分别负责模板、样式、功能三个方面的作用，一个好的组件应该拥有封装性、正确性、扩展性、复用性。
举例尝试-轮播图
在此处，轮播图作为一组无序的图片，我们在html中选用
<ul>实现
<div id="my-slider" class="slider-list">
<ul>
<li class="slider-list__item"><img src="./img/1.png"></li>
<li class="slider-list__item"><img src="./img/2.png"></li>
<li class="slider-list__item"><img src="./img/3.png"></li>
<li class="slider-list__item"><img src="./img/4.png"></li>
<li class="slider-list__item"><img src="./img/5.png"></li>
</ul>
</div>
在css中，由于图片大小一致且位置不变，因此我们使用position: absolute可以实现轮播图的绝对位置，同时图片的切换动画我们选用transition。
#my-slider,
img {
position: relative;
width: 790px;
height: 450px;
}
.slider-list ul {
list-style-type: none;
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.slider-list__item,
.slider-list__item--selected {
position: absolute;
transition: opacity 1s;
opacity: 0;
text-align: center;
}
.slider-list__item--selected {
transition: opacity 1s;
opacity: 1;
}
在功能设计上，我们需要保证原子操作，职责单一，瞒住灵活性，在js中用到了这些接口：
Slider：API
getSelectedItem() 得到当前轮播图正在显示的li
getSelectedItemIndex() 获取当前轮播图的显示li的下标
sliderTo(idx) 轮播到指定的idx下标的图片
sliderNext() 下一张
sliderPrevious() 上一张
- 版本一
分析：在版本一中，我们满足了要求，实现了轮播器的功能，但只具备了封装性、正确性，在扩展性于复用性上仍有不足，因此我们可以进行进一步改进。
- 版本二
分析：在版本二中，我们改变思路，不去动js中的核心逻辑代码，因把图片轮播和这几个按钮的主体部分分离出来,也就是将左右两个按钮和五个圆点解耦出来，再将html手动删除，并使用一个render()的API来把HTML模块化，增强其复用性。
- 版本三
分析：我们在这一版本中通过重构组件框架，将通用的组件模型抽象出来，使用一些通用的组件，于是我们将它们抽离出来放在Component类中，然后通过继承的方式将其继承该子类Slider，这样就能抽象出一个Component类，这个类体系相对完整，可以相当于是一个很小的组件框架。
三、课后个人总结
-
组件设计的原则：封装性、正确性、扩展性、复用性
-
实现组件的步骤：结构设计、展现效果、行为设计
-
三次重构:
- 插件化
- 模板化
- 抽象化（组件框架）
四、引用参考
csdn
