命令模式是最简单和优雅的模式之一，命令模式中的命令（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. 温故vue对vue计算属性computed的分析

    vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...

  2. Vector/Push_back

    https://bbs.csdn.net/topics/370225285 https://blog.csdn.net/u013630349/article/details/46853297 http ...

  3. webpack使用打包的一些心得

    webpack打包工具: module.exports:输出require:引入 require('!style-loader!css-loader!./***.css'):静态样式引入 npm in ...

  4. 关于JQuery的异步注册

    在采用JQuery进行表单异步提交时,前台传入的是json数据格式,后台controller用map接收,再传回前台进行结果判断时,if-else接收结果()里面,尽量不要出现“=”,不然判断语句失效 ...

  5. ElasticSearch优化系列一：集群节点规划

    节点职责单一,各司其职 elasticSearch的配置文件中有2个参数:node.master和node.data.这两个参 数搭配使用时,能够帮助提供服务器性能. 数据节点node.master: ...

  6. [转]windows下多个python版本共存,pip使用

    windows下多个python版本共存,pip使用 2017年09月13日 17:21:30 阅读数:2574 一.同时装了Python3和Python2,怎么区分 了解python的人都知道pyt ...

  7. nginx 开启phpinfo

    在nginx配置文件中加 location / { //如果是资源文件,则不走phpinfo模式 if (!-e $request_filename){ ewrite ^/(.*)$ /index.p ...

  8. elasticsearch_dsl 的nested

    在工作中会碰到这样的一个需求,mapping中定义的类型是nested { "judgement":{ "mappings":{ "content&q ...

  9. 关于C/C++语言的部分BUG

    目录 scanf格式匹配引发的错误 局部变量被释放引发的bug 数组写入超出索引维度 指针的指针引发的思考 未定义赋值的变量引发的bug 题外话 scanf格式匹配引发的错误   运行如下程序时,出现 ...

  10. 20155210 2016-2017-2《Java程序设计》课程总结

    20155210 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 预备作业1:你期望的师生关系 预备作业2:做中学 预备作业3:虚拟机安装 第一周作业:教材 ...