设计模式-备忘录模式

概念

  • 随时记录一个对象的状态变化
  • 随时可以恢复之前的某个状态(如撤销功能)
  • 未找到JS中经典应用,除了一些工具(如编辑器)

演示

js 复制代码
// 状态备忘
class Memento {
    constructor(content) {
        this.content = content
    }
    getContent() {
        return this.content
    }
}

// 备忘列表
class CareTeker {
    constructor() {
        this.list = []
    }
    add(memento) {
        this.list.push(memento)
    }
    get(index) {
        return this.list[index]
    }
}

// 编辑器
class Editor {
    constructor() {
        this.content = null
    }
    setContent(content) {
        this.content = content
    }
    getContent() {
        return this.content
    }
    saveContentToMemento() {
        return new Memento(this.content)
    }
    getContentFromMemento(memento) {
        this.content = memento.getContent()
    }
}

// 测试代码
let editor = new Editor()
let careTaker = new CareTaker()
editor.setContent('111')
editor.setContent('222')
careTaker.add(editor.saveContentToMemento()) // 存储备忘录
editor.setContent('333')
careTaker.add(editor.saveContentToMemento()) // 存储备忘录
editor.setContent('444')

console.log(editor.getContent())
editor.getContentFromMemento(careTaker.get(1)) // 撤销
console.log(editor.getContent())
editor.getContentFromMemento(careTaker.get(0)) // 撤销
console.log(editor.getContent())

设计原则验证

  • 状态对象于使用者分开,解耦
  • 符合开放封闭原则
相关推荐
小李子呢02119 小时前
前端八股性能优化(2)---回流(重排)和重绘
前端·javascript
吴声子夜歌11 小时前
Vue3——Vue实例与数据绑定
前端·javascript·vue.js
挖稀泥的工人14 小时前
AI聊天界面的布局细节和打字跟随方法
前端·javascript·面试
竹林81814 小时前
从“连接失败”到丝滑登录:我用 ethers.js 连接 MetaMask 的完整踩坑记录
前端·javascript
颜酱14 小时前
图片大模型实践:可灵(Kling)文生图前后端实现
前端·javascript·人工智能
Reart14 小时前
从0解构tinyWeb项目--(Day:2)
javascript·后端·架构
心连欣15 小时前
解锁对象遍历:当字符串遇上for...in循环
前端·javascript
jstopo网站16 小时前
水厂水泵工作流程图canvas动画
前端·javascript
张元清16 小时前
5 分钟用 Vite SSR 搭建一个全栈 React 应用
前端·javascript·面试
布局呆星17 小时前
Vue3 | 组件化开发---组件插槽与通信
前端·javascript·vue.js