命令模式是最简单和优雅的模式之一，命令模式中的命令（command）是指一个执行某些特定事情的指令。

应用场景：有时候需要向某些对象发送请求，但是并不知道请求的接受者是谁，也不知道被请求的操作是什么，此时希望用一种

松解耦的方式来设计软件，使得请求发送者和请求接受者能够消除彼此之间的耦合关系。

一个简单JavaScript例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>命令模式</title>

     <style>

         body{

             padding:  0;

             margin: 0;

         }

         .ball{

             position: absolute;

             background: #000;

             width: 50px;

             height: 50px;

             top:  200px;

         }

     </style>

 </head>

 <body>

     <div id="ball" class="ball"></div>

     输入小球移动后的位置：<input type="text" id="pos">

     <button id="moveBtn">开始移动</button>

     <button id="cancelBtn">cancel</button>

     <script>

         // 营运策略模式封装一系列缓动算法

         // t:已消耗的时间 b:小球的原始位置   c:小球的目标位置  d:动画持续的总时间

         // 返回当前位置

         var tween = {

             linear: function(t, b, c, d) {

                 return c*t/d + b;

             },

             easeIn: function(t, b, c, d) {

                 return c * (t /= d) * t + b;

             },

             strongEaseIn: function(t, b, c, d) {

                 return c * (t /= d) * t * t * t + b;

             },

             strongEaseOut: function(t, b, c, d) {

                 return c * (( t = t / d - 1 ) * t * t * t * t + 1) + b;

             },

             sineaseIn: function(t, b, c, d) {

                 return c * (t /= d) * t * t + b;

             },

             sineaseOut: function(t, b, c, d) {

                 return c * (( t = t / d - 1) * t * t + 1) + b;

             }

         };

         // 定义动画类

         var Animate = function(dom) {

             this.dom = dom;

             this.startTime = 0;

             this.startPos = 0;

             this.endPos = 0;

             this.propertyName = null;

             this.easing = null;

             this.duration = null;

         }

         // 动画启动

         Animate.prototype.start = function(propertyName, endPos, duration, easing) {

             this.propertyName = propertyName;

             this.startTime = +new Date();

             this.startPos = this.dom.getBoundingClientRect()[propertyName];

             this.endPos = endPos;

             this.duration = duration;

             this.easing = tween[easing];

             var self = this;

             var timeId = setInterval(function() {

                 if (self.step() === false) {

                     clearInterval(timeId);

                 }

             }, 1000/60)

         }

         Animate.prototype.step = function() {

             var t = +new Date();

             if (t > this.startTime + this.duration) {

                 this.update(this.endPos);

                 return false;

             }

             var pos = this.easing(t - this.startTime,

                 this.startPos, this.endPos - this.startPos, this.duration);

             this.update(pos);

         }

         Animate.prototype.update = function( pos ) {

             this.dom.style[ this.propertyName ] = pos + 'px';

         }

         var ball = document.getElementById('ball');

         var pos = document.getElementById('pos');

         var moveBtn = document.getElementById('moveBtn');

         var cancelBtn = document.getElementById('cancelBtn');

         // 使用命令模式实现事件和dom的解耦

         var MoveCommand = function(receiver, pos) {

             this.receiver = receiver;

             this.pos = pos;

             this.oldPos = null;

         }

         MoveCommand.prototype.excute = function() {

             this.receiver.start('left', this.pos, 1000, 'strongEaseOut');

             this.oldPos = this.receiver.dom.getBoundingClientRect()[this.receiver.propertyName];

         }

         MoveCommand.prototype.undo = function() {

             this.receiver.start('left', this.oldPos, 1000, 'strongEaseOut');

         }

         var moveCommand;

         moveBtn.onclick = function() {

             var animate = new Animate( ball );

             moveCommand = new MoveCommand(animate, pos.value);

             moveCommand.excute();

         }

         cancelBtn.onclick = function() {

             console.log(moveCommand);

             moveCommand.undo();

         }

     </script>

 </body>

 </html>

