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 相关文章推荐
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
用原生js做单页应用
Jan 17 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 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
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
解决Python传递中文参数的问题
2015/08/04 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
django 发送手机验证码的示例代码
2018/04/25 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
python判断元素是否存在的实例方法
2020/09/24 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
简约控的天堂:The Undone
2016/12/21 全球购物
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
物理专业本科生自荐信
2014/01/30 职场文书
社区母亲节活动方案
2014/03/05 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
银行先进个人总结
2015/02/15 职场文书
自主招生自荐信范文
2015/03/04 职场文书
Python实现排序方法常见的四种
2021/07/15 Python