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中,原本的匿名函数用箭头函数代替了。神奇的是因为
let,const,for of,继承,rest参数,模块,解构,promise…………
还有哪些属性比较常使用,请告诉我,谢谢~~~
github地址:https://github.com/beidan/slide
如果这篇博文对你有帮助,请给我star或者fork,谢谢~
es6+移动轮播插件的更多相关文章
- 基于jQuery的移动轮播图(支持触屏)
移动轮播图我看到两款, 一款是无线天猫的m.tmall.com,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似蘑菇街 <!doctype html> <h ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 多预览小图焦点轮播插件lrtk
多预览小图焦点轮播插件lrtk // JavaScript Document $(document).ready(function(){ //$('#select_btn li:first').css ...
- 推荐:图片轮播插件Nivo Slider
因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的. ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- js-自制轮播插件!
刚接触轮播的时候,感觉这种东西好高端,后来学习了jquery后,发现原来挺简单的,而且实现轮播也有很多形式,我用jquery自制了一个轮播插件,其实我这个说是插件,好像其实就是一个高度抽象的函数而已. ...
- Bootstrap 轮播插件
一.轮播 //基本实例. <div id="myCarousel" class="carousel slide"> <ol class=&qu ...
随机推荐
- [20140117]疑似checkpoint堵塞数据库连接
注:这个说法是不成立的,问题已经解决,但是无法正确的定位到具体什么原因:[20140702]奇怪的应用程序超时 背景: 开发通过应用程序的日志发现间歇性的出现,数据库连接超时 原因: 只能大概猜测,没 ...
- Spring 整体架构
1. Core Container:核心容器(core.Beans.Context.Expression Language Core.Beans框架基础构成,提供IOC.依赖注入特性.BeanFa ...
- python scrapy+Mongodb爬取蜻蜓FM,酷我及懒人听书
1.初衷:想在网上批量下载点听书.脱口秀之类,资源匮乏,大家可以一试 2.技术:wireshark scrapy jsonMonogoDB 3.思路:wireshark分析移动APP返回的各种连接分类 ...
- file
用来测试文件类型 $file [] filename -b列出辨识结果时,但不显示文件名称 -L如果文件是符号链接,那么直接解读其指向的文件 -z:如果文件是压缩文件,尝试去解读压缩文件的内容 $fi ...
- 单片机温度控制系统DS18B20
单片机温度控制系统核心 由895X系列单片机来控制来驱动18b20温度传感器模块,通过编写C语言代码,来实现对模块的控制驱动,不断的接收读取18b20传过来的温度信号.将传过来的高低位字节经过个人代码 ...
- css font-weight原理
为什么要记录一下?因为今天我要设置一个字符加粗,然后就用font-weight:200,没有任何效果.现在看来很可笑,400才相当于normal,200怎么加粗,奇怪的是也没有变细.所以得研究一下fo ...
- [转]在NopCommerce中新增一个Domain Model的步骤
本文转自:http://www.cnblogs.com/aneasystone/archive/2012/08/27/2659183.html 在NopCommerce中新增一个Domain Mode ...
- 扫盲 BT Sync——不仅是同步利器,而且是【分布式】网盘
先向大伙儿宣布个好消息-- 经过多位热心读者的大力支持,经过几天的努力,已经完成了"微软网盘"到"BitTorrent Sync"的迁移工作. 再次向这批热心读 ...
- Beanstalk消息队列的实现
在工作中要用到消息队列,但是主管为了追求开发速度,让用了一个简易的类 beanstalk 下面来说明这个东西 参考博客:https://my.oschina.net/u/698121/blog/15 ...
- HTML 学习笔记 CSS样式(框模型)
CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述