es6＋移动轮播插件

前言：之前赶项目，都是直接用框架，对于touch事件是模拟两可，趁着有心情，用es6写一个原生移动轮播插件。

用了es6的新特性，确实挺爽的，说到es6，就不得不说到babel,博主已经码好了，直接用就好了。下面简单说一下如何“搭环境”。

用Gulp、Babel等为浏览器构建ES6环境

［注意：该环节默认你电脑已经有node，gulp环境］

• 项目目录下，运行 npm init
• 找到package.json文件，找到dependencies，修改如下

"dependencies": {
    "babel-preset-es2015": "^6.5.0",
    "gulp-load-plugins": "^1.1.0",
    "gulp-babel": "^6.1.2",
    "gulp-plumber": "^1.0.1",
    "gulp-rename": "^1.2.2",
    "gulp": "^3.9.1",
    "gulp-jshint": "^2.0.0",
    "gulp-concat": "^2.6.0",
    "gulp-uglify": "^1.4.1",
    "gulp-util": "^3.0.1"
  }

• 命令行  运行npm install  ［该命令会安装package里面所有的依赖包，所以开发项目时，最好使用npm install --save '' ，方便其他合作者安装项目所需要的包］
• 在根目录下 新建gulpfile.js

const gulp = require('gulp'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify');


// Load plugins
const $ = require('gulp-load-plugins')();

/* es6 */
gulp.task('es6', function () {
    return gulp.src('src/js/*.js')
        .pipe($.plumber())
        .pipe($.babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist/js/'));
});

gulp.task('watch', ['es6'], function () {
    gulp.watch(['src/js/*.js'], ['es6']);
});

// 默认任务
gulp.task('default', function () {
    gulp.run('watch');
});

［注意：上面的目录需要 更改为实际项目 的目录］

• 命令行 运行 gulp 编译 即可。  

项目整体架构

class Slider {
    /*构造函数*/
    constructor(opts) {
        this.wrap = opts.dom;
        this.list = opts.list;
        this.init();
    }
    /*初始化*/
    init() {}
    /*绘制dom*/
    renderDOM() {}
    goIndex(n) {}
    bindDOM() {}
}

调用方式

 var list = [{
        img: "src/imgs/1.jpg"
    }, {
        img: "src/imgs/2.jpg"
    }, {
        img: "src/imgs/3.jpg"
    }, {
        img: "src/imgs/4.jpg"
    }, {
        img: "src/imgs/5.jpg",
    }, {
        img: "src/imgs/6.jpg",
    }, {
        img: "src/imgs/7.jpg",
    }];

    var x = new Slider({
        'dom': document.getElementById('canvas'),
        'list': list
    });

项目实现原理

• 绘制dom结构

 renderDOM() {
        let wrap = this.wrap,
            data = this.list,
            i = 0,
            html = [];
        this.outer = document.createElement('ul');

        for (let val of data) {
            if (val) {
                html.push(`<li style="transform: translate3d(${i * this.scaleW}px ,0,0)">
                    <img src="${val['img']}" alt="img" width="${window.innerWidth}px" height="180px" />
                  </li>`);
            }
            i++;
        }
        this.outer.innerHTML = html.join('');
        wrap.appendChild(this.outer);
    }

• 根据手指移动方向 判断向左（右）移动

  /*手指开始的事件*/
 let startHandle = (evt)=> {}
 /*手指移动的处理事件*/
 let moveHandler = (evt)=> {}
 /*手指抬起的事件*/
let endHandler = (evt)=> {}

let endHandler = (evt)=> {
            evt.preventDefault();
            let boundary = scaleW / 6,
                endTime = new Date() * 1;
            /*
             * 手指滑动距离超过 boundary 翻页
             * 当手指移动时间超过300ms的时候,按位移算
             * */
            if (endTime - this.startTime > 300) {
                if (this.offsetX >= boundary) {/*进入上一页*/
                    this.goIndex('-1');
                } else if (this.offsetX < 0 && this.offsetX < -boundary) {/*进入下一页*/
                    this.goIndex('+1');
                } else {/*留在本页*/
                    this.goIndex('0');
                }
            } else {
                /*快速滑动的时候,较少滑动的间隔,即可滑动*/
                if (this.offsetX > 50) {
                    this.goIndex('-1');
                } else if (this.offsetX < -50) {
                    this.goIndex('+1');
                } else {
                    this.goIndex('0');
                }
            }
        };

绑定事件

 outer.addEventListener('touchstart', startHandle);
 outer.addEventListener('touchmove', moveHandler);
 outer.addEventListener('touchend', endHandler);

使用es6开发有什么显著优势？

• 使用es6新增的类class，不需要像下面这样的写法去模拟类

function Slider(opts) {
    this.wrap = opts.dom;
    this.list = opts.list;
    this.init();
}
Slider.prototype = {
    init: function () {},
    renderDOM: function () {},
    bindDOM: function () {},
    goIndex: function (n) {}
}

优点：直观上，es6更容易理解，写法也更为简单。

1.constructor： 构造方法，构造方法里面的this，指向的是该类实例化后的对象。

constructor是一个类必须要有的方法，也是唯一的。如果你没有编写constructor方法，执行的时候也会被加上一个默认的空的constructor方法。

2.类似于java，它也有静态方法，顾名思义，就是不需要实例化就可以直接调用该方法，直接看例子更容易理解

class Animal {
    //构造方法
    constructor(name){
        this.name = name;
    }
    //自定义一个静态方法
    static friends(a1,a2){
        console.log(`${a1} and ${a2} are friends`);
    }
    sayHello(){
        console.log('hello');
    }
}
//调用静态方法
Animal.friends('dog','cat');//dog and cat are friends
Animal.sayHello();  //出错
var animal = new Animal('dog');
animal.sayHello();  //hello

• 该例子中还使用了es6的另一个特性——模版字符串

上面的例子，如果用之前的实现方式，就要

(a1 + 'and' + a2 + 'are friends');

注意：

1.在``中，换行也会被保存，[``是不是有点像markdown 哈哈 ]如果不想要换行，使用trim方法消除它，同样的，举个例子

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

2.嵌入变量，将变量名写在${}之中，｛｝中可以进行运算，还可以调用函数

• 函数 默认传参

传统实现方式：

 function person(n,a){
        var name = n || 'Zhangsan';
        var age  = a ||  25;
 }

缺点：參数对应的布尔值不能false（比如：数字0，空字符串等转换成布尔值就是false）

新新方式：

function person(name = 'Zhangsan',age = 25){
       console.log(name,age);
}
    
person();//结果：Zhangsan  25
person('Lisi',18);//结果：Lisi  18

注意：设定默认值的参数一定要放在最后，不然会出错

• 箭头函数

//传统实现方法
var obj = {
    x:100,
    show(){  //对象方法的简单写法
        setTimeout(
            function(){console.log(this.x);},
            500
        );
    }
};
obj.show();//打印结果：undefined
//es6箭头函数
var obj = {
    x:100,
    show(){
        setTimeout(
            //不同处：箭头函数
            () => { console.log(this.x)},
            500
        );
    }
};
obj.show();//打印结果：100

仔细看看上面的例子，为什么第一个输出的是undefined？

问题出在了this上，当代码执行到了setTimeout( )的时候，此时的this已经变成了window对象（setTimeout( )是window对象的方法），已经不再是obj对象了，所以我们用this.x获取的时候，获取的不是obj.x的值，而是window.x的值，再加上window上没有定义属性x，所以得到的结果就是：undefined。

不懂this指向的可以看看我的另一篇博客：http://www.cnblogs.com/beidan/p/5371275.html

再对比箭头函数

同样的一段代码，唯一的不用就是setTimeout中，原本的匿名函数用箭头函数代替了。神奇的是因为

优点：

1.箭头函数中的this指向的是定义时的this，而不是执行时的this

2. 箭头函数没有独立的this， 所以有些情况，比如事件调用，需要缓存this，但是用箭头函数就不用啦

3.看上面，箭头函数简化函数的实现，大大地减少代码量，真是不错的特性

还有另外一些es6的新特性，也是挺不错的，推荐［排名不分先后］

let，const，for of，继承，rest参数，模块，解构，promise…………

还有哪些属性比较常使用，请告诉我，谢谢～～～

github地址：https://github.com/beidan/slide

如果这篇博文对你有帮助，请给我star或者fork，谢谢～