1. 案例：
  2. 	①匿名封装
  3. 		(function(window,document){
  4. 			const HEAD = 1;
  5. 			let MSG = function(options){
  6. 				this._init(options);
  7. 			}
  8. 			//原型
  9. 			MSG.prototype._init = function({msg}){
  10. 				this._doSomeThing(msg);
  11. 			}
  12. 			MSG.prototype._doSomeThing = function(msg){
  13. 				alert(msg);
  14. 			}
  15. 			// 挂载
  16. 			window.$Msg = Msg;
  17. 		})(window,document);
  18. 		// 调用
  19. 		new $Msg({msg : '您好'});
  20.  
  21. 	②PromiseAll运用，图片全部加载才显示出来
  22.  
  23. 		(function(document) {
  24. 			let LoadImg = function(){
  25. 				let promises = imgs.map(src => {
  26. 					return this.imgToPromise(src);
  27. 				});
  28.  
  29. 				this.imgLoad(promises);
  30. 			}
  31. 			LoadImg.prototype.imgToPromise = src => {
  32. 				return new Promise((resolve,reject) => {
  33. 					const img = new Image();
  34. 					img.src = src;
  35. 					img.onload = () => {
  36. 					 你resolve(img);
  37. 					};
  38. 					img.onerror = (e) => {
  39. 						reject(e);
  40. 					}
  41. 				})
  42. 			}
  43. 			LoadImg.prototype.imgLoad = arr => {
  44. 				Promise.all(arr).then((arr)=>{
  45. 					arr.forEach(img => {
  46. 						document.body.append(img);
  47. 					})
  48. 				},err => {
  49. 					// 错误
  50. 					console.log(err);
  51. 				})
  52. 			}
  53. 			window.LoadImg = LoadImg;
  54. 		})(document);
  55.  
  56. 		const imgs = [
  57. 			'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'
  58. 		];
  59. 		new LoadImg(imgs);
  60. 	③ promise动画
  61. 		function moveTo(el,x,y){
  62. 			return new Promise( resolve => {
  63. 				el.style.transform = `translate(${x}px,${y}px)`;
  64. 				setTimeout(function(){
  65. 					resolve();
  66. 				},1000)
  67. 			})
  68.  
  69. 		}
  70. 		let el = document.querySelector('div');
  71.  
  72. 		document.querySelector('button').addEventListener('click', e => {
  73. 			moveTo(el,100,100).then(()=>{
  74. 				console.log(1);
  75. 				return moveTo(el,200,200);
  76. 			}).then(()=>{
  77. 				console.log(1);
  78. 				return moveTo(el,100,100);
  79. 			}).then(()=>{
  80. 				console.log(1);
  81. 				return moveTo(el,0,0);
  82. 			})
  83. 		})
  84.  
  85. 	④对象封装变形类
  86. 		<!DOCTYPE html>
  87. 		<html>
  88. 		<head>
  89. 			<title></title>
  90. 		</head>
  91. 		<style type="text/css">
  92. 			.ball{
  93. 				width: 150px;
  94. 				height: 150px;
  95. 				background: linear-gradient(#ff9b9b 50%,#106dbb 50%);
  96. 				border-radius: 50%;
  97. 			}
  98. 		</style>
  99. 		<body>
  100. 			<div class="ball"></div>
  101. 		</body>
  102.  
  103. 		<script type="text/javascript">
  104. 			class Transform{
  105. 				constructor(el){
  106. 					this.el = document.querySelector(el);
  107. 					// 队列
  108. 					this._queue = [];
  109. 					// 默认时间
  110. 					this.default_transition = 3000;
  111. 					this._transform = {
  112. 						rotate: '',
  113. 						translate: '',
  114. 						scale: '',
  115. 					}
  116. 				}
  117.  
  118. 				// 位移
  119. 				translate(value, time){
  120. 					return this._add('translate', value, time);
  121. 				}
  122. 				// 缩放
  123. 				scale(value, time){
  124. 					return this._add('scale',value,time);
  125. 				}
  126. 				// 形变
  127. 				rotate(value,time){
  128. 					return this._add('rotate',value,time);
  129. 				}
  130.  
  131. 				_add(type, value, time){
  132. 					this._queue.push({type, value, time});
  133. 					return this;
  134. 				}
  135. 				done() {
  136. 					this._start();
  137. 				}
  138. 				_start() {
  139. 					if(!this._queue.length)return;
  140.  
  141. 					// 先进先出
  142. 					setTimeout(() => {
  143. 						// shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
  144. 						const info = this._queue.shift();
  145. 						let transition = info.time ? info.time : this.default_transition;
  146.  
  147. 						this.el.style.transition = `all ${ transition / 1000}s`;
  148.  
  149. 						this.el.style.transform = this._getTransform(info);
  150. 						setTimeout(() => {
  151. 							this._start();
  152. 						},transition);
  153. 					},0)
  154. 				}
  155. 				_getTransform({ time, value, type}){
  156. 					switch(type){
  157. 						case 'translate':
  158. 							this._transform.translate = `translate(${ value })`;
  159. 							break;
  160. 						case 'scale':
  161. 							this._transform.scale = `scale(${ value })`;
  162. 							break;
  163. 						case 'rotate':
  164. 							this._transform.rotate = `rotate(${ value }deg)`;
  165. 							break;
  166. 					}
  167. 					return `${this._transform.translate} ${this._transform.scale} ${this._transform.rotate}`;
  168. 				}
  169. 			}
  170.  
  171. 			let tf = new Transform(".ball");
  172. 			tf.translate('100px,100px').scale('1.5').rotate(2220,220000).done();
  173. 		</script>
  174. 		</html>

　　

ES6 DEMO的更多相关文章

  1. JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)

    本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对 ...

  2. vue+node+es6+webpack创建简单vue的demo

    闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...

  3. JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)

    写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向 ...

  4. JavaScript面向对象轻松入门之继承(demo by ES5、ES6)

    继承是面向对象很重要的一个概念,分为接口继承和实现继承,接口继承即为继承某个对象的方法,实现继承即为继承某个对象的属性.JavvaScript通过原型链来实现接口继承.call()或apply()来实 ...

  5. JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)

    多态(Polymorphism)按字面的意思就是"多种状态",同样的行为(方法)在不同对象上有不同的状态. 在OOP中很多地方都要用到多态的特性,比如同样是点击鼠标右键,点击快捷方 ...

  6. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  7. 一个webpack，react，less，es6的DEMO

    1.package.json如下 { "name": "demo", "version": "1.0.0", " ...

  8. JavaScript面向对象轻松入门之抽象(demo by ES5、ES6、TypeScript)

    抽象的概念 狭义的抽象,也就是代码里的抽象,就是把一些相关联的业务逻辑分离成属性和方法(行为),这些属性和方法就可以构成一个对象. 这种抽象是为了把难以理解的代码归纳成与现实世界关联的概念,比如小狗这 ...

  9. JavaScript ES6和ES5闭包的小demo

    版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons) 可能有些小伙伴不知道ES6的写法,这儿先填写一个小例子 let conn ...

