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 获取事件对象的注意点
Jul 29 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 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跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
php导入模块文件分享
2015/03/17 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
php中的依赖注入实例详解
2019/08/14 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现从web抓取文档的方法
2014/09/26 Python
python中sys.argv函数精简概括
2018/07/08 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
学校学雷锋活动总结
2014/06/26 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
Django实现聊天机器人
2021/05/31 Python
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL