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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
vue下载excel的实现代码后台用post方法
May 10 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
SONY ICF-F10中波修复记
2021/03/02 无线电
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
基于jquery的$.ajax async使用
2011/10/19 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
python中实现php的var_dump函数功能
2015/01/21 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
详解Python正则表达式re模块
2019/03/19 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
python help函数实例用法
2020/12/06 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
会计主管岗位职责范文
2013/11/08 职场文书
百年校庆节目主持词
2014/03/27 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
手术室护士个人总结
2015/02/13 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书