设计模式(十三)-命令模式

作者: 仔崽06 | 来源:发表于2021-02-22 11:23 被阅读0次

设计模式(十三)-命令模式
设计模式-命令模式
命令模式(Command)
文章收集
设计模式详解——命令模式
JavaScript设计模式七（命令模式）
设计模式之命令模式
12、Android设计模式---（让程序畅通执行）命令模式
你确定你真的会使用命令模式吗？来看看的大佬是怎么用的吧，真的很细
iOS面试之设计模式模块

命令模式

命令模式是一种数据驱动的设计模式,它属于行为模式,请求以命令的形式包裹在对象中,并传给调用对象,调用对象寻找处理该命令合适的对象，并把该命令传给相应的对象,该对象执行命令.

三种角色

Receiver接受者角色:该角色就是干活角色，命令传递到这里是应该被执行的.
Command命令角色:需要执行的所有命令都在这里声明.
Invoker调用者角色:接收到命令，并执行命令.

图例

image.png
代码示例

class Cooker{
    cook(){
        return console.log('烹饪')
    }
}

class Cleaner{
    clean(){
        return console.log('清洁')
    }
}

class CookCommand{
    constructor(receiver){
        this.receiver=receiver
    }
    execute(){
        this.receiver.cook()
    }
}

class CleanCommand{
    constructor(receiver){
        this.receiver=receiver
    }
    execute(){
        this.receiver.clean()
    }
}
class Customer{
    constructor(command){
        this.command=command
    }
    clean(){
        this.command.execute()
    }
    cook(){
        this.command.execute()
    }
}

let cooker=new Cooker()
let cleaner=new Cleaner()
let cookCommand=new CookCommand(cooker)
let customer=new Customer(cookCommand);
customer.cook() //烹饪

应用场景
1.计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="number">0</p>
    <button id="addBtn">+</button>
    <button id="revocation">撤回</button>
    <script>
        let number=document.getElementById('number')
        let worker={
            oldVal:0,
            add(){
                let oldVal=isNaN(number.innerHTML) ? 0:parseInt(number.innerHTML)
                worker.oldVal=oldVal
                number.innerHTML=oldVal+1
            },
            revocation(){
                number.innerHTML=worker.oldVal
            }
        }
        class AddCommand{
            constructor(receiver){
                this.receiver=receiver
            }
            execute(){
                this.receiver.add()
            }
        }
        class RevocationCommand{
            constructor(receiver){
                this.receiver=receiver
            }
            execute(){
                this.receiver.revocation()
            }
        }
        let addCommand=new AddCommand(worker)
        let revocationCommand=new RevocationCommand(worker)
        document.getElementById('addBtn').addEventListener('click',()=>addCommand.execute())
        document.getElementById('revocation').addEventListener('click',()=>revocationCommand.execute())
    </script>
</body>
</html>