JavaScript 23 种设计模式之 22 备忘录模式

左手的ㄟ右手 2023-03-13 02:05 13阅读 0赞

### JavaScript 23 种设计模式之 22 备忘录模式 ###

*  概念与特点
 *  结构与实现
 *  应用场景
 *  应用实例
 *  总结

# 概念与特点 #

**概念：**  
备忘录模式指的是在不破坏对象封装性的前提下，捕捉并保存一个对象的内部状态，以便当需要的时候可以恢复到最初状态。

**特点：**

1.  提供了可以恢复状态的机制，当用户需要时能够很方便的恢复到某个历史状态。
2.  实现了内部状态的封装，除了创建它的发起人之外，其他对象不能访问这些状态信息。
3.  简化了发起人。发起人不需要管理和保存其内部状态的各个备份。所有的状态信息都保存在备忘录中，并由管理者进行管理，符合职责单一原则。
4.  其缺点是内存消耗较大，如果内部状态过多，会占用比较大的内存资源。

# 结构与实现 #

**结构：**  
备忘录模式包含发起人、备忘录和管理者。  
发起人：记录当前时刻的状态信息，提供创建备忘录和恢复备忘录数据的功能，可以访问备忘录里的所有信息。  
备忘录：负责存储发起人的内部状态，在需要的时候将状态提供给发起人。  
管理者：对备忘录进行管理，提供保存和获取备忘录的功能，但不能对备忘录的内容进行访问和修改。

**案例**：  
功能描述：迷你冰箱里面只能储存3个水果。超过3个水果，可以按储存顺序将最后一个储存的水果拿出来之后再进行储存。比如分别储存了梨子、苹果、香蕉。想要再储存桃子就不行了。只能先将最后储存的水果香蕉拿出来之后再储存桃子。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>React App</title>
    </head>
    <body>
    <script>
    class Person{ 
         constructor(){ 
             this.fruitName = "";
         }
         getFruitName(){ 
             return this.fruitName;
         }
         setFruitName(fruitName){ 
             this.fruitName = fruitName;
         }
         createFruit(){ 
             return new Fruit(this.fruitName);
         }
         restoreFruit(){ 
            this.setFruitName((new Fruit).getName());
         }
    }
    class Fruit{ 
        constructor(name){ 
            this.name = name;
        }
        getName(){ 
            return this.name;
        }
        setName(name){ 
            this.name = name;
        }
    }
     class Manager{ 
          constructor(){ 
              this.fruit = new Fruit();
              this.top = 0;
          }
          push(f){ 
              this.fruit[this.top] = f;
              if(this.top>=3){ 
                  console.log("已达上限，不能储存"+f.getName());
                  return false
              }else { 
                  console.log("储存了"+f.getName());
                  this.top++;
                  return true
              }
          }
          pop(){ 
              this.top--;
              let f = this.fruit[this.top];
              if(this.top <= 0){ 
                  console.log("撤回最后一个"+f.getName())
              }else { 
                  console.log("撤回了"+f.getName())
              }
          }
      }
    class Customer{ 
        static main(){ 
            let p = new Person();
            let m = new Manager();
            p.setFruitName("梨子");
            m.push(p.createFruit());//保存备忘录
    
            p.setFruitName("苹果");
            m.push(p.createFruit());//保存备忘录
    
            p.setFruitName("香蕉");
            m.push(p.createFruit());//保存备忘录
    
            p.setFruitName("桃子");
            m.push(p.createFruit());//保存备忘录，不能存了，已存满
    
            p.restoreFruit(m.pop());//恢复状态
            p.restoreFruit(m.pop());//恢复状态
            p.restoreFruit(m.pop());//恢复状态
    
            p.setFruitName("桃子");//又可以存了
            m.push(p.createFruit());//保存备忘录
        }
    }
    Customer.main();
    </script>
    </body>
    </html>

# 应用场景 #

1.  需要保存与恢复数据的场景。
2.  需要提供一个可回滚操作的场景。

# 应用实例 #

参考以上案例。

# 总结 #

备忘录模式非常适合撤销操作，比如我们在编辑器里面误写了一些代码，但是想要恢复到最初的时候，就可以使用撤销一步步回退。

**【发起人】：**  
1、设置和获取自己的状态，创建和恢复备忘录。  
2、提供创建备忘录 createFruit 方法，将自己的状态作为参数实例化备忘录并返回作为备忘录状态。  
3、提供恢复备忘录 restoreFruit 方法。传入当前备忘录状态，调用自己的 set 方法设置状态。

**【备忘录】**：  
1、提供设置和获取备忘录状态的方法。

**【管理者】：**  
1、对备忘录进行管理，初始化备忘录，初始化当前顺序。  
2、提供 push 方法，将当前状态添加到备忘录中，  
3、提供 pop 方法，从备忘录中获取最后一次的操作状态。