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提交到服务器修改数据
Dec 27 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
jquery validate表单验证插件
Sep 06 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
JavaScript闭包原理与用法学习笔记
May 29 Javascript
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表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
python读取并写入mat文件的方法
2019/07/12 Python
python实现五子棋程序
2020/04/24 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
传播学毕业生求职信
2013/10/11 职场文书
个人找工作的自我评价
2013/10/17 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
秋菊打官司观后感
2015/06/03 职场文书
调研报告的主要写法
2019/04/18 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python