JavaScript设计模式-备忘录模式(20)

简介: JavaScript设计模式-备忘录模式(20)

备忘录设计模式是指当我们执行某些操作的时候,能够将我们执行的操作保存在内存中,这样我们能够随时通过某些特定操作来查看以及恢复之前的操作,通俗的讲,它就是通过某种方式捕获到我们操作并保存起来,然后再我们之后想恢复即可使用某一方式进行恢复


备忘录设计模式在生活中十分常见,比如我们和小伙伴们一块下五子棋,通过向对方请求可以完成撤销回退棋子的操作和我们手机里面的计算器通过计算得到的结果,我们也可以通过查看计算器历史计算结果并恢复计算数据,在打游戏中我们对游戏的某一个时间进行存档,存档会把我们当前的游戏数据全部保存下来,这样等到下次玩游戏点击指定的存档数据,就可以恢复当初存档的游戏数据


备忘录设计模式在业务中常用于对文本的回滚和前进操作以及利用该设计模式对分页请求数据进行缓存优化,减少页面请求,不过该优化方案不能够获取到最新的分页数据


我们来使用备忘录设计模式来实现一下文本的操作以及回退


页面结构,我们需要一个文本域和俩个按钮分别控制文本的操作和回滚的操作

<textarea type="text" id="app" > </textarea >
    <button type="button" id="prev">前进</button>
    <button type="button" id="next">后退</button>

先获取文本域和前进以及后退按钮,在定义一个数据池,便于我们存储文本域的文本修改操作,在增添一个标记用于获取数据池的数据,给文本域设置一个失去焦点事件,当焦点失去的时候就把当前文本域的value值存储到数据池中以便后面结合标记获取,前进按钮绑定一个点击事件,判断现在是否是最新操作,如果是最新操作则提示用户,如果不是则把当前数据池结合标记获取的值赋值给文本域,后退按钮操作同前进按钮一样

//    获取文本框
        const app = document.getElementById('app');
        // 前进
        const prev = document.getElementById('prev');
        // 后退
        const next = document.getElementById('next');
        // 数据池
        let data = [];
        // 恢复标记
        let recoveryIndex = 0;
        // 文本框失去焦点后把数据存到数据池中
        app.onblur = function (e) {
            data.push({ value: e.target.value })
            recoveryIndex = data.length - 1;
        }
        // 前进按钮
        prev.onclick = function () {
            recoveryIndex++;
            if (data[recoveryIndex]) {
                app.value = data[recoveryIndex].value
            } else {
                recoveryIndex--;
                alert('现在已是最新操作');
            }
        }
        // 后退按钮
        next.onclick = function () {
            recoveryIndex--;
            if (data[recoveryIndex]) {
                app.value = data[recoveryIndex].value
            } else {
                recoveryIndex++;
                alert('前面已无操作');
            }
        }

备忘录设计模式的我们可以利用它来做一些在业务中需要回滚操作的功能,提供了很好的恢复机制,方便用户进行查看或操作恢复历史状态,但是内存消耗比较大,因为存储历史操作比较多的情况下,会十分占用内存


坚持努力,无惧未来!

相关文章
|
19天前
|
设计模式 存储 Java
【再谈设计模式】备忘录模式~对象状态的守护者
备忘录模式属于行为型设计模式。它的主要目的是在不破坏对象封装性的前提下,捕获并外部化一个对象的内部状态,以便之后可以将该对象恢复到这个状态。原发器(Originator):创建一个备忘录,用于记录当前时刻它的内部状态。原发器还可以使用备忘录来恢复其内部状态。备忘录(Memento):存储原发器对象的内部状态。备忘录应该防止原发器以外的其他对象访问其内部状态。负责人(Caretaker):负责保存备忘录,但不能对备忘录的内容进行操作或检查。
185 82
|
1月前
|
设计模式 JavaScript 算法
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
32 8
|
2月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
123 33
|
8月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 职责链模式
js设计模式【详解】—— 职责链模式
98 8
|
8月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 组合模式
js设计模式【详解】—— 组合模式
99 7
|
4月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
69 2
|
5月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
57 3
|
6月前
|
存储 设计模式 安全
Java设计模式-备忘录模式(23)
Java设计模式-备忘录模式(23)
|
7月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
102 1
|
7月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神