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 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
PHP7新特性简述
Jun 11 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
jQuery事件用法实例汇总
2014/08/29 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
python3访问sina首页中文的处理方法
2014/02/24 Python
Python实现简单登录验证
2016/04/13 Python
python线程、进程和协程详解
2016/07/19 Python
Django自定义认证方式用法示例
2017/06/23 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
python多进程读图提取特征存npy
2019/05/21 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
python多进程并行代码实例
2019/09/30 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
中海讯通笔试题
2015/09/15 面试题
个人授权委托书模板
2014/09/14 职场文书
庆六一宣传标语
2014/10/08 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL