js设计模式--行为型--状态模式

 1 /**
 2  * 场景：假如要做个四种咖啡机的机器。
 3  * - 美式咖啡态（american)：只吐黑咖啡
 4  * - 普通拿铁态(latte)：    黑咖啡加点奶
 5  * - 香草拿铁态（vanillaLatte）：黑咖啡加点奶再加香草糖浆
 6  * - 摩卡咖啡态(mocha)：黑咖啡加点奶再加点巧克力
 7  */
 8 class CoffeeMaker {
 9   constructor() {
10     // 这里省略咖啡机中和咖啡机状态无关的初始逻辑
11     this.state = "init"; // 初始化状态，没有任何咖啡模式
12     this.leftMilk = "1000ml"; // 牛奶存储量
13   }
14   stateToProcessor = {
15     that: this,
16     american() {
17       // 在行为函数中拿到咖啡机实例信息并且打印
18       console.log("牛奶存储量：", this.that.leftMilk);
19       console.log("只吐黑咖啡");
20     },
21     latte() {
22       this.american();
23       console.log("加点奶");
24     },
25     vanillaLatte() {
26       this.latte();
27       console.log("加香草糖浆");
28     },
29     mocha() {
30       this.latte();
31       console.log("点巧克力");
32     },
33   };
34   // 关注咖啡机状态切换函数
35   changeState() {
36     this.state = status;
37     if (!this.stateToProcessor[state]) {
38       return;
39     }
40     this.stateToProcessor[state]();
41   }
42 }
43 const mk = new CoffeeMaker();
44 mk.changeState(‘latte‘)
45 // 牛奶存储量：: 1000ml
46 // 只吐黑咖啡
47 // 加点奶