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 相关文章推荐
javascript 循环读取JSON数据的代码
Jul 17 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 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为SHOPEX增加日志功能代码
2010/07/02 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
Python基类函数的重载与调用实例分析
2015/01/12 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
Python对象转换为json的方法步骤
2019/04/25 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
Python如何对齐字符串
2020/07/30 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
历史学专业个人的自我评价
2013/10/13 职场文书
五一服装活动方案
2014/01/11 职场文书
活动总结怎么写
2014/04/28 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
幼儿园个人总结
2015/02/28 职场文书
婚姻出轨保证书
2015/05/08 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android