JS命令模式个人理解

//BODY部分
<body>

    <button id="execute">打开电视</button>

    <button id="undo">关闭电视</button>

</body>
//JavaScript部分
<script>

    var Tv={//面向字面量

        open:function(){

            console.log('打开电视机');

        },

        close:function(){

            console.log('关闭电视');

        }

    }

    var OpenTvCommand=function(receiver){//一个函数，new之后才可以访问receiver

        this.receiver=receiver;

    }

    OpenTvCommand.prototype.execute=function(){//OpenTvCommand中添加一个execute方法

        this.receiver.open();

        //this.receiver.close();

    }

    OpenTvCommand.prototype.undo=function(){//OpenTvCommand中添加一个undo方法

        this.receiver.close();

    }

    var setCommand=function(command){//执行命令函数

        document.getElementById('execute').onclick=function(){

            command.execute();

            //console.log(command);

            //console.log(OpenTvCommand.execute());

        }

        document.getElementById('undo').onclick=function(){

            command.undo();

        }

    }

    setCommand(new OpenTvCommand(Tv));

    //console.log(new OpenTvCommand(Tv));

</script>

分析：

第一步：new OpenTvCommand(Tv) 实例化一个OpenTvCommand(Tv)函数，
　　      得到一个OpenTvCommand(receiver:Object)对象，
           Object中包含两个对象open()和close()方法

第二步：setCommand(new OpenTvCommand(Tv)) 中的new OpenTvCommand(Tv)可以把它看做open()和close()两个方法传过去，
           传递给setCommand()对象，command.execute()再回到 OpenTvCommand.prototype（execute，undo包含这两个方法）的方法中自由匹配自身函数与TV对象中的方法，
           然后再执行OpenTvCommand.prototype自身有的方法

PS:如何要想在execute或者undo中添加方法，只需添加一个Tv中的方法即可，这就是我理解的命令模式

JS命令模式个人理解的更多相关文章

  1. js命令模式

    命令模式(Command),将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤销的操作. 从命令模式的结构图可以看出,它涉及到五个角色,它们分别是 ...

  2. js 命令模式 组合模式

    * 基本宏命令 var closeDoorCommand = { execute: function() { console.log("Closing the door..."); ...

  3. iOS设计模式之命令模式

    命令模式 基本理解 命令模式(Command),将一个请求封装为一个对象,从而使你可用不同的请求对客户端进行参数化:对请求队列或记录请求日志,以及支持客可撤离的操作. 苹果的Target-Action ...

  4. C++设计模式——命令模式

    什么是命令模式? 在GOF的<设计模式:可复用面向对象软件的基础>一书中对命令模式是这样说的:将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以 ...

  5. 【设计模式】行为型06命令模式（Command Pattern）

    命令模式 个人理解:命令模式,本质上是一种多层次的封装. 好处:降低耦合,扩展极其方便. 以下一段文案摘抄自:http://www.runoob.com/design-pattern/command- ...

  6. 大熊君说说JS与设计模式之------命令模式Command

    一,总体概要 1,笔者浅谈 日常生活中,我们在看电视的时候,通过遥控器选择我们喜欢的频道时,此时我们就是客户端的角色,遥控器的按钮相当于客户请求,而具体执行的对象就是命令对象, 命令模式把一个请求或者 ...

  7. js设计模式（11）---命令模式

    0.前言 早上好,早晨的时光总是美好的,坐在空调屋里,看着外边的蓝天白云,不停地敲击着键盘,多么美好地享受,也许屌丝就是如此容易满足. 1.什么是命令模式? 用于将一个请求封装为一个对象,从而可用不同 ...

  8. JS 设计模式五 -- 命令模式

    概念 命令模式中的命令(command) 指的是 一个执行某些待定事情的指令. 用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦合关系. 例子 假设html结构如下: &l ...

  9. 深入理解JavaScript系列（34）：设计模式之命令模式

    介绍 命令模式(Command)的定义是:用于将一个请求封装成一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或者记录请求日志,以及执行可撤销的操作.也就是说改模式旨在将函数的调用.请求和 ...

随机推荐

  1. MongoDB入门学习（1）

    什么是MongoDB ? MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为WEB应用提供 ...

  2. Spring Boot - 配置信息后处理

    最近在做项目的过程中,PSS提出配置文件中类似数据库连接需要的用户名.密码等敏感信息需要加密处理(之前一直是明文的). 为了快速完成任务,网上搜刮到jasypt包,也有相应的starter,使用方法可 ...

  3. 并行归并排序——MPI

    并行归并排序在程序开始时,会将n/comm_comm个键值分配给每个进程,程序结束时,所有的键值会按顺序存储在进程0中.为了做到这点,它使用了树形结构通信模式.当进程接收到另一个进程的键值时,它将该键 ...

  4. Java学习篇之---json-lib(Maven)

    json-lib(Maven) java中用于解释json的主流工具有org.json.json-lib与gson.本篇文章介绍json-lib. 项目中要用到json-lib.在pom.xml文件里 ...

  5. C语言基础知识【简介】

    C 简介1.关于 CC 语言是为了编写 UNIX 操作系统而被发明的.C 语言是以 B 语言为基础的,B 语言大概是在 1970 年被引进的.C 语言标准是于 1988 年由美国国家标准协会(ANSI ...

  6. Composer的Autoload源码实现1——启动与初始化

    前言 上一篇文章,我们讨论了 PHP 的自动加载原理.PHP 的命名空间.PHP 的 PSR0 与 PSR4 标准,有了这些知识,其实我们就可以按照 PSR4 标准写出可以自动加载的程序了.然而我们为 ...

  7. POJ3468_A Simple Problem with Integers(线段树/成段更新)

    解题报告 题意: 略 思路: 线段树成段更新,区间求和. #include <iostream> #include <cstring> #include <cstdio& ...

  8. 【BZOJ4375】Selling Tickets 随机化

    [BZOJ4375]Selling Tickets Description 厨师在一次晚宴上准备了n道丰盛的菜肴,来自世界各地的m位顾客想要购买宴会的门票.每一位顾客都有两道特别喜爱的菜,而只要吃到了 ...

  9. vue-cli (vue脚手架)

    vue-cli(脚手架):它可以自动生成目录 1.在网速不佳的情况下可以安装cnpm(淘宝镜像)如果网速快可以不用安装cnpm直接进行下一步操作 第一步:在命令行执行(全局安装cnpm) npm in ...

  10. python高级语法进阶

    python中几个比较难懂概念进阶. 迭代器 实现了迭代器协议的容器对象,基于如下两个方法: __next__:返回容器的下一个元素 __iter__:返回迭代器本身 由此可见,如果要自定义一个迭代器 ...