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，谢谢～