js中的命令模式


命令模式是最簡單的模式之一,命令模式中的命令command指的是一個執行某些特定事情的指令。命令模式最常見的應用場景是:有時候需要向某些對象發送請求,但是並不知道請求的接受者是誰,此時希望用一種松耦合的方式來設計程序,使得請求發送者和請求接收者能夠消除彼此之間的耦合關系。

菜單程序

假設這樣一種場景,用戶界面上有數十個button按鈕,因為項目復雜,我們讓A負責按鈕的UI,B負責點擊按鈕后的具體行為,這些行為都將被封裝在對象內。

   <body>
<button id="button1">1</button>
<button id="button2">2</button>
<button id="button3">3</button>
</body>
<script>
var btn1 = document.getElementById('button1');
var btn2 = document.getElementById('button2');
var btn3 = document.getElementById('button3');
</script>

我們在這里可以找到使用命令模式的理由,點擊了按鈕之后,必須向某些負責具體行為的對象發送請求,但是對A來說,目前不知道接收者是什么對象,也不知道接收者究竟會做什么。設計模式的主題總是把不變的和變化的事物分離開來,以便揭開按鈕和具體負責行為對象之間的耦合。

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

最后負責編寫點擊按鈕具體行為的提交了代碼,他完成了刷新菜單界面,增加子菜單和刪除子菜單這幾個功能。

   //命令的接收對象,接收到命令之后,可以執行相應行為
var MenuBar = {
refresh: function(){
console.log('刷新菜單目錄');
}
}
var SubMenu = {
add: function(){
console.log('增加子菜單');
},
del: function(){
console.log('刪除子菜單');
}
}

在讓button變得有用起來之前,我們要先把這些行為都封裝在命令類中

   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(btn1, refreshMenuBarCommand);
setCommand(btn2, addSubMenuCommand);
setCommand(btn3, delSubMenuCommand);

js中的命令模式

也許我們會感到很奇怪,所謂的命令模式,看起來就是給對象的某個方法取了execute的名字,引入command對象和receiver對象把簡單的事情復雜化了。命令模式的由來,其實是回調函數的一個面向對象的替代品。
在js中,函數作為一等對象,本身就可以被當作參數傳遞

   var setCommand = function(button, func){
button.onclick = function(){
func();
}
}
var MenuBar = {
refresh: function(){
console.log('刷新菜單界面');
}
}
var RefreshMenuBarCommand = function(receiver){
return function(){
receiver.fresh();
}
}
var refreshMenuBarCommand = new RefreshMenuBarCommand(MenuBar);
setCommand(btn1, refreshMenuBarCommand);

當然,除了執行命令之外,將來還可能提供撤銷命令等操作,那我們最好把執行函數改為調用execute方法

   var RefreshMenuBarCommand = function(receiver){
return {
execute: function(){
receiver.fresh();
}
}
}
var setCommand = function(button, command){
button.onclick = function(){
command.execute();
}
}

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com