ES6类的语法
- 1.构造函数不加new也能使用,只是没有意义
- 2.构造函数与原型上的内容需要分开书写

   //ES6之前书写
  //   function Person(){
  //     this.a = 123
  //     this.abc = 456
  //  }
  //   Person.prototype.init = function(){}

    //ES6类的书写
    class Stu {
      //构造器,类似于ES5构造函数的函数体
      constructor (num) {
        this.name = '张三'
        this.age = num
      }
      //接下来的位置全都是原型的书写位置
      init () {
        console.log('我是原型上的init方法')
      }
    }
    const s1 = new Stu(18)
    console.log(s1)

    s1.init()

    const s3 = Stu(99)
    console.log(s3)

选项卡重构

        class Tabs {
          //构造器,类似于构造函数的函数体
          constructor(ele){
            this.ele = document.querySelector(ele)
            this.hLi = [...this.ele.querySelectorAll('.header li')]
            this.cLi = [...this.ele.querySelectorAll('.content li')]
            // 创建 选项卡的一些 代码.....
            this.init()
          }
          //下边位置都是书写原型的位置
          init () {
            let that = this
            this.hLi.forEach(function (item, index) {
                item.onclick = function () {
                    // 1. 给所有的 li 全都取消类名
                    that.hLi.forEach(function (li, liIndex) {
                        li.classList.remove('active')
                        that.cLi[liIndex].classList.remove('active')
                    })
                    // 2. 给当前点击的 li 添加类名
                    item.classList.add('active')
                    that.cLi[index].classList.add('active')
                }
            })

          }
        }

        
        const t1 = new Tabs('.box1')   // 现在就创建出来


        new Tabs('.box2')

轮播图

面向过程

1.分析 * 属性（变量）

       +banner -> 轮播图可视区域盒子

```
       +imgBox -> 存放图片的ul
```

       +index -> 表明当前展示的第几章图片

方法

*            +copyEle -> 处理假图
*            +setFocus -> 设置焦点
*            +autoplay -> 自动轮播

面向对象完成技巧
- 定义变量--->改成属性 this.xxx = yyyy书写在构造函数的函数体内
- 定义函数--->改成方法直接书写在构造函数的原型对象内
- 方法内的变量：如果需要在别的函数内使用，那么将这个变量直接写在构造函数的函数体内（以前写在全局）
- ```
   如果只需要在当前函数内使用，那么直接将这个变量定义在当前函数内
```

class Banner {
  //构造器，类似于构造函数的函数体
  constructor (ele) {
    this.ele = document.querySelector(ele)
    this.imgBox = this.ele.querySelector('.img_box')
    this.focus = this.ele.querySelector('.focus')


    this.index = 0//这里使用下标表示，如果值为0，代表第一张
    this.timer = 0
    
    this.init()
  }

  //以下位置书写原型
  init(){
    this.setFocus()
    this.autoPlay()
    this.mouseMove()
    this.clickBtn()
  }

  //1.根据图片数量设置焦点
  setFocus () {
    //1.获取图片数量
    // console.log(this.imgBox.children.length)
    let liNum = this.imgBox.children.length;
    //2.根据图片数量生成焦点
    for (let i = 0; i < liNum; i++) {
        //1.创建一个li标签
        const newLi = document.createElement('li')
        //将下标绑定标签
        newLi.dataset.id= i
        newLi.classList.add('item_')
        //2.添加类名
        i === 0 && newLi.classList.add('active')
        //3.插入到DOM
        this.focus.appendChild(newLi)

       
    }
  } 

  //1.5重新封装一个move函数的方法
  cut(type){
    /**
     * 1.点击切换到下一张（自动切换到下一张）
     * 2.点击切换到上一张
     * 3.点击焦点切换到某一张
     * 
     *    调用cut函数的时候，传递三个不同的参数，让代码根据参数的不同做对应的事
     *
     *  如果传递的是true切换下一张，如果是false切换上一张 ，传递的是数字，代表切换到某一张

    */

    //1.5.1函数开始执行，在这里我们的this.index表示的是当前界面中哪一个li具有类名，可以直接找到它取消类名
    this.imgBox.children[this.index].classList.remove('active')
    this.focus.children[this.index].classList.remove('active')

    //1.5.2根据参数确定展示哪一张图
    if (type === true) {
      //切换下一张
      this.index++
    }else if (type === false) {
      //切换上一张
      this.index--
    }else{
      //切换某一张
      this.index = type
    }

    //边界限制，如果滚动到最后一张，应该展示的是下标0的图片
    if(this.index >= this.imgBox.children.length){
      this.index = 0
    }
    //边界限制，如果滚动到第一张，应该展示的是最后一张图片
    if(this.index < 0){
      this.index = this.imgBox.children.length - 1
    }
    //1.5.3根据this.index的值给对应的li添加类名
    this.imgBox.children[this.index].classList.add('active')
    this.focus.children[this.index].classList.add('active')
  }

  //2.自动轮播
  autoPlay(){
    this.timer = setInterval(() => {
      //调用一个类似move函数的方法
      this.cut(true)
    },1000)
  }

  //3.移入移出事件
  mouseMove(){
    //3.1鼠标移入关闭定时器
    this.ele.onmouseover = () => clearInterval(this.timer);
    //3.1鼠标移出开启定时器
    this.ele.onmouseout = () => this.autoPlay()
  }

  //4.点击事件
  clickBtn(){
    this.ele.onclick = (e) => {
      if(e.target.className === 'left'){
        //切换上一页
        this.cut(false)
      }
      if(e.target.className === 'right'){
        //切换下一页
        this.cut(true)
      }
      if(e.target.className === 'item_'){
        this.cut(e.target.dataset.id - 0)
      }
    }
  }

  

}

JS之 ES6类的语法

选项卡重构

轮播图