命令模式是最简单和优雅的模式之一，命令模式中的命令（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. docker 安装 MySQL 8.0

    1.查找镜像 查找Docker Hub上的mysql镜像 X230:~$ docker search mysql NAME DESCRIPTION STARS OFFICIAL AUTOMATED m ...

  2. python使用tablib库生成xls表格

    参考文档:http://python-tablib.org Tablib是一个MIT许可的格式不可知的表格数据集库.它允许您导入,导出和操作表格数据集.高级功能包括隔离,动态列,标签和过滤,以及无缝格 ...

  3. docker-maven-plugin 完全免Dockerfile 文件

    # DockerSpringBootPlugin docker-maven-plugin 完全免Dockerfile 文件 使用docker-maven-plugin 进行完全免 Dockerfile ...

  4. Python中级 —— 07标准库

    标准库学习 1. The Python Standard Library[https://docs.python.org/3.5/library/] ( 3.5.5 Documentation ) 1 ...

  5. STM32F4 SPI双机通讯调试总结

    1.如果查询方式进行数据收发,不管是Master,还是Slave,流程如下:(假设收发n+1个字节) a.等待TXE,写入一个字节 b.等待TXE,写入一个字节 c.等待RXNE,读取一个字节 循环b ...

  6. 大数据学习之Hadoop运行模式

    一.Hadoop运行模式 (1)本地模式(默认模式): 不需要启用单独进程,直接可以运行,测试和开发时使用. (2)伪分布式模式: 等同于完全分布式,只有一个节点. (3)完全分布式模式: 多个节点一 ...

  7. EDID的简介和解析

    去年对EDID做了一个解析,下面是学习EDID过程中整理的资料. 一.EDID简介 EDID: Extended Display Identification Data (外部显示设备标识数据)--- ...

  8. 读书笔记《PHP高级程序设计、模式、框架与测试》

    序言 闲来无事,下载了一些电子书,然后看书名不错<PHP高级程序设计_模式.框架与测试>,翻了一下虽然书有点老了但是讲的内容经常会碰到!给大家推荐一下,然后这里放上我的读书笔记,每日更新. ...

  9. 学习Emmet

    学习Emmet 在进行Web开发时,就免不了需要编写html文件,如何快速(偷懒^-^)的进行编写html,是个大问题,上网找了一下,发现了一个好东西 ,视频教程可以看下小马技术Emmet爆速开发, ...

  10. 流程控制（if、while、for）

    流程控制 一.if判断 # 1.语法一if 条件:#条件成立时执行的子代码块` 代码1 代码2 代码3# 示例:sex='female'age=18is_beautiful=Trueif sex == ...