web前端入门到实战：以轮播效果为案例谈如何写优质代码

作为程序员大家在写代码时谈的最多的就是代码的拓展性、复用性。本文就以大家熟悉的轮播效果为案例，讲一讲写优质代码的思路和实践。

文章分三个步骤。第一步，实现基本功能；第二步，考虑到代码的封装性和复用性；第三步，考虑到代码的拓展性。

实现基本功能

完整代码查看，下面只展示HTML结构和JavaScript

    <div class="carousel">
      <div class="panels">
        <a href="#">
          <img src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
        </a>
        <a href="#">
          <img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
        </a>
        <a href="#">
          <img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
        </a>
        <a href="#">
          <img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
        </a>
      </div>
      <div class="action">
        <span class="pre">上一个</span>
        <span class="next">下一个</span>
        <div class="dots">
          <span class="active"></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

JavaScript

//让document.querySelector 用起来更方便      
const $ = s => document.querySelector(s) 
const $$ = s => document.querySelectorAll(s)

const dotCt = $('.carousel .dots')
const preBtn = $('.carousel .pre')
const nextBtn = $('.carousel .next')

//把类数组对象转换为数组，便于之后使用数组方法
//这里对应的是包含图片面板的数组
const panels = Array.from($$('.carousel .panels > a')) 
//这里对应的是包含小圆点的数组
const dots = Array.from($$('.carousel .dots span'))

//要展示第几页，就先把所有页的z-index设置为0，再把要展示的页面z-index设置为10
const showPage = pageIndex => {
  panels.forEach(panel => panel.style.zIndex = 0)
  panels[pageIndex].style.zIndex = 10
}

const setDots = pageIndex => {
  dots.forEach(dot => dot.classList.remove('active'))
  dots[pageIndex].classList.add('active')   
}

//根据第几个小点上有active的类来判断在第几