青训营月影老师告诉我写好JavaScript的三大原则之——组件封装
Posted YK菌
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了青训营月影老师告诉我写好JavaScript的三大原则之——组件封装相关的知识,希望对你有一定的参考价值。
文章目录
参加了这次字节青训营的活动,见到了传说中的月影老师,关键还听他给我们上了两节如何写好JS的课! 太赚啦,今天我把上课学的东西分享出来,和大家一起学习学习!~
月影老师告诉我们写好JavaScript(包括其他语言)的三大原则 ① 各司其责 ② 组件封装 ③ 过程抽象
今天我们来学习写好javascript的另一个原则:组件封装
1. 起步
先来看看组件的概念
组件是指Web页面上抽出来一个个包含模版(html)、功能(JS)和样式(CSS)的单元。
好的组件具备封装性、正确性、扩展性、复用性。
下面我们来看一个案例——轮播图
2. 轮播图案例
大家在刚接触前端的时候,一定都写过轮播图,还记得如何用原生JavaScript写一个电商网站的轮播图吗?
版本一:API无交互版
结构:HTML
轮播图是⼀个典型的列表结构,我们可以使⽤⽆序列表<ul>
元素来实现。
这里类的命名有点讲究,是一种CSS规则名书命名规范,其中 slider
表示组件名,-list
表示元素,__item
表示具体元素项,--selected
表示的是状态(看完CSS的代码你就知道为什么这样命名更好了~)
<div id="my-slider" class="slider-list">
<ul>
<li class="slider-list__item--selected">
<img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png"/>
</li>
<li class="slider-list__item">
<img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg"/>
</li>
<li class="slider-list__item">
<img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg"/>
</li>
<li class="slider-list__item">
<img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg"/>
</li>
</ul>
</div>
此时的页面,将图片以列表的形式展现出来
表现:CSS
- 使用 CSS 绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符(modifier)这里是
--checked
- 轮播图的切换动画使用 CSS transition
再回顾一下这种讲究的CSS规则名命名规范,其中 slider
表示组件名,-list
表示元素,__item
表示具体元素项,--selected
表示的是状态
这样命名,当组件多了,CSS多起来的时候,很容易分辨清楚这段CSS是哪个组件哪个元素哪个状态的样式规则
#my-slider{
position: relative;
width: 790px;
}
.slider-list ul{
list-style-type:none;
position: relative;
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;
}
最后我们需要通过JavaScript来控制页面的行为
行为:JS —— API
API 设计应保证原子操作,职责单一,满足灵活性。
// 创建一个Slider类,封装一些API
class Slider{
constructor(id){
this.container = document.getElementById(id);
this.items = this.container
.querySelectorAll('.slider-list__item, .slider-list__item--selected');
}
// 获取选中的图片元素:通过选择器`.slider__item--selected`获得被选中的元素
getSelectedItem(){
const selected = this.container
.querySelector('.slider-list__item--selected');
return selected
}
// 获取选中图片的索引值:返回选中的元素在items数组中的位置。
getSelectedItemIndex(){
return Array.from(this.items).indexOf(this.getSelectedItem());
}
// 跳转到指定索引的图片
slideTo(idx){
const selected = this.getSelectedItem();
if(selected){
// 将之前选择的图片标记为普通状态
selected.className = 'slider-list__item';
}
const item = this.items[idx];
if(item){
// 将当前选中的图片标记为选中状态
item.className = 'slider-list__item--selected';
}
}
// 跳转到下一索引的图片:将下一张图片标记为选中状态
slideNext(){
const currentIdx = this.getSelectedItemIndex();
const nextIdx = (currentIdx + 1) % this.items.length;
this.slideTo(nextIdx);
}
// 跳转到上一索引的图片:将上一张图片标记为选中状态
slidePrevious(){
const currentIdx = this.getSelectedItemIndex();
const previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
this.slideTo(previousIdx);
}
}
我们就可以通过手动调用API来使用轮播图了
const slider = new Slider('my-slider');
slider.slideTo(1);
slider.slideTo(2);
slider.slideNext();
slider.slidePrevious();
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HFYIgIVZ-1629954724858)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/315ee5fea47743119b22df6e0107d338~tplv-k3u1fbpfcp-watermark.image)]
或者我们可以直接定义一个定时器,让他自动播放
const slider = new Slider('my-slider');
setInterval(() => {
slider.slideNext();
}, 1000);
版本二 控制流交互版
我们要让用户可以控制我们轮播图的状态,所以需要设计一套控制流
结构 HTML
这里加入了一些控制轮播图的元素,比如两边控制前后翻图的箭头,下面控制选图的小圆点
<div id="my-slider" class="slider-list">
<ul>
<li class="slider-list__item--selected">
<img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png"/>
</li>
<li class="slider-list__item">
<img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg"/>
</li>
<li class="slider-list__item">
<img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg"/>
</li>
<li class="slider-list__item">
<img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg"/>
</li>
</ul>
<a class="slide-list__next"></a>
<a class="slide-list__previous"></a>
<div class="slide-list__control">
<span class="slide-list__control-buttons--selected"></span>
<span class="slide-list__control-buttons"></span>
<span class="slide-list__control-buttons"></span>
<span class="slide-list__control-buttons"></span>
</div>
</div>
表现:CSS
接下来我们来看看CSS样式
通过下面这段代码,你可以看出来这种CSS命名规范有很好~
其实这种命名规范有一个名字,叫做Block-Element-Modifier
简称为BEM
#my-slider{
position: relative;
width: 790px;
height: 340px;
}
.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;
}
.slide-list__control{
position: relative;
display: table;
background-color: rgba(255, 255, 255, 0.5);
padding: 5px;
border-radius: 12px;
bottom: 30px;
margin: auto;
}
.slide-list__next,
.slide-list__previous{
display: inline-block;
position: absolute;
top: 50%; /*定位在录播图组件的纵向中间的位置*/
margin-top: -25px;
width: 30px;
height:50px;
text-align: center;
font-size: 24px;
line-height: 50px;
overflow: hidden;
border: none;
background: transparent;
color: white;
background: rgba(0,0,0,0.2); /*设置为半透明*/
cursor: pointer; /*设置鼠标移动到这个元素时显示为手指状*/
opacity: 0; /*初始状态为透明*/
transition: opacity .5s; /*设置透明度变化的动画,时间为.5秒*/
}
.slide-list__previous {
left: 0; /*定位在slider元素的最左边*/
}
.slide-list__next {
right: 0; /*定位在slider元素的最右边*/
}
#my-slider:hover .slide-list__previous {
opacity: 1;
}
#my-slider:hover .slide-list__next {
opacity: 1;
}
.slide-list__previous:after {
content: '<';
}
.slide-list__next:after {
content: '>';
}
/*下面是四个小圆点的样式,其实通过这种BEM命名规则你也能看出来*/
.slide-list__control-buttons,
.slide-list__control-buttons--selected{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 0 5px;
background-color: white;
cursor: pointer; /*设置鼠标移动到这个元素时显示为手指状*/
}
/*当选择后,小圆点的颜色变成红色*/
.slide-list__control-buttons--selected {
background-color: red;
}
行为:JS —— 控制流
接下来就是在API的代码基础上 加入控制流,让轮播图可以自动轮播,也可以手动控制,实现交互效果
使用自定义事件来解耦
class Slider{
constructor(id, cycle = 3000){
this.container = document.getElementById(id);
this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
this.cycle = cycle;
const controller = this.container.querySelector('.slide-list__control');
if(controller){
const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
// 鼠标经过某个小圆点,就将此圆点对应的图片显示出来,并且停止循环轮播
controller.addEventListener('mouseover', evt=>{
const idx = Array.from(buttons).indexOf(evt.target);
if(idx >= 0){
this.slideTo(idx);
this.stop();
}
});
// 鼠标移开小圆点,就继续开始循环轮播
controller.addEventListener('mouseout', evt=>{
this.start();
});
// 注册slide事件,将选中的图片和小圆点设置为selected状态
this.container.addEventListener('slide', evt => {
const idx = evt.detail.index
const selected = controller.querySelector('.slide-list__control-buttons--selected');
if(selected) selected.className = 'slide-list__control-buttons';
buttons[idx].className = 'slide-list__control-buttons--selected';
})
}
// 点击左边小箭头,翻到前一页
const previous = this.container.querySelector('.slide-list__previous');
if(previous){
previous.addEventListener('click', evt => {
this.stop();
this.slidePrevious();
this.start();
evt.preventDefault();
});
}
// 点击右边小箭头,翻到后一页
const next = this.container.querySelector('.slide-list__next');
if(next){
next.addEventListener('click', evt => {
this.stop();
this.slideNext();
this.start();
evt.preventDefault();
});
}
}
getSelectedItem(){
let selected = this.container.querySelector('.slider-list__item--selected');
return selected
}
getSelectedItemIndex(){
return Array.from(this.items).indexOf(this.getSelectedItem());
}
slideTo(idx){
let selected = this.getSelectedItem();
if(selected){
selected.className = 'slider-list__item';
}
let item = this.items[idx];
if(item){
item.className = 'slider-list__item--selected';
}
const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)
}
slideNext(){
let currentIdx = this.getSelectedItemIndex();
let nextIdx = (currentIdx + 1) % this.items.length;
this.slideTo(nextIdx);
}
slidePrevious(){
let currentIdx = this.getSelectedItemIndex();
let previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
this.slideTo(previousIdx);
}
// 定义一个定时器,循环播放
start(){
this.stop();
this._timer = setInterval(()=>this.slideNext(), this.cycle);
}
// 停止循环播放(用户在自己操作的时候要停止自动循环)
stop(){
clearInterval(this.以上是关于青训营月影老师告诉我写好JavaScript的三大原则之——组件封装的主要内容,如果未能解决你的问题,请参考以下文章
青训营月影老师告诉我写好JavaScript的三大原则之——组件封装
青训营月影老师告诉我写好JavaScript的四大技巧——封装函数
青训营月影老师告诉我写好JavaScript的四大技巧——保证正确
青训营月影老师告诉我写好JavaScript的四大技巧——风格优先