翼度科技»论坛 编程开发 JavaScript 查看内容

前端设计模式——备忘录模式

4

主题

4

帖子

12

积分

新手上路

Rank: 1

积分
12
备忘录模式(Memento Pattern):是一种行为型设计模式,在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态。在JavaScript中,可以使用闭包来实现备忘录模式。
备忘录模式通常用于处理用户界面的状态。当用户与应用程序交互时,应用程序会根据用户的输入更改其状态。它可以使您保存和还原应用程序状态的快照,以便用户可以随时返回以前的状态。
以下是备忘录模式的几个关键组件:
1. Originator(发起人):负责创建要保存状态的对象,并在需要时将其状态存储到 Memento 中。
1.  Memento(备忘录):存储发起人对象的状态。
1.  Caretaker(管理者):负责存储和管理 Memento 对象。Caretaker 对象不会直接访问 Memento 对象,而是通过发起人对象来获取它。
在前端中,备忘录模式的一个实际应用是浏览器历史记录。当用户在浏览器中导航时,浏览器将当前页面的状态存储到历史记录中。用户可以随时返回以前的状态,并恢复页面的先前状态。
下面是一个简单的备忘录模式实现示例:
  1. // Originator
  2. class Editor {
  3.   constructor() {
  4.     this.content = '';
  5.   }
  6.   type(words) {
  7.     this.content += words;
  8.   }
  9.   save() {
  10.     return new EditorMemento(this.content);
  11.   }
  12.   restore(memento) {
  13.     this.content = memento.getContent();
  14.   }
  15. }
  16. // Memento
  17. class EditorMemento {
  18.   constructor(content) {
  19.     this.content = content;
  20.   }
  21.   getContent() {
  22.     return this.content;
  23.   }
  24. }
  25. // Caretaker
  26. class History {
  27.   constructor() {
  28.     this.states = [];
  29.   }
  30.   push(state) {
  31.     this.states.push(state);
  32.   }
  33.   pop() {
  34.     return this.states.pop();
  35.   }
  36. }
  37. // Usage
  38. const editor = new Editor();
  39. const history = new History();
  40. // 编辑器输入内容
  41. editor.type('Hello, ');
  42. editor.type('World!');
  43. // 将当前状态保存到备忘录中,并将备忘录添加到历史记录中
  44. history.push(editor.save());
  45. // 继续编辑器输入内容
  46. editor.type(' How are you today?');
  47. // 输出当前编辑器内容
  48. console.log(editor.content); // 'Hello, World! How are you today?'
  49. // 从历史记录中恢复上一个状态
  50. editor.restore(history.pop());
  51. // 输出恢复的编辑器内容
  52. console.log(editor.content); // 'Hello, World!'
复制代码
 
在这个例子中,`Editor` 类是发起人,它具有保存和恢复状态的方法。`EditorMemento` 类是备忘录,它存储发起人对象的状态。`History` 类是管理者,它存储和管理备忘录对象。
在使用备忘录模式时,我们首先创建一个编辑器对象 `editor`,并将其状态保存到历史记录中。然后我们继续输入一些内容,并再次将状态保存到历史记录中。接着,我们从历史记录中恢复先前的状态,并输出恢复的编辑器内容。
需要注意的是,在 JavaScript 中,我们可以直接访问对象的属性,而不需要使用 getter 和 setter 方法,因此在上面的示例中,我们可以直接使用 `editor.content` 来访问编辑器的内容。

来源:https://www.cnblogs.com/ronaldo9ph/p/17246394.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具