code设计模式-命令模式

1.描述：用于向某些对象发送请求但并不知道接受请求的对象以及被请求的操作是什么的场景中。

2.实例，场景：界面上3个按钮点击后要执行不同的操作

• 传统面向对象语言实现命令模式的方法

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');

//声明添加命令的方法
var setCommand = function(btn,command){
	btn.onclick = function(){
		command.execute();
	};
};

//命令具体行为的实现
var MenuBar = {
	refresh:function(){
		console.log('刷新菜单目录');
	}
};

var SubMenu = {
	add:function(){
		console.log('增加子菜单');
	},
	del:function(){
		console.log('删除子菜单');
	}
};

//将行为封装到命令类中
var RefreshMenuBarCommand = function(receiver){
	this.receiver = receiver;
};

RefreshMenuBarCommand.prototype.excute = function(){
	this.receiver.refresh();
}

var AddSubMenuCommand = function(receiver){
	this.receiver = receiver;
};

AddSubMenuCommand.prototype.excute = function(){
	this.receiver.add();
}

var DelSubMenuCommand = function(receiver){
	this.receiver = receiver;
};

DelSubMenuCommand.prototype.excute = function(){
	this.receiver.del();
}

//创建命令对象
var refreshMenuBarCommand = new RefreshMenuBarCommand(MenuBar);
var addSubMenuCommand = new AddSubMenuCommand(SubMenu);
var delSubMenuCommand = new DelSubMenuCommand(SubMenu);

//最后,为按钮设置执行命令
setCommand(btn1,refreshMenuBarCommand);
setCommand(btn2,addSubMenuCommand);
setCommand(btn3,delSubMenuCommand);

• js闭包实现

var setCommand = function(btn,command){
	btn.onclick = function(){
		command.execute();
	};
};

var MenuBar = {
	refresh:function(){
		console.log('刷新菜单目录');
	}
};

var RefreshMenuBarCommand = function(receiver){
	return {
		excute:function(){
			receiver.refresh();
		}
	};
};

var refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar);
setCommand(btn1,refreshMenuBarCommand);