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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
javascript 命名空间以提高代码重用性
Nov 13 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
用js简单提供增删改查接口
May 12 Javascript
浅入深出Vue之组件使用
Jul 11 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 全文搜索和替换的实现代码
2008/07/29 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
php 注释规范
2012/03/29 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
PHP面向对象精要总结
2014/11/07 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
php实现微信企业转账功能
2018/10/02 PHP
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
怎样使用Python脚本日志功能
2016/08/14 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
教师四风问题整改措施
2014/09/25 职场文书
2014年信用社工作总结
2014/11/25 职场文书
管理人员岗位职责
2015/02/14 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
停电通知范文
2015/04/16 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
教你用python控制安卓手机
2021/05/13 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python