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 相关文章推荐
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
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
APMServ使用说明
2006/10/23 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
JavaScript延迟加载
2021/03/09 Javascript
css配合jquery美化 select
2013/11/29 Javascript
JS与C#编码解码
2013/12/03 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
python调用shell的方法
2013/11/20 Python
python基础教程之Filter使用方法
2017/01/17 Python
Python numpy 常用函数总结
2017/12/07 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
劳资人员岗位职责
2013/12/19 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
升职自荐信范文
2015/03/27 职场文书
三国演义读书笔记
2015/06/25 职场文书
简爱读书笔记
2015/06/26 职场文书
体育教师教学随笔
2015/08/15 职场文书
教师师德承诺书2016
2016/03/25 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS