设计模式-备忘录模式

概念

  • 随时记录一个对象的状态变化
  • 随时可以恢复之前的某个状态(如撤销功能)
  • 未找到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())

设计原则验证

  • 状态对象于使用者分开,解耦
  • 符合开放封闭原则
相关推荐
coder_liluyao14 分钟前
JS动画函数的封装(很实用)
javascript
kyriewen15 分钟前
代码写成一锅粥?这5种设计模式让你的项目“起死回生”
前端·javascript·设计模式
蓝色的雨18 分钟前
基于Babylonjs的WEBGPU渲染器源码架构
前端·javascript
qq_120840937119 分钟前
Three.js 与前端框架集成实战:Vue/React 生命周期对齐与热更新避坑
javascript·vue.js·前端框架
donecoding24 分钟前
对象模型与内存的“钥匙理论”:TS 切入的 Go 的结构体与指针
javascript·typescript·go
阿正的梦工坊33 分钟前
JavaScript 函数组合(Compose & Pipe)详解
开发语言·javascript·网络
两年半的个人练习生^_^1 小时前
每日一学:设计模式之原型模式
java·开发语言·设计模式·原型模式
冴羽yayujs1 小时前
2026 年的 JavaScript 已经不是你认识的 JavaScript 了
前端·javascript
M ? A1 小时前
你的 Vue v-for,VuReact 会编译成什么样的 React 代码?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
午安~婉1 小时前
Electron桌面应用(续3)
前端·javascript·electron·重构通用模型·异步可迭代对象