JS命令模式例子之菜单程序


Posted in Javascript onOctober 10, 2016

命令模式的应用场景:

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

html代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>js:命令模式</title>
 <script type="text/javascript" src="command.js"></script>
</head>
<style type="text/css">
button{
 margin: 5px;
 border: 0;
 width: 70px;
 height: 35px;
 background: #6B78BF;
 color: white;
 font-size: 14px;
 font-family: "微软雅黑";
 cursor: pointer;
}
#textarea{
 margin: 5px;
 width: 400px;
 height: 200px;
 resize: none;
 color: #666;
 font-size: 14px;
 border: 2px solid #6B78BF;
}
</style>
<body>
<button id="button1">刷新</button>
<button id="button2">新增</button>
<button id="button3">删除</button>
<br/>
<textarea id="textarea">
这是预设的内容
</textarea>

</body>
</html>

js代码:

// 在页面中使用例:setCommand( button1, refreshMenuBarCommand );来发送命令


// setCommand 函数负责往按钮上面安装命令,预留好安装命令的接口
var setCommand = function( button , command ){
 button.onclick = function(){
 command.execute();
 }
}

// 编写点击按钮之后的具体行为:刷新菜单界面、增加子菜单和删除子菜单
var MenuBar = {
 refresh: function(){
 var cur_date = new Date();
 document.getElementById("textarea").value+=cur_date.toLocaleString()+" 刷新菜单目录\r";
 }
}
var SubMenu = {
 add: function(){
 var cur_date = new Date();
 document.getElementById("textarea").value+=cur_date.toLocaleString()+" 新增菜单目录\r";
 },
 del: function(){
 var cur_date = new Date();
 document.getElementById("textarea").value+=cur_date.toLocaleString()+" 删除子菜单\r";
 }
}

//封装行为在命令类中
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 对象
var refreshMenuBarCommand = new RefreshMenuBarCommand( MenuBar );
var addSubMenuCommand = new AddSubMenuCommand( SubMenu );
var delSubMenuCommand = new DelSubMenuCommand( SubMenu );

window.onload = function(){
 //把 command 对象安装到 button 上面
 var button1 = document.getElementById("button1");
 var button2 = document.getElementById("button2");
 var button3 = document.getElementById("button3");
 setCommand( button1, refreshMenuBarCommand );
 setCommand( button2, addSubMenuCommand );
 setCommand( button3, delSubMenuCommand );
}

总结:

从书上抄代码练习的过程中出了很多错误,最严重的莫过于“receiver”这个单词写错了导致很多天都再没看这个练习,出错的过程让我能够重新审视代码的内容,逐行进行理解与调试。虽然仍然不很理解命令模式,但是通过这部分的内容和对mySQL的学习,心里隐隐的留下了关于命令模式的影子。

参考:

《JavaScript设计模式与开发实践》第9章9.2节

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 #Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 #Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 #Javascript
You might like
newxtree.js代码
2007/03/13 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python多线程下载文件的方法
2015/07/10 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
Python中的self用法详解
2019/08/06 Python
Python实现Restful API的例子
2019/08/31 Python
Python笔记之facade模式
2019/11/20 Python
详解Python的三种拷贝方式
2020/02/11 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
老教师工作总结的自我评价
2013/09/27 职场文书
大二自我鉴定范文
2013/10/05 职场文书
优秀中专生推荐信
2013/11/17 职场文书
年度考核自我评价
2014/01/25 职场文书
2014年情人节活动方案
2014/02/16 职场文书
施工安全标语
2014/06/07 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
介绍一下28个JS常用数组方法
2022/05/06 Javascript