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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
BootStrap selectpicker
Jun 20 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
JS正则表达式验证中文字符
May 08 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
layui实现数据表格自定义数据项
Oct 26 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
PHP 身份证号验证函数
2009/05/07 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
php上传文件常见问题总结
2015/02/03 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
vue实现简单的MVVM框架
2018/08/05 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
决策树的python实现方法
2014/11/18 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
python GUI实例学习
2017/11/21 Python
python并发编程之线程实例解析
2017/12/27 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
秦兵马俑导游词
2015/02/02 职场文书
药店营业员岗位职责
2015/04/14 职场文书
单位实习介绍信
2015/05/05 职场文书