1.命令模式

1.1 传统的命令模式

命令模式的应用场景:请求的发送者和请求接收者消除彼此耦合关系

以页面点击按钮为例

点击按钮后,借助命令对象,解开按钮和负责具体行为对象之间的耦合

<body>
<button id='button1'>按钮1</button>
<button id='button2'>按钮2</button>
<button id='button3'>按钮3</button>
</body> <script>
var button1=document.getElementById('button1');
var button2=document.getElementById('button2');
var button3=document.getElementById('button3');
</script>

定义setCommand函数,绑定行为。

var setCommand=function(button,command){
button.onclick=function(){
command.execute();
}
}

最后编写具体的行为,这些行为完成菜单栏的几项功能

var MenuBar={
refresh:function(){
console.log('refresh');
}
}; var SubMenu={
add:function(){
console.log('add');
},
del:function(){
console.log('del');
}
};

把行为封装在命令类中

var RefreshMenuBarCommand=function(receiver){
this.receiver=receiver;
};
RefreshMenuBarCommand.prototype.execute=function(){
this.receiver.refresh();
}; var AddSubMenuCommand=function(receiver){
this.receiver=receiver;
};
AddSubMenuCommand.prototype.execute=function(){
this.receiver.add();
}; var DelSubMenuCommand=function(receiver){
this.receiver=receiver;
};
DelSubMenuCommand.prototype.execute=function{
this.receiver.del();
}

最后将命令接收者传入到command对象中,并且将command对象绑定到button上

var refreshMenuBarCommand=new RefreshMenuBarCommand(MenuBar);
var addSubMenuCommand=new AddSubMenuCommand(SubMenu);
var delSubMenuCommand=new DelSubMenuCommand(SubMenu);
setCommand(button1,refreshMenuBarCommand);
setCommand(button2,addSubMenuCommand);
setCommand(button3,delSubMenuCommand);

1.2 JavaScript这的命令模式

var bindClick=function(button,func){
button.onclick=func;
};
var MenuBar={
refresh:function(){
console.log('refresh');
}
}; var SubMenu={
add:function(){
console.log('add');
},
del:function(){
console.log('del');
}
};
bindClick(button1,MenuBar.refresh);
bindClick(button2,SubMenu.add);
bindClick(button3,SubMenu.del);

《JavaScript设计模式与开发实践》读书笔记之命令模式的更多相关文章

  1. JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)

    说来惭愧,4个多月未更新了.4月份以后就开始忙起来了,论文.毕设.毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写.这段时间在看<Java ...

  2. JavaScript设计模式与开发实践——读书笔记1.高阶函数(下)

    上部分主要介绍高阶函数的常见形式,本部分将着重介绍高阶函数的高级应用. 1.currying currying指的是函数柯里化,又称部分求值.一个currying的函数会先接受一些参数,但不立即求值, ...

  3. Javascript设计模式与开发实践读书笔记(1-3章)

    第一章 面向对象的Javascript 1.1 多态在面向对象设计中的应用   多态最根本好处在于,你不必询问对象“你是什么类型”而后根据得到的答案调用对象的某个行为--你只管调用行为就好,剩下的一切 ...

  4. javascript设计模式与开发实践阅读笔记(9)——命令模式

    命令模式:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么,此时希望用一种松耦合的方式来设计软件,使得请求发送者和请求接收者能够消除彼此之间的耦合关系. 说法很复 ...

  5. javascript设计模式与开发实践阅读笔记(8)——观察者模式

    发布-订阅模式,也叫观察者模式:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript开发中,我们一般用事件模型来替代传统的观察者模式. ...

  6. javascript设计模式与开发实践阅读笔记(7)——迭代器模式

    迭代器模式:指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺 ...

  7. javascript设计模式与开发实践阅读笔记(6)——代理模式

    代理模式:是为一个对象提供一个代用品或占位符,以便控制对它的访问. 代理模式的关键是,当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,客户实际上访问的是替身对 ...

  8. javascript设计模式与开发实践阅读笔记(4)——单例模式

    定义 单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 具体来说,就是保证有些对象有且只有一个,比如线程池.全局缓存.浏览器中的window 对象等.在js中单例模式用途很广,比如登录 ...

  9. 《JavaScript设计模式与开发实践》笔记第八章 发布-订阅模式

    第八章 发布-订阅模式 发布-订阅模式描述 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布-订阅模式可以广泛应用于 ...

  10. 《JavaScript设计模式与开发实践》笔记第一章

    第一章 面向对象的JavaScript 动态类型语言和鸭子类型 编程语言按照数据类型大体可以分为两类:静态类型语言.动态类型语言. 静态类型语言:在编译时便已确定变量的类型. 优点: 在编译时就能发现 ...

随机推荐

  1. Http请求工具实例编写(超长,比较清楚)

    HTTP协议工作方式首先客户端发送一个请求(request)给服务器,服务器在接收到这个请求后将生成一个响应(response)返回给客户端.在这个通信的过程中HTTP协议在以下4个方面做了规定:1. ...

  2. [置顶] strcpy和memcpy的区别

    strcpy和memcpy都是标准C库函数,它们有下面的特点. strcpy提供了字符串的复制.即strcpy只用于字符串复制,并且它不仅复制字符串内容,还会复制字符串的结束符. 已知strcpy函数 ...

  3. hdoj 2066 一个人的旅行 【多源多汇最短路】

    题目:hdoj 2066 一个人的旅行 方法:缩点 + 最短路 分析:看了大神的一篇博客,讲冗余压缩的,然后就想找一个多源最短路练练手. 这个题目就是典型的多源多汇最短路 方法:把全部的源点压缩成一个 ...

  4. 与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成

    原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页][源码下载] 与众不同 win ...

  5. Git 使用规范流程(转)

    团队开发中,遵循一个合理.清晰的Git使用流程,是非常重要的. 否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护. 下面是ThoughtBot 的Git使用规范流程.我从中 ...

  6. 【虚拟化实战】容灾设计之三Stretched Cluster

    作者:范军 (Frank Fan) 新浪微博:@frankfan7 Stretched Cluster是一把双刃剑,会用的如行云流水,用不好反而受其限制. 传统的vSphere Cluster是指一个 ...

  7. AJAX入门---DOM操作HTML

    AJAX入门---DOM操作HTML 一边学习AJAX一边坐着总结加深印象.上次写的是怎样简单的使用XMLHttpRequest对象.今天写的是DOM(文档对象模型(Document Object M ...

  8. 调用一个系统命令,并读取它的输出值(使用QProcess.readAll)

    下面我们再看一个更复杂的例子,调用一个系统命令,这里我使用的是 Windows,因此需要调用 dir:如果你是在 Linux 进行编译,就需要改成 ls 了. mainwindow.h #ifndef ...

  9. 为VisualSVN Server增加在线修改用户密码的功能

    原文:为VisualSVN Server增加在线修改用户密码的功能 附件下载:点击下载 VisualSVN Server是一个非常不错的SVN Server程序,方便,直观,用户管理也异常方便. 不过 ...

  10. cannot load supported formats intellij 解决的方法

    http://stackoverflow.com/questions/20797443/intellij-idea-subversion-checkout-error http://stackover ...