es6 class 小笔记

class 相当于 构造函数 function 的语法糖

下面是轮播图小demo ,

css

#box {
    width: 300px;
    height:200px;
    margin: 0 auto;
    border: 1px solid black;
    overflow: hidden;
    position: relative;
}
#slides  {
    position: absolute;left:0%;width: 1000%;height:200px;margin: 0 auto;list-style-type: none;padding:0;transition: all 0.2s ease;
}
#slides div { float:left;width:300px;height:100%; }
button {
    color: brown;
    padding: 10px;
}

 

html

<div id="box">
    <div id="slides" class="slides clearfix">
        <div style="background-color: burlywood;"></div>
        <div style="background-color: brown;"></div>
        <div style="background-color: blueviolet;"></div>
    </div>
</div>
<button class="pre"><</button>
<button class="next">></button>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="./show1.js"></script>

 

js class写法

<script type="text/javascript">
    var swiper = new Swiper()
    var swiper = new class {
        constructor (index) {
            this.index = 0;
            this.start;
            this._init();
        }

        _init(){ this._event(); }

        _event(){
            document.querySelector('.next').onclick = this._next;
            document.querySelector('.pre').onclick = this._pre;
            document.querySelector('.slides').ontouchstart = this._touchstart;
            document.querySelector('.slides').ontouchend = this._touchend;
        }

        _next() {
            if(swiper.index<2) {
                swiper.index++
            }
            document.querySelector('.slides').style.left = - (swiper.index * 100) + '%'
        }

        _pre() {
            if(swiper.index>0) {
                swiper.index--
            }
            document.querySelector('.slides').style.left = - (swiper.index * 100) + '%'
        }

        _touchstart(event) {
            event.preventDefault();
            var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
            swiper.start = touch.screenX;
            console.log(touch.screenX)
        }

        _touchend(event) {
            event.preventDefault();
            var touch = event.changedTouches[0],end;
            end = touch.screenX;
            if(swiper.start > end) { // 右滑
                swiper._next();
            } else {
                swiper._pre();
            }
        }
    }
</script>

构造函数写法

function Swiper() {
    this.index = 0;
    this.start;
    this._init();
}

Swiper.prototype = {
    _init(){ this._event(); },
    _event(){
        document.querySelector('.next').onclick = this._next;
        document.querySelector('.pre').onclick = this._pre;
        document.querySelector('.slides').ontouchstart = this._touchstart;
        document.querySelector('.slides').ontouchend = this._touchend;
    },
    _next() {
        if(swiper.index<2) {
            swiper.index++
        }
        document.querySelector('.slides').style.left = - (swiper.index * 100) + '%'
    },

    _pre() {
        if(swiper.index>0) {
            swiper.index--
        }
        document.querySelector('.slides').style.left = - (swiper.index * 100) + '%'
    },

    _touchstart(event) {
        event.preventDefault();
        var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
        swiper.start = touch.screenX;
        console.log(touch.screenX)
    },

    _touchend(event) {
        event.preventDefault();
        var touch = event.changedTouches[0],end;
        end = touch.screenX;
        if(swiper.start > end) { // 右滑
            swiper._next();
        } else {
            swiper._pre();
        }
    }
}