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学习笔记(一) 编写高质量代码
Aug 09 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 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 expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
php截取中文字符串函数实例
2015/02/23 PHP
php检测文本的编码
2015/07/26 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python编程之属性和方法实例详解
2015/05/19 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
酒店爱岗敬业演讲稿
2014/09/02 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
小学班主任个人总结
2015/03/03 职场文书
新党员入党决心书
2015/09/22 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis