《JavaScript设计模式与开发实践》读书笔记之命令模式
2015-07-16 23:16
861 查看
1.命令模式
1.1 传统的命令模式
命令模式的应用场景:请求的发送者和请求接收者消除彼此耦合关系以页面点击按钮为例
点击按钮后,借助命令对象,解开按钮和负责具体行为对象之间的耦合
<body> <button id='button1'>按钮1</button> <button id='button2'>按钮2</button> <button id='button3'>按钮3</button> </body> <script> var button1=document.getElementById('button1'); var button2=document.getElementById('button2'); var button3=document.getElementById('button3'); </script>
定义setCommand函数,绑定行为。
var setCommand=function(button,command){ button.onclick=function(){ command.execute(); } }
最后编写具体的行为,这些行为完成菜单栏的几项功能
var MenuBar={ refresh:function(){ console.log('refresh'); } }; var SubMenu={ add:function(){ console.log('add'); }, del:function(){ console.log('del'); } };
把行为封装在命令类中
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对象中,并且将command对象绑定到button上
var refreshMenuBarCommand=new RefreshMenuBarCommand(MenuBar); var addSubMenuCommand=new AddSubMenuCommand(SubMenu); var delSubMenuCommand=new DelSubMenuCommand(SubMenu); setCommand(button1,refreshMenuBarCommand); setCommand(button2,addSubMenuCommand); setCommand(button3,delSubMenuCommand);
1.2 JavaScript这的命令模式
var bindClick=function(button,func){
button.onclick=func;
};
var MenuBar={ refresh:function(){ console.log('refresh'); } }; var SubMenu={ add:function(){ console.log('add'); }, del:function(){ console.log('del'); } };
bindClick(button1,MenuBar.refresh);
bindClick(button2,SubMenu.add);
bindClick(button3,SubMenu.del);
相关文章推荐
- js颜色拾取器
- js中动态加载js并且判断加载完成执行回调函数
- toString 方法
- javascript的typeof操作的返回值类型
- [javascript]一种兼容性比较好的简单拖拽
- 深入理解JavaScript系列(36):设计模式之中介者模式
- 深入理解JavaScript系列(37):设计模式之享元模式
- JavaScript数组
- 深入理解JavaScript系列(41):设计模式之模板方法
- 深入理解JavaScript系列(46):代码复用模式(推荐篇)
- 深入理解JavaScript系列(42):设计模式之原型模式
- 《JavaScript设计模式与开发实践》读书笔记之观察者模式
- 深入理解JavaScript系列(47):对象创建模式(上篇)
- 用Javascript评估用户输入密码的强度(Knockout版)
- js阻止a链接
- JS的面向对象的基础
- JS实现点击跳转登陆邮箱
- 13个js图表插件
- javascript日历控件
- JS相关方法总计