随机推荐

  1. Codeforces 1249F Maximum Weight Subset (贪心)

    题意 在一颗有点权的树上,选若干个点,使得这些点两两距离大于k,且点权和最大 思路 贪心的取比较大的值即可 将所有点按照深度从大到小排序,如果当前点点权\(a[i]\)大于0,则将距离为k以内的所有点 ...

  2. cookie 笔记

    Cookie    “小甜点” Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生 用来记录:用户信息  计算机信息  浏 ...

  3. 基于 Serverless Component 全栈解决方案

    什么是 Serverless Component Serverless Component 是 Serverless Framework 的,支持多个云资源编排和组织的场景化解决方案. Serverl ...

  4. Django表单Form类对空值None的替换

    最近在写项目的时候用到Form,发现这个类什么都好,就是有些空值的默认赋值真是很不合我胃口. 查阅资料.官方文档后发现并没有设置该值的方式.于是,便开始了我的踩坑之路...... 不过现在完美解决了, ...

  5. Classmethod and Staticmethod - Python 类方法 和 静态方法

    classmethod and staticmethod classmethod 的是一个参数是类对象 cls (本类,或者子类), 而不是实例对象 instance (普通方法). classmet ...

  6. FastDFS 配置文件 tracker.conf

    FastDFS 版本5.05 配置文件分为三部分   控制器:tracker.conf存储器:storage.conf 客户端:client.conf 文件位置:/etc/fdfs 基本配置(基础配置 ...

  7. centos6.5安装openLDAP2.3

    查看系统版本,内核,定时任务同步时间,关闭防火墙selinux等 [root@ldap-master ~]# cat /etc/redhat-release CentOS release 6.5 (F ...

  8. light oj 1214 - Large Division 大数除法

    1214 - Large Division Given two integers, a and b, you should check whether a is divisible by b or n ...

  9. Spring有哪些配置方式

    1.XML 配置文件. Bean 所需的依赖项和服务在 XML 格式的配置文件中指定.这些配置文件通常包含许多 bean 定义和特定于应用程序的配置选项.它们通常以 bean 标签开头.例如: < ...

  10. linux中压缩解压缩命令

    目录 gzip gunzip tar(打包压缩) tar(解包解压) zip unzip bzip2 bunzip2 gzip 解释 命令名称:gzip 命令英文原意:GUN zip 命令所在路径:/ ...