命令模式是最简单和优雅的模式之一，命令模式中的命令（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. PHP操作redis之String(字符串)、List(列表)（一）

    Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key – value 缓存产品有以下三个特点: Redis支持数据的持久 ...

  2. Shell学习积累//持续更新

    1.until的使用 直到判断条件满足,否则会一直执行,与while使用相反 until [ $command -eq 200 ] do command=`curl -o /dev/null -s - ...

  3. python多进程详解和协程

    1.由于python多线程适合于多IO操作,但不适合于cpu计算型工作,这时候可以通过多进程实现.python多进程简单实用 # 多进程,可以cpu保持一致,python多线程适合多io.对于高cpu ...

  4. express函数参数之next

      关于next主要从三点来进行说明:   next的作用是什么? 我们应该在何时使用next? next的内部实现机制是什么?     1.Next的作用 我们在定义express中间件函数的时候都 ...

  5. shiro实战整合

    引入依赖(包括缓存等): <!-- SECURITY begin --> <dependency> <groupId>org.apache.shiro</gr ...

  6. 20155226 mini DC 课堂测试补交

    由于电脑突然出了点问题,我没有完成mini DC这个测试,现将测试内容及结果补交 题目如下 提交测试截图和码云练习项目链接,实现Linux下dc的功能,计算后缀表达式的值 代码如下 MyDC.clas ...

  7. 20155229实验二 《Java面向对象程序设计》实验报告

    20155229实验二 <Java面向对象程序设计>实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 ...

  8. 在Linux中安装JDK和IDEA

    前言 寒假安装虚拟机的时候我就没有安装好,到学校之后,因为时间紧加上更习惯Windows的操作习惯,我只在Windows上安装了JDK和IDEA,但是随着学习的深入,我发现用虚拟机写命令行.新建jav ...

  9. ptyhon基础篇 day1

    1.变量 print('helloworld!') name = 'alex' name2 = 'jack' print(name,name2) 2.input #用户输入 username = in ...

  10. 关于ExecuteNonQuery执行的返回值(SQL语句、存储过程)

    因为msdn中说返回受影响的行数: Executes a Transact-SQL statement against the connection and returns the number of ...