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 相关文章推荐
了解一点js的Eval函数
Jul 26 Javascript
JS与C#编码解码
Dec 03 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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调用Twitter的RSS的实现代码
2010/03/10 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php给图片加文字水印
2015/07/31 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
学习十八大报告感言
2014/02/04 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
个人作风建设自查报告
2014/10/22 职场文书
主持人开幕词
2015/01/29 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL