命令模式是最简单和优雅的模式之一，命令模式中的命令（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. oracle自动冷备份脚本

    根据自己网上的资料和自己的需求,写的oracle冷备份脚本. 整体思路: 1.停止服务 2.文件拷贝 3.启动服务 保存以为文件为BAT格式,点击可以用下. rem ----------------- ...

  2. ios 开发UI篇— UIToolbar

    前言 NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UIToolbar : UIView <UIBarPositioning& ...

  3. 添加一个js扩展方法

    String.prototype.repeatify=String.prototype.repeatify || function(times){ var str=''; for(var i=0;i& ...

  4. ABAP术语-Update Task

    Update Task 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/20/1114184.html Part of an ABAP pro ...

  5. Ajax与Xml

    Ajax就是用javascript来实现的 主要是用来实现页面的局部刷新,比如当你在百度上回答别人的问题时候,没有登录,页面会弹出一个窗口,让你输入账号和密码,这就是利用ajax来做的,如果不是aja ...

  6. vue数组赋值

    在使用vue开发移动端项目过程中,统一数组在对多个变量赋值时:希望一个数组的改变不影响另外一个数组,此时可以使用如下方式实现: let arr = [] let a1 = JSON.parse(JSO ...

  7. tp5 的nginx配置

    下面简单说明一下tp5运行在nginx上的配置. 原文地址:小时刻个人博客>http://small.aiweimeng.top/index.php/archives/tp5_nginx.htm ...

  8. Oracle笔记之——常用的函数及脚本

    一.oracle 常用的函数及关键字 1.集合操作 1)minus 差集 2)intersect 交集 3)UNION 并集,会去重 4)UNION ALL 并集,不去重2.事物 1)COMMIT ( ...

  9. css中元素的分类

    按照显示元素分类: 行内元素(lnline-element):元素的高度,行高,顶底边距由元素所包含的图片或文字所决定,不可改变:其宽度为内容文字或图片的宽度所决定,而其左右边距可人为设置. 行内元素 ...

  10. JournalNode的作用

    NameNode之间共享数据(NFS .Quorum Journal Node(用得多)) 两个NameNode为了数据同步,会通过一组称作JournalNodes的独立进程进行相互通信.当activ ...