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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
js实现下拉菜单效果
Mar 01 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
Vue filter介绍及其使用详解
Oct 21 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
微信小程序实现签字功能
Dec 23 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
解决elementui表格操作列自适应列宽
Dec 28 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获取后台Job管理的实现代码
2011/06/10 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
js 程序执行与顺序实现详解
2013/05/13 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
js查找节点的方法小结
2015/01/13 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Scrapy的简单使用教程
2017/10/24 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
Python中如何引入第三方模块
2020/05/27 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
使用python实现学生信息管理系统
2021/02/25 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
行政经理岗位职责
2013/11/09 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript