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类
Sep 08 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
Vuex实现购物车小功能
Aug 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
解析zend Framework如何自动加载类
2013/06/28 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
让焦点自动跳转
2006/07/01 Javascript
js程序中美元符号$是什么
2008/06/05 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
详解Python字典小结
2018/10/20 Python
python进程和线程用法知识点总结
2019/05/28 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
经典的班主任推荐信
2013/10/28 职场文书
劳动之星获奖感言
2014/02/01 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
大学学习计划书范文
2014/05/02 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
个人欠款担保书
2014/05/20 职场文书
关爱老人标语
2014/06/21 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
工作保证书
2015/01/17 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
学术会议领导致辞
2015/07/29 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
车辆挂靠协议书
2016/03/23 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript