这是我参与「第五届青训营 」伴学笔记创作活动的第3天，学习的是关于JavaScript的相关知识。
课程重点知识
1.JS的书写原则
2.JS在电商领域的实际应用
3.代码质量的优化
写好JS需要遵循的一些原则：
1.各司其职：让HTML、CSS、JavaScript职能分离；
2.组件封装：组件是指web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。好的UI组件具备正确性、扩展性、复用性；
3.过程抽象：用来处理局部细节控存制的一些方法，函数式编程思想的基础应用。
用JS设计电商网站的轮播图
要求:
1.实现三张图片自动轮播
2.左右按钮切换图片，小圆点切换图片
3.鼠标移入暂停轮播，鼠标移出继续轮播
具体步骤:
- 结构（HTML）：典型列表结构 首先是html内容,需要设置一个图片列表、一个点列表、两个按钮。
<div class="pcList">
<!-- 图片 -->
<ul class="list">
<li class="item active">0</li>
<li class="item">1</li>
<li class="item">2</li>
</ul>
<ul class="pointList">
<!-- 点 -->
<li class="point active" data-index = 0></li>
<li class="point" data-index = 1></li>
<li class="point" data-index = 2></li>
</ul>
<!-- 按钮 -->
<button class="btn" id="LBtn"> < </button>
<button class="btn" id="Rtn"> > </button>
</div>
- 表现（CSS）：使用CSS绝对定位将图片重叠在同一个位置;轮播图切换的状态使用修饰符（modifier）,轮播图的切换动画使用CSS transition.父容器list相对定位，item绝对定位，实现让所有图片重叠在父容器内。同时,左右切换按钮和小圆点始终要在最顶层，不能被图片覆盖，所以他们的z-index一定要比图片高。
<style>
.wrap {
width: 400px;
height: 200px;
position: relative;
}
.list {
width: 400px;
height: 200px;
position: relative;
padding-left: 0px;
}
.item {
width: 100%;
height: 100%;
list-style: none;
position: absolute;
left: 0;
opacity: 0;
transition: all .8s;
}
.item:nth-child(1) {
background-color: pink;
}
.item:nth-child(2) {
background-color: yellow;
}
.item:nth-child(3) {
background-color: mauve;
}
.item.active {
z-index: 10;
opacity: 1;
}
.btn {
width: 30px;
height: 50px;
z-index: 100;
top: 75px;
position: absolute;
}
#leftBtn {
left: 0px;
}
#rightBtn {
right: 0px;
}
.pointList {
list-style: none;
padding-left: 0px;
position: absolute;
right: 20px;
bottom: 10px;
z-index: 100;
}
.point {
width: 5px;
height: 5px;
background-color: antiquewhite;
border-radius: 100%;
float: left;
margin-right: 2px;
border-style: solid;
border-width: 2px;
border-color: slategray;
cursor: pointer;
}
.point.active{
background-color: cadetblue;
}
</style>
通过CSS,可以设置图片列表、点列表、按钮的颜色以及长宽高,显示出了基本布局,但还不能进行轮播。
- 行为JS
- API(功能)设计应保证原子操作,职责单一,满足灵活性。
Slider：getSelectedItem（）、getSelectedItemIndex（）、slideTo（）、slideNext（）、slidePrevious（）
- Event(控制流)使用自定义事件来解耦。
先封装一个清除active的方法，清除图片的active（显示在最上层），比如切换到下一张图上张图的active就要清除。
<script>
var items = document.querySelectorAll(".item");//图片
var points = document.querySelectorAll(".point")//点
var left = document.getElementById("leftBtn");
var right = document.getElementById("rightBtn");
var all = document.querySelector(".wrap")
var index = 0;
var time = 0;//定时器跳转参数初始化
//清除active方法
var clearActive = function () {
for (i = 0; i < items.length; i++) {
items[i].className = 'item';
}
for (j = 0; j < points.length; j++) {
points[j].className = 'point';
}
}
//改变active方法
var goIndex = function () {
clearActive();
items[index].className = 'item active';
points[index].className = 'point active'
}
//左按钮事件
var goLeft = function () {
if (index == 0) {
index = 2;
} else {
index--;
}
goIndex();
}
//右按钮事件
var goRight = function () {
if (index < 4) {
index++;
} else {
index = 0;
}
goIndex();
}
//绑定点击事件监听
left.addEventListener('click', function () {
goLeft();
time = 0;//计时器跳转清零
})
right.addEventListener('click', function () {
goRight();
time = 0;//计时器跳转清零
})
for(i = 0;i < points.length;i++){
points[i].addEventListener('click',function(){
var pointIndex = this.getAttribute('data-index')
index = pointIndex;
goIndex();
time = 0;//计时器跳转清零
})
}
//计时器
var timer;
function play(){
timer = setInterval(() => {
time ++;
if(time == 20 ){
goRight();
time = 0;
}
},100)
}
play();
//移入清除计时器
all.onmousemove = function(){
clearInterval(timer)
}
//移出启动计时器
all.onmouseleave = function(){
play();
}
</script>
最后显示的结果如下图所示,左右两个按钮可以实现图片的转换;右下角的三个圆点表示当前轮播图片的顺序。
代码质量的优化
应考虑效率、风格、使用场景、约定、设计等诸多因素。
