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('前面已无操作');
            }
        }

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


坚持努力,无惧未来!

相关文章
|
5月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 职责链模式
js设计模式【详解】—— 职责链模式
78 8
|
5月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 组合模式
js设计模式【详解】—— 组合模式
58 7
|
2月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
33 3
|
3月前
|
存储 设计模式 安全
Java设计模式-备忘录模式(23)
Java设计模式-备忘录模式(23)
|
4月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
59 1
|
4月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
4月前
|
设计模式 算法
设计模式的基础问题之备忘录模式在软件开发的问题如何解决
设计模式的基础问题之备忘录模式在软件开发的问题如何解决
|
5月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
83 7
|
5月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
73 6
|
5月前
|
设计模式 JavaScript
js设计模式【详解】—— 原型模式
js设计模式【详解】—— 原型模式
53 6