设计模式-备忘录模式

概念

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

设计原则验证

  • 状态对象于使用者分开,解耦
  • 符合开放封闭原则
相关推荐
代码与野兽几秒前
AI交易,怎么让LLM自己挑选数据源?
前端·javascript·后端
CC码码19 分钟前
前端文本分割工具,“他”来了
前端·javascript·程序员
星火飞码iFlyCode19 分钟前
MySQL数据库操作一致性保证(智能对话+AI代码补全案例)【留言有奖】
javascript
韩曙亮34 分钟前
【Web APIs】JavaScript 执行机制 ( 单线程特点 | 同步任务与异步任务 | 同步先行、异步排队 | 事件循环机制 )
开发语言·前端·javascript·异步任务·同步任务·web apis·js 引擎
萌狼蓝天1 小时前
[Vue2]项目中 vue-draggable-resizable 列宽拖动问题修复(首次拖动列宽突然变得很小)
前端·javascript·vue.js·前端框架·ecmascript
带带弟弟学爬虫__1 小时前
ks安卓—did注册
前端·javascript·vue.js·python·网络爬虫
sztian681 小时前
JavaScript-----本地存储、数组中map方法、数组中join方法
开发语言·javascript·ecmascript
南山安1 小时前
JS 进阶:手写 instanceof 与JS继承全面讲解
javascript·面试·编程语言
小旭@2 小时前
vue3官方文档巩固
前端·javascript·vue.js
努力往上爬de蜗牛2 小时前
electron 打包
前端·javascript·electron