Concept and characteristics

Concept:
Memorandum mode refers to capturing and saving the internal state of an object without destroying the encapsulation of the object, so that it can be restored to its original state when needed.

Features:

Provides a mechanism to restore the state, and can easily restore to a certain historical state when the user needs it.
The encapsulation of the internal state is realized, except for the initiator who created it, other objects cannot access the state information.
Simplified the initiator. The initiator does not need to manage and save individual backups of its internal state. All status information is stored in the memo and managed by the manager, in line with the single responsibility principle.
The disadvantage is that the memory consumption is large, if the internal state is too much, it will take up relatively large memory resources.

Structure and realization

Structure: The
memo mode includes initiator, memo and manager.
Initiator: Record the current state information, provide the functions of creating memos and restoring memo data, and can access all the information in the memo.
Memo: Responsible for storing the internal state of the initiator and providing the state to the initiator when needed.
Manager: Manage memos, provide the functions of saving and obtaining memos, but cannot access or modify the content of memos.

Case :
Function description: Only 3 fruits can be stored in the mini refrigerator. If there are more than 3 fruits, the last stored fruit can be taken out according to the storage order before being stored. For example, pears, apples, and bananas are stored separately. If you want to store peaches, you can't. You can only store the peaches after taking out the last stored fruit bananas.

<!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>

Application scenario

Need to save and restore data scenes.
Need to provide a scenario where the operation can be rolled back.

Applications

Refer to the above case.

to sum up

The memo mode is very suitable for undo operations. For example, we wrote some code in the editor by mistake, but if we want to restore it to the original time, we can use undo to step back.

[Initiator]:
1. Set and get your own status, create and restore memos.
2. Provide the createFruit method to create a memo, instantiate the memo with your state as a parameter and return it as the memo state.
3. Provide the restoreFruit method to restore the memo. Pass in the current memo state and call your own set method to set the state.

【Memo】 :
1. Provide methods for setting and obtaining the status of the memo.

[Manager]:
1. Manage the memo, initialize the memo, and initialize the current order.
2. Provide a push method to add the current status to the memo.
3. Provide a pop method to get the last operation status from the memo.

JavaScript 22 memo mode of 23 design patterns