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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
让IE6支持min-width和max-width的方法
Jun 25 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
Javascript进制转换实例分析
May 14 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
JS工厂模式开发实践案例分析
Oct 17 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 编程请选择正确的文本编辑软件
2006/12/21 PHP
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
Python函数返回值实例分析
2015/06/08 Python
实例讲解python中的序列化知识点
2018/10/08 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
印度在线杂货店:bigbasket
2018/08/23 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
代收款委托书范本
2014/10/01 职场文书
英语感谢信范文
2015/01/20 职场文书
华清池导游词
2015/02/02 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
海底两万里读书笔记
2015/06/26 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
Python sklearn分类决策树方法详解
2022/09/23 Python