前言:之前赶项目,都是直接用框架,对于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,谢谢~

es6+移动轮播插件的更多相关文章

  1. 基于jQuery的移动轮播图(支持触屏)

    移动轮播图我看到两款, 一款是无线天猫的m.tmall.com,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似蘑菇街 <!doctype html> <h ...

  2. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  3. 多预览小图焦点轮播插件lrtk

    多预览小图焦点轮播插件lrtk // JavaScript Document $(document).ready(function(){ //$('#select_btn li:first').css ...

  4. 推荐:图片轮播插件Nivo Slider

          因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的.        ...

  5. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  6. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  7. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  8. js-自制轮播插件!

    刚接触轮播的时候,感觉这种东西好高端,后来学习了jquery后,发现原来挺简单的,而且实现轮播也有很多形式,我用jquery自制了一个轮播插件,其实我这个说是插件,好像其实就是一个高度抽象的函数而已. ...

  9. Bootstrap 轮播插件

    一.轮播 //基本实例. <div id="myCarousel" class="carousel slide"> <ol class=&qu ...

随机推荐

  1. 华为S5700S-52P-LI-AC千兆网管交换机web登录界面配置

    研究一下午,包装附的说明书根本就是错误的,通过技术售后和官方的文档结合,总算可以登录交换机的web管理界面. 首先需要使用通讯控制线缆(包装中附)连接电脑和交换机,一头接交换机的Console口,一头 ...

  2. 一个简单的Java web服务器实现

    前言 一个简单的Java web服务器实现,比较简单,基于java.net.Socket和java.net.ServerSocket实现: 程序执行步骤 创建一个ServerSocket对象: 调用S ...

  3. 【hadoop】——window下elicpse连接hadoop集群基础超详细版

    1.Hadoop开发环境简介 1.1 Hadoop集群简介 Java版本:jdk-6u31-linux-i586.bin Linux系统:CentOS6.0 Hadoop版本:hadoop-1.0.0 ...

  4. andriod 动态设置TextView 和 RelativeLayou 高度

    XML布局 <RelativeLayout android:id="@+id/rlay_meeting_contact_context" android:layout_wid ...

  5. MySQL事务学习-->隔离级别

    MySQL事务学习-->隔离级别 6 事务的隔离级别 设置的目的 在数据库操作中,为了有效保证并发读取数据的正确性,提出的事务隔离级别. 数据库是要被广大客户所共享访问的,那么在数据库操作过程中 ...

  6. linux线程同步(3)-读写锁

    一.概述                                                    读写锁与互斥量的功能类似,对临界区的共享资源进行保护!互斥量一次只让一个线程进入临界区, ...

  7. C++浅析——虚表和虚表Hook

    为了探究虚表的今生前世,先来一段测试代码 虚函数类: class CTest { public: int m_nData; virtual void PrintData() { printf(&quo ...

  8. [转][MVC] 剖析 NopCommerce 的 Theme 机制

    本文转自:http://www.cnblogs.com/coolite/archive/2012/12/28/NopTheme.html?utm_source=tuicool&utm_medi ...

  9. Book LIst

    Go ahead. Linux APUE Linux Kernel Development 鸟哥的linux私房菜 基础篇 鸟哥的linux私房菜 服务器篇 Network Computer Netw ...

  10. 三维网格分割算法(Random Walks)

    首先以一维随机游走(1D Random Walks)为例来介绍下随机游走(Random Walks)算法,如下图所示,从某点出发,随机向左右移动,向左和向右的概率相同,都为1/2,并且到达0点或N点则 ...