JavaScript设计模式-----命令模式的简单应用的更多相关文章

  1. javascript设计模式——命令模式

    前面的话 假设有一个快餐店,而我是该餐厅的点餐服务员,那么我一天的工作应该是这样的:当某位客人点餐或者打来订餐电话后,我会把他的需求都写在清单上,然后交给厨房,客人不用关心是哪些厨师帮他炒菜.餐厅还可 ...

  2. 读书笔记之 - javascript 设计模式 - 命令模式

    本章研究的是一种封装方法调用的方式.命令模式与普通函数有所不同.它可以用来对方法调用进行参数化处理和传送,经过这样处理过的方法调用可以在任何需要的时候执行. 它也可以用来消除调用操作的对象和实现操作的 ...

  3. javascript设计模式-工厂模式（简单工厂）

    接口在工厂模式中起着很重要的作用,如果不对对象进行某种类型检查的以确保其实现了必要的方法,工厂模式的好处也就所剩无几了,举个简单的例子. Interface.js // Constructor. va ...

  4. 【设计模式】Java设计模式 - 命令模式

    Java设计模式 - 命令模式 生命不息,写作不止 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 一个有梦有戏的人 @怒放吧德德 分享学习心得,欢迎指正,大家一起学习成长! 目录 Ja ...

  5. 24种设计模式--命令模式【Command Pattern】

    今天讲命令模式,这个模式从名字上看就很简单,命令嘛,老大发命令,小兵执行就是了,确实是这个意思,但是更深化了,用模式来描述真实世界的命令情况.正在看这本书的你,我猜测分为两类:已经工作的和没有工作的, ...

  6. linkin大话设计模式--命令模式

    linkin大话设计模式--命令模式 首先考虑一种应用情况,某个方法需要完成某一个功能,这个功能的大部分功能已经确定了,但是有可能少量的步骤没法确定,必须等到执行这个方法才可以确定. 也就是说,我们写 ...

  7. javascript设计模式——组合模式

    前面的话 在程序设计中,有一些和“事物是由相似的子事物构成”类似的思想.组合模式就是用小的子对象来构建更大的对象,而这些小的子对象本身也许是由更小的“孙对象”构成的.本文将详细介绍组合模式 宏命令 宏 ...

  8. [Head First设计模式]餐馆中的设计模式——命令模式

    系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...

  9. JavaScript设计模式 - 迭代器模式

    迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺 ...

随机推荐

  1. let与var的区别，为什么什么要用let？

    1.var是全局声明,let是块级作用的,只适用于当前代码块 var a = 1: if(true){ let a; a=22: console.log(a);'//22 } if(){}内就是let ...

  2. Ubuntu18.04安装mysql及相关配置

    step 1: sudo apt-get update step 2: sudo apt-get install mysql-server step3: 查看mysql服务端是否开启 systemct ...

  3. Mave实战(1)——Maven介绍

    目录 1. Maven介绍 1.1. 何为Maven 1.1.1. Maven是优秀的构建工具 1.1.2. Maven不仅仅是构建工具 1. Maven介绍 1.1. 何为Maven Maven是一 ...

  4. jq写无缝轮播

    今天分享一下我自己早几天写的一个效果:无缝轮播,虽然不难,很简单,也没有封装处理过,但是还是希望能帮到一些前端的小伙伴吧,如果有小伙伴感觉有更简化的写法希望可以一起交流一下,技术在于交流嘛,我的邮箱是 ...

  5. html5手机浏览器启动微信客户端支付实例

    html5手机浏览器启动微信客户端支付实例,外部浏览器html5微信支付技术,如何在手机浏览器微信支付,在微信客户端外的移动端网页使用微信支付 首先在微信支付官网https://pay.weixin. ...

  6. HTML5常用标签及特殊字符表

    *http://html5doctor.com/nav*http://html5doctor.com/article*http://html5doctor.com/section*http://htm ...

  7. ARM开发---Keil注册+JLink维修详解

    在ARM开发中,经常使用的开发环境就是Keil uVision集成开发环境+JLink仿真器,本文就是就是介绍.总结使用该开发环境中遇到的问题,并在问题后方附上亲测可行的解决方法.如果各位看官在开发过 ...

  8. 话说文件系统——aufs源码分析（三）

    1. linux中设备驱动的入口都是:module_init(xxx_init);里面注册的函数,对于文件系统来说也是一样的,对于aufs来说,就是aufs_init,具体如下 //用于描述aufs文 ...

  9. 郁金香指标开源库的使用--（tulipindicators-0.8.4）

    瞎逛发现最新出了这么一个指标库,有100多种指标的函数库,文档写的比较好,重要的是作者一直在维护. 把它编成库,然后测试一下,可用于自动交易,策略交易等开发. 1.下载地址 https://githu ...

  10. Go 学习之路：Println 与 Printf 的区别

    Println 和Printf 都是fmt包中公共方法:在需要打印信息时常用的函数,那么二函数有什么区别呢? 附上代码 package main import ("time"&qu ...