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. 什么是伪静态,以及ubuntu + apache 如何实现伪静态

    原文链接:http://www.cnblogs.com/ainiaa/archive/2010/07/25/1784564.html php伪静态 一直在做php的开发工作.在开发的过程中老早就听说了 ...

  2. NFA和DFA的区别

      NFA DFA 初始状态 不唯一 唯一 弧上的标记 字(单字符字/ε) 字符(串) 转换关系 非确定 确定 对于每个NFA M都存在一个DFA M' 使得 L(M) = L(M')

  3. TestStand 基础知识[6]--Build-in Step Types (1)

    Step Types 有TestStand自带的,也有自定义的.本文先介绍自带的Step Types. 首先什么是Step Types ? 翻译过来就是步骤的类型,类似数据类型--数据有整型,字符串, ...

  4. Xcode11: 删除默认Main.storyBoard, 自定义UIWindow的变化 UIWindow 不能在AppDelegate中处理

    Xcode自动新增了一个SceneDelegate文件,查找了一下官方文档WWDC2019:Optimizing App Launch 发现,iOS13中appdelegate的职责发现了改变: iO ...

  5. OSPF配置实验(一)

    单区域OSPF 命令: R1(config)#router ospf 1        //启动OSPF进程 R1(config-router)#router-id 1.1.1.1        // ...

  6. asp.net core 3.x 授权默认流程

    一.前言 接上一篇<asp.net core 3.x 授权中的概念>,本篇看看asp.net core默认授权的流程.从两个方面来看整个授权系统是怎么运行的:启动阶段的配置.请求阶段中间件 ...

  7. 珠峰-vue

  8. jdk升级后Eclipse无法启动问题

    overview: 今日安装jdk11,设置好环境变量后,eclipse无法运行,由于项目依赖原因,不想更新eclipse的版本. 我的jdk是1.8,在将环境变量设回1.8后依然无法运行.在多次尝试 ...

  9. JS正则表达式的创建、匹配字符串、转义、字符类、重复以及常用字符

    正则表达式都是操作字符串的 作用:对数据进行查找.替换.有效性验证 创建正则表达式的两种方式: // 字面量方式 /js/ // 构造函数方式 regular expression new RegEx ...

  10. java数据结构---循环队列

    #java学习经验总结------循环队列的实现(数组) package datastructure;/*数组实现循环队列 队列first in first out*/ public class Ci ...