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+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
理解javascript中DOM事件
Dec 25 Javascript
封装属于自己的JS组件
Jan 27 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
微信小程序实现录音功能
Nov 22 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 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
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
使用JS读秒使用示例
2013/09/21 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
javascript事件模型介绍
2016/05/31 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
如何在django中运行scrapy框架
2020/04/22 Python
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
社区工作感言
2014/02/21 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL