ES6 DEMO
案例：
①匿名封装
(function(window,document){
const HEAD = 1;
let MSG = function(options){
this._init(options);
}
//原型
MSG.prototype._init = function({msg}){
this._doSomeThing(msg);
}
MSG.prototype._doSomeThing = function(msg){
alert(msg);
}
// 挂载
window.$Msg = Msg;
})(window,document);
// 调用
new $Msg({msg : '您好'}); ②PromiseAll运用，图片全部加载才显示出来 (function(document) {
let LoadImg = function(){
let promises = imgs.map(src => {
return this.imgToPromise(src);
}); this.imgLoad(promises);
}
LoadImg.prototype.imgToPromise = src => {
return new Promise((resolve,reject) => {
const img = new Image();
img.src = src;
img.onload = () => {
你resolve(img);
};
img.onerror = (e) => {
reject(e);
}
})
}
LoadImg.prototype.imgLoad = arr => {
Promise.all(arr).then((arr)=>{
arr.forEach(img => {
document.body.append(img);
})
},err => {
// 错误
console.log(err);
})
}
window.LoadImg = LoadImg;
})(document); const imgs = [
'https://pics1.baidu.com/feed/5882b2b7d0a20cf4f2291433b2004030adaf99b5.jpeg?token=00786888f8e87b7704e637824f570ece&s=BB98C8015A64750DC42015C00300A0B2','https://pics7.baidu.com/feed/4610b912c8fcc3ce8b524ed0574cdd8ed53f2056.jpeg?token=024ed25c842ae64030effe79f8832ee7&s=E9271F70592B412C18783DD30300C0B2','https://pics7.baidu.com/feed/4610b912c8fcc3ce8b524ed0574cdd8ed53f2056.jpeg?token=024ed25c842ae64030effe79f8832ee7&s=E9271F70592B412C18783DD30300C0B2'
];
new LoadImg(imgs);
③ promise动画
function moveTo(el,x,y){
return new Promise( resolve => {
el.style.transform = `translate(${x}px,${y}px)`;
setTimeout(function(){
resolve();
},1000)
}) }
let el = document.querySelector('div'); document.querySelector('button').addEventListener('click', e => {
moveTo(el,100,100).then(()=>{
console.log(1);
return moveTo(el,200,200);
}).then(()=>{
console.log(1);
return moveTo(el,100,100);
}).then(()=>{
console.log(1);
return moveTo(el,0,0);
})
}) ④对象封装变形类
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.ball{
width: 150px;
height: 150px;
background: linear-gradient(#ff9b9b 50%,#106dbb 50%);
border-radius: 50%;
}
</style>
<body>
<div class="ball"></div>
</body> <script type="text/javascript">
class Transform{
constructor(el){
this.el = document.querySelector(el);
// 队列
this._queue = [];
// 默认时间
this.default_transition = 3000;
this._transform = {
rotate: '',
translate: '',
scale: '',
}
} // 位移
translate(value, time){
return this._add('translate', value, time);
}
// 缩放
scale(value, time){
return this._add('scale',value,time);
}
// 形变
rotate(value,time){
return this._add('rotate',value,time);
} _add(type, value, time){
this._queue.push({type, value, time});
return this;
}
done() {
this._start();
}
_start() {
if(!this._queue.length)return; // 先进先出
setTimeout(() => {
// shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
const info = this._queue.shift();
let transition = info.time ? info.time : this.default_transition; this.el.style.transition = `all ${ transition / 1000}s`; this.el.style.transform = this._getTransform(info);
setTimeout(() => {
this._start();
},transition);
},0)
}
_getTransform({ time, value, type}){
switch(type){
case 'translate':
this._transform.translate = `translate(${ value })`;
break;
case 'scale':
this._transform.scale = `scale(${ value })`;
break;
case 'rotate':
this._transform.rotate = `rotate(${ value }deg)`;
break;
}
return `${this._transform.translate} ${this._transform.scale} ${this._transform.rotate}`;
}
} let tf = new Transform(".ball");
tf.translate('100px,100px').scale('1.5').rotate(2220,220000).done();
</script>
</html>
ES6 DEMO的更多相关文章
- JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)
本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对 ...
- vue+node+es6+webpack创建简单vue的demo
闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...
- JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)
写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向 ...
- JavaScript面向对象轻松入门之继承(demo by ES5、ES6)
继承是面向对象很重要的一个概念,分为接口继承和实现继承,接口继承即为继承某个对象的方法,实现继承即为继承某个对象的属性.JavvaScript通过原型链来实现接口继承.call()或apply()来实 ...
- JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)
多态(Polymorphism)按字面的意思就是"多种状态",同样的行为(方法)在不同对象上有不同的状态. 在OOP中很多地方都要用到多态的特性,比如同样是点击鼠标右键,点击快捷方 ...
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- 一个webpack，react，less，es6的DEMO
1.package.json如下 { "name": "demo", "version": "1.0.0", " ...
- JavaScript面向对象轻松入门之抽象(demo by ES5、ES6、TypeScript)
抽象的概念 狭义的抽象,也就是代码里的抽象,就是把一些相关联的业务逻辑分离成属性和方法(行为),这些属性和方法就可以构成一个对象. 这种抽象是为了把难以理解的代码归纳成与现实世界关联的概念,比如小狗这 ...
- JavaScript ES6和ES5闭包的小demo
版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons) 可能有些小伙伴不知道ES6的写法,这儿先填写一个小例子 let conn ...
随机推荐
- Java并发编程(三)：ReentrantLock
ReentrantLock是可以用来代替synchronized的.ReentrantLock比synchronized更加灵活,功能上面更加丰富,性能方面自synchronized优化后两者性能没有 ...
- 【题解】P3373 【模板】线段树 2
线段树解法 好丢脸,这个题做了一下午,调试了三个多小时...... 先讲讲解题思路 既然这里是线段树,就要用到lazy-tag.又有加法又有乘法的话,就要用到两个lazy-tag,分别用数组jia[] ...
- 面试官：“看你简历上写熟悉 Handler 机制，那聊聊 IdleHandler 吧？”
一. 序 Handler 机制算是 Android 基本功,面试常客.但现在面试,多数已经不会直接让你讲讲 Handler 的机制,Looper 是如何循环的,MessageQueue 是如何管理 M ...
- [Effective Java 读书笔记] 第三章类和接口 第十三 -- 十四条
第十三条 使类和成员的可访问性最小化 总得来说,我们应该尽量将成员的访问范围限制到最小!有利于解耦,开发.测试和优化都能够更加独立. 对于成员(域,方法,嵌套类和嵌套接口),有四种可能的访问级别,访问 ...
- redis系列-14点的灵异事件
概述 项目组每天14点都会遭遇惊魂时刻.一条条告警短信把工程师从午后小憩中拉回现实.之后问题又神秘消失.是PM喊你上工了?还是服务器给你开玩笑?下面请看工程师如何一步一步揪出真凶,解决问题. 如果不想 ...
- 前端开发：这10个Chrome扩展你不得不知
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/10-top-chrome-extensions-f ...
- 用原生JS&PHP简单的AJAX实例
功能介绍: 1)file.html 使用 xmlhttp 请求服务器端文件 text ,并更新 file.html 的部分内容 2)update.html 使用 xmlhttp 通过 filewrit ...
- leetcode--js--Longest Substring Without Repeating Characters
问题描述: Given a string, find the length of the longest substring without repeating characters. Example ...
- 刷题94. Binary Tree Inorder Traversal
一.题目说明 题目94. Binary Tree Inorder Traversal,给一个二叉树,返回中序遍历序列.题目难度是Medium! 二.我的解答 用递归遍历,学过数据结构的应该都可以实现. ...
- 在虚拟机中使用NetToPLCSim和PLC相连.
1,虚拟机...系统Win10...里面安装了VS. 2,本机...系统Win10...里面安装了博图15. 3,转换软件:NetToPLCSIM. 4,本机和虚拟机连接同一个路由器.注意: 5,设置 ...