javascript设计模式 ? 备忘录模式原理与用法实例分析


Posted in Javascript onApril 21, 2020

本文实例讲述了javascript设计模式 ? 备忘录模式原理与用法。分享给大家供大家参考,具体如下:

介绍:在我们的开发中偶尔会遇到这样一种情况,需要对用户的行为进行撤销。要想实现撤销,首先需要保存软件系统的历史状态,当用户执行撤销时用之前的状态覆盖当前状态。本节介绍的备忘录模式提供了一种状态恢复的实现机制,使得用户可以方便的回到一个特定的历史步骤。

定义:在不破坏封装的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态,这样可以在以后将对象恢复到原先保存的状态,它是一种对象行为模式,其别名为Token。

场景:使用js实现一个简单的状态机,用于状态的保存,回退。实现下备忘录模式。

示例:

var Memento = function(state){
  var _state = state;
  this.getState = function(){
    return _state;
  }
}
 
var Originator = function(){
  var _state;
  this.setState = function(state){
    _state = state;
  }
  this.getState = function(){
    return _state;
  }
  this.saveStateToMemento = function(){
    return new Memento(_state)
  }
  this.getStateFromMemento = function(memento){
    _state = memento.getState();
  }
}
 
var CareTaker = function(){
  var _mementoList = [];
  this.add = function(memento){
    _mementoList.push(memento);
  }
  this.get = function(index){
    return _mementoList[index];
  }
}
 
var originator = new Originator();
var careTaker = new CareTaker();
originator.setState("State 1");
originator.setState("State 2");
careTaker.add(originator.saveStateToMemento());
originator.setState("State 3");
careTaker.add(originator.saveStateToMemento());
originator.setState("State 4");
 
console.log("当前状态: " + originator.getState());
// 当前状态: State 4
originator.getStateFromMemento(careTaker.get(0));
console.log("恢复第一次保存状态: " + originator.getState());
// 恢复第一次保存状态: State 2
originator.getStateFromMemento(careTaker.get(1));
console.log("恢复第二次保存: " + originator.getState());
// 恢复第二次保存: State 3

这个例子里面Originator称为原发器,可以通过saveStateToMemento创建一个备忘录,存储当前状态。Memento是一个备忘录对象,只供原发器使用,提供状态提取方法。CareTaker称之为负责人也可以叫管理者,它负责保存备忘录,但是不能对备忘录内容进行操作或检查

备忘录模式总结:

优点:
* 提供了一种状态恢复的时间机制,使得用户可以方便的回退到一个特定的历史步骤。
* 备忘录实现了对信息的封装,一个备忘录对象是一种原发器对象状态的表示,不会被其他代码所改动。
缺点:
* 备忘录模式的主要缺点是资源消耗过大,如果需要保存的原发器类的成员变量太多,就不可避免的需要占用大量的存储空间。

适用场景:
* 保存一个对象在某一时刻的全部或部分状态

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 #Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 #Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 #Javascript
vue实现购物车功能(商品分类)
Apr 20 #Javascript
vue实现淘宝购物车功能
Apr 20 #Javascript
javascript利用键盘控制小方块的移动
Apr 20 #Javascript
vue实现购物车的监听
Apr 20 #Javascript
You might like
php实现快速排序法函数代码
2012/08/27 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
input框中的name和id的区别
2016/11/16 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
以windows service方式运行Python程序的方法
2015/06/03 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
Python matplotlib实时画图案例
2020/04/23 Python
浅谈python 类方法/静态方法
2020/09/18 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
大学生专科学习生活的自我评价
2013/12/07 职场文书
年度考核自我鉴定
2014/03/19 职场文书
品牌推广策划方案
2014/05/28 职场文书
银行金融服务方案
2014/06/11 职场文书
介绍信如何写
2015/01/31 职场文书
2015年消防工作总结
2015/04/24 职场文书
股东出资协议书
2016/03/21 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers