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中的cacheStorage使用详解
Jul 29 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
js编写三级联动简单案例
Dec 21 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
RequireJs的使用详解
Feb 19 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
详解vue 图片上传功能
Apr 30 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 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+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
python自定义异常实例详解
2017/07/11 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
用pycharm开发django项目示例代码
2018/10/24 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
python 解决函数返回return的问题
2020/12/05 Python
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
会计毕业生自荐信
2013/11/21 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
师德师风学习材料
2014/12/19 职场文书
公司财务部岗位职责
2015/04/14 职场文书
交通安全教育主题班会
2015/08/12 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python