Skip to main content
 首页 » 编程设计

javascript备忘录模式(Memento)

2022年07月16日56txw1958
  1 <!doctype html> 
  2 <html lang="en"> 
  3 <head> 
  4   <meta charset="UTF-8"> 
  5   <title>Memento</title> 
  6 </head> 
  7 <body> 
  8  
  9 <script> 
 10 /** 
 11  * 备忘录模式 
 12  * 
 13  * 定义: 
 14  * 在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态。这样以后就可将该对象恢复到原先保存的状态。 
 15  * 
 16  * 本质: 
 17  * 保存和恢复内部状态 
 18  * 
 19  * 一个备忘录是一个对象,它存储另一个对象在某个瞬间的内部状态,后者被称为备忘录的原发器。 
 20  * 
 21  * 备忘录模式引入一个存储状态的备忘录对象,为了让外部无法访问这个对象的值,一般把这个对象实现成为需要保存数据的对象的内部类,通常还是私有的。这样,除了这个需要保存数据的对象,外部无法访问到这个备忘录对象的数据,这就保证了对象的封装性不被破坏。 
 22  * 但是这个备忘录对象需要存储在外部,为了避免让外部访问到这个对象内部的数据,备忘录模式引入了一个备忘录对象的窄接口,这个接口一般是空的,什么方法都没有,这样外部存储的地方,只是知道存储了一些备忘录接口的对象,但是由于接口是空的,它们无法通过接口去访问备忘录对象内部的数据。 
 23  * 
 24  * 功能 
 25  * 备忘录模式的功能,首先是在不破坏封装性的前提下,捕获一个对象的内部状态,这里要注意两点,一个是不破坏封装性,也就是对象不能暴露它不应该暴露的细节;另外一个是捕获的是对象的内部状态,而且通常还是运行期间某个时刻对象的内部状态。 
 26  * 
 27  * 为什么要捕获这个对象的内部状态?捕获这个内部状态有什么用? 
 28  * 是为了在以后某个时候,将该对象的状态恢复到备忘录所保存的状态,这才是备忘录真正的目的。前面保存的状态就是为了后面恢复,虽然不是一定要恢复,但是目的是为了恢复。 
 29  * 
 30  * 捕获的状态存放在哪里? 
 31  * 在备忘录对象中。而备忘录对象通常会被存储在原发器对象之外,也就是内保存状态的对象的外部,通常是存放在管理者对象那里。 
 32  * 
 33  * 备忘录对象 
 34  * 备忘录对象通常就是记录原发器要保存的状态的对象,简单点的实现,也就是封装数据的对象。 
 35  * 但是备忘录对象和普通的封装数据的对象还是有区别的。主要是备忘录对象一般只让原发器对象来操作,而不是像普通的封装数据的对象那样,谁都可以使用。为了保证这点,通常会把备忘录对象作为原发器对象的内部类来实现,而且是线程私有的,这就断绝了外部来访问这个备忘录对象的途径。 
 36  * 备忘录对象需要保存在原发器对象之外,为了与外部交互,通常备忘录对象都会实现一个窄接口,来标识对象的类型。 
 37  * 
 38  * 原发器对象 
 39  * 原发器对象就是需要被保存状态的对象,也是有可能需要恢复状态的对象。原发器一般会包含备忘录对象的实现。 
 40  * 通常原发器对象应该提供捕获某个时刻对象内部状态的方法,在这个方法中,原发器兑现会创建备忘录对象,把需要保存的状态数据设置到备忘录对象中,然后把备忘录对象提供给管理者对象来保存。 
 41  * 当然,原发器对象也应该提供这样的方法,按照外部要求来恢复内部状态到某个备忘录对象记录的状态。 
 42  * 
 43  * 管理者对象 
 44  * 管理者对象主要负责保存备忘录对象。 
 45  * 1.调用原发器获得备忘录对象后,备忘录对象放在那里,哪个对象就可以算是管理者对象。 
 46  * 2.管理者对象并不是只能管理一个备忘录对象。 
 47  * 3.狭义的管理者对象制管理同一类的备忘录对象,广义的是可以管理不同类型的备忘录对象。 
 48  * 4.管理者对象基本功能主要是缓存的实现,或者是一个简单的对象实例池。 
 49  * 5.管理者虽然能存取备忘录对象,但是不能访问备忘录对象内部的数据。 
 50  * 
 51  * 窄接口和宽接口 
 52  * 窄接口:管理者只能看到备忘录的窄接口,窄接口的实现中通常没有任何的方法,只是一个类型标识。窄接口使得管理者只能将备忘录传递给其他对象。 
 53  * 宽接口:原发器能够看到一个宽接口,允许它访问所需的所有数据,来返回到先前的状态。 
 54  * 
 55  * 使用备忘录的潜在代价 
 56  * 标准的备忘录模式的实现机制是依靠缓存来实现的,因此,当需要备忘的数据量较大时,或者是存储的备忘录对象数据量不大但是数量很多的时候,或者是用户很频繁地创建备忘录对象的时候,这些都会导致非常大的开销。 
 57  * 
 58  * 增量存储 
 59  * 如果需要频繁地创建备忘录对象,而且创建和应用备忘录对象来恢复状态的顺序是可控的,那么可以让备忘录进行增量存储,也就是备忘录可以仅仅存储原发器内部相对于上一次存储状态后的增量改变。 
 60  * 
 61  * 备忘录模式调用顺序 
 62  * 创建备忘录对象的阶段: 
 63  * 1.创建原发器对象,调用原发器的业务处理方法。 
 64  * 2.调用createMemento方法 
 65  * 3.创建备忘录对象。 
 66  * 4.调用saveMemento方法吧备忘录对象存放在管理者对象那里。 
 67  * 
 68  * 使用备忘录对象来恢复原发器对象状态的阶段: 
 69  * 1.调用retriveMemento方法来获取要恢复的备忘录对象。 
 70  * 2.调用setMemento方法,传入备忘录对象,来让原发器恢复状态。 
 71  * 3.调用方法来获取状态数据。 
 72  * 
 73  * 
 74  * 离线存储 
 75  * 从备忘录模式的功能和实现上,是可以把备忘录的数据实现成为离线存储。 
 76  */ 
 77  
 78 (function () { 
 79   // 示例代码 
 80  
 81   // 原发器对象 
 82   function Originator() { 
 83     // 表示原发器的状态 
 84     var state = ''; 
 85     // 创建保存原发器对象的状态的备忘录对象 
 86     this.createMemento = function () { 
 87       return new MementoImpl(state); 
 88     }; 
 89     // 重新设置原发器对象的状态,让其回到备忘录对象记录的状态 
 90     this.setMemento = function (memento) { 
 91       this.state = memento.getState(); 
 92     }; 
 93     // 真正的备忘录对象,实现备忘录窄接口 
 94     // 实现程私有的内部类,不让外部访问 
 95     function MementoImpl(state) { 
 96       // 表示需要保存的状态 
 97       state = state || ''; 
 98       // 只提供getter 
 99       this.getState = function () { 
100         return state; 
101       }; 
102     } 
103   } 
104  
105   // 负责保存备忘录的对象 
106   function Caretaker() { 
107     var memento = null; 
108     // 保存备忘录对象 
109     this.saveMemento = function (mementoObj) { 
110       memento = mementoObj; 
111     }; 
112     // 获取被保存的备忘录对象 
113     this.retriveMemento = function () { 
114       return memento; 
115     }; 
116   } 
117  
118 }()); 
119  
120 (function () { 
121   // 示例1 
122  
123   // 模拟运行流程A 
124   function FlowAMock(flowName) { 
125     // 流程名称,不需要外部存储的状态数据 
126     var flowName = flowName || ''; 
127     // 代指某个中间结果,需要外部存储的状态数据 
128     var tempResult = 0; 
129     // 代指某个中间结果,需要外部存储的状态数据 
130     var tempState = ''; 
131     // 运行流程的第一个阶段 
132     this.runPhaseOne = function () { 
133       // 在这个阶段,可能产生了中间结果,示意一下 
134       tempResult = 3; 
135       tempState = 'PhaseOne'; 
136     }; 
137     // 按照方案一来运行流程后半部分 
138     this.schema1 = function () { 
139       tempState += ', Schema1'; 
140       console.log(tempState + ': now run ' + tempResult); 
141       tempResult += 11; 
142     }; 
143     // 按照方案二来运行流程后半部分 
144     this.schema2 = function () { 
145       tempState += ', Schema2'; 
146       console.log(tempState + ': now run ' + tempResult); 
147       tempResult += 22; 
148     }; 
149     // 创建保存原发器对象状态的备忘录对象 
150     this.createMemento = function () { 
151       return new MementoImpl(tempResult, tempState); 
152     }; 
153     // 重新设置原发器对象的状态,让其回到备忘录对象记录的状态 
154     this.setMemento = function (memento) { 
155       tempResult = memento.getTempResult(); 
156       tempState = memento.getTempState(); 
157     }; 
158     // 真正的备忘录对象,实现备忘录窄接口 
159     function MementoImpl(tempResult, tempState) { 
160       tempResult = tempResult || 0; 
161       tempState = tempState || ''; 
162       this.getTempResult = function () { 
163         return tempResult; 
164       }; 
165       this.getTempState = function () { 
166         return tempState; 
167       }; 
168     } 
169   } 
170  
171   // 负责保存模拟运行流程A的对象的备忘录对象 
172   function FlowAMementoCareTaker() { 
173     var memento = null; 
174     // 保存备忘录对象 
175     this.saveMemento = function (mementoObj) { 
176       memento = mementoObj; 
177     }; 
178     // 获取被保存的备忘录对象 
179     this.retriveMemento = function () { 
180       return memento; 
181     }; 
182   } 
183  
184   // 创建模拟运行流程的对象 
185   var mock = new FlowAMock('TestFlow'); 
186   // 运行流程第一个阶段 
187   mock.runPhaseOne(); 
188   // 创建一个管理者 
189   var careTaker = new FlowAMementoCareTaker(); 
190   // 创建此时对象的备忘录对象,并保存到管理者对象那里,后面要用 
191   careTaker.saveMemento(mock.createMemento()); 
192  
193   // 按照方案一来运行流程的后半部分 
194   mock.schema1(); 
195  
196   // 从管理者获取备忘录对象,然后设置回去 
197   // 让模拟运行流程的对象自己恢复自己的内部状态 
198   mock.setMemento(careTaker.retriveMemento()); 
199  
200   // 按照方案二来运行流程的后半部分 
201   mock.schema2(); 
202  
203 }()); 
204  
205 (function () { 
206   // 再次实现可撤销操作 
207  
208   function AbstractCommand() { 
209     this.operation = null; 
210   } 
211  
212   AbstractCommand.prototype = { 
213     execute: function () { 
214     }, 
215     undo: function (memento) { 
216       this.operation.setMemento(memento); 
217     }, 
218     redo: function (memento) { 
219       this.operation.setMemento(memento); 
220     }, 
221     createMemento: function () { 
222       return this.operation.createMemento(); 
223     } 
224   }; 
225  
226   function AddCommand(opeNum) { 
227     AbstractCommand.call(this); 
228     this.opeNum = opeNum; 
229   } 
230  
231   AddCommand.prototype = { 
232     __proto__: AbstractCommand.prototype, 
233  
234     execute: function () { 
235       this.operation.add(this.opeNum); 
236     } 
237   }; 
238  
239   function SubstractCommand(opeNum) { 
240     AbstractCommand.call(this); 
241     this.opeNum = opeNum; 
242   } 
243  
244   SubstractCommand.prototype = { 
245     __proto__: AbstractCommand.prototype, 
246  
247     execute: function () { 
248       this.operation.substract(this.opeNum); 
249     } 
250   }; 
251  
252   function Operation() { 
253     var result = 0; 
254     this.getResult = function () { 
255       return result; 
256     }; 
257     this.add = function (num) { 
258       result += num; 
259     }; 
260     this.substract = function (num) { 
261       result -= num; 
262     }; 
263     this.createMemento = function () { 
264       return new MementoImpl(result); 
265     }; 
266     this.setMemento = function (memento) { 
267       result = memento.getResult(); 
268     }; 
269  
270     function MementoImpl(result) { 
271       result = result || 0; 
272       this.getResult = function () { 
273         return result; 
274       }; 
275     } 
276   } 
277  
278   function Calculator() { 
279     this.undoCmds = []; 
280     this.redoCmds = []; 
281     this.undoMementos = []; 
282     this.redoMementos = []; 
283     this.addCmd = null; 
284     this.substractCmd = null; 
285   } 
286  
287   Calculator.prototype = { 
288     addPressed: function () { 
289       var m1 = this.addCmd.createMemento(); 
290  
291       this.addCmd.execute(); 
292       this.undoCmds.push(this.addCmd); 
293  
294       var m2 = this.addCmd.createMemento(); 
295       this.undoMementos.push([m1, m2]); 
296     }, 
297     substractPressed: function () { 
298       var m1 = this.substractCmd.createMemento(); 
299  
300       this.substractCmd.execute(); 
301       this.undoCmds.push(this.substractCmd); 
302  
303       var m2 = this.substractCmd.createMemento(); 
304       this.undoMementos.push([m1, m2]); 
305     }, 
306     // 撤销 
307     undoPressed: function () { 
308       if (this.undoCmds.length) { 
309         var cmd = this.undoCmds.pop(); 
310         var ms = this.undoMementos.pop(); 
311  
312         cmd.undo(ms[0]); 
313         this.redoCmds.push(cmd); 
314         this.redoMementos.push(ms); 
315       } else { 
316         console.log('很抱歉,没有可撤销命令'); 
317       } 
318     }, 
319     // 恢复 
320     redoPressed: function () { 
321       if (this.redoCmds.length) { 
322         var cmd = this.redoCmds.pop(); 
323         var ms = this.redoMementos.pop(); 
324  
325         cmd.redo(ms[1]); 
326  
327         this.undoCmds.push(cmd); 
328         this.undoMementos.push(ms); 
329       } else { 
330         console.log('很抱歉,没有可撤销命令'); 
331       } 
332     } 
333   }; 
334  
335   var operation = new Operation(); 
336   var addCmd = new AddCommand(5); 
337   var substractCmd = new SubstractCommand(3); 
338  
339   addCmd.operation = operation; 
340   substractCmd.operation = operation; 
341  
342   var calculator = new Calculator(); 
343   calculator.addCmd = addCmd; 
344   calculator.substractCmd = substractCmd; 
345  
346   calculator.addPressed(); 
347   console.log('一次加法运算后的结果为:' + operation.getResult()); 
348  
349   calculator.substractPressed(); 
350   console.log('一次减法运算后的结果为:' + operation.getResult()); 
351  
352   calculator.undoPressed(); 
353   console.log('撤销一次后的结果为:' + operation.getResult()); 
354  
355   calculator.undoPressed(); 
356   console.log('再撤销一次后的结果为:' + operation.getResult()); 
357  
358   calculator.redoPressed(); 
359   console.log('恢复操作一次后的结果为:' + operation.getResult()); 
360  
361   calculator.redoPressed(); 
362   console.log('在恢复操作一次后的结果为:' + operation.getResult()); 
363 }()); 
364  
365 /** 
366  * 备忘录模式的优点 
367  * 1.更好的封装性。 
368  * 备忘录模式通过使用备忘录对象,来封装原发器对象的内部状态,虽然这个对象是保存在原发器对象的外部,但是由于备忘录对象的窄接口并不提供任何方法。这样有效地保证了对原发器对象内部状态的封装,不把原发器对象的内部实现细节暴露给外面。 
369  * 2.简化了原发器。 
370  * 备忘录对象被保存到了原发器对象之外,让客户来管理他们请求的状态,从而让原发器对象得到简化。 
371  * 3.窄接口和宽接口。 
372  * 
373  * 缺点 
374  * 1.可能会导致高开销。 
375  * 
376  * 
377  * 何时选用 
378  * 1.如果必须保存一个对象在某一个时刻的全部或者部分状态,方便在以后需要的时候,可以把该对象恢复到先前的状态,可以使用备忘录模式。使用备忘录对象来封装和保存需要保存的内部状态,然后把备忘录对象保存到管理者对象中,在需要的时候,再从管理者对象中获取备忘录对象,来恢复对象的状态。 
379  * 2.如果需要保存一个对象的内部状态,但是如果用接口来让其他对象直接得到这些需要保存的状态,将会暴露对象的实现细节并破坏对象的封装性,这时可以使用备忘录模式。把备忘录对象实现成为原发器对象的内部类,而且还是私有的,从而保证只有原发器对象才能访问该备忘录对象。这样既保存了需要保存的状态,又不会暴露原发器对象的内部实现细节。 
380  * 
381  * 
382  * 相关模式 
383  * 备忘录模式和命令模式 
384  * 可以组合使用。 
385  * 命令模式中,在实现命令的撤销和重做的时候,可以使用备忘录模式,在命令操作的时候记录下操作前后的状态,然后在命令撤销和重做的时候,直接使用相应的备忘录对象来恢复状态就可以了。 
386  * 在这种撤销的执行顺序和重做的执行顺序可控的情况下,备忘录对象还可以采用增量式记录的方式,有效减少缓存的数据量。 
387  * 
388  * 备忘录模式和原型模式 
389  * 可以组合使用。 
390  * 在原发器对象创建备忘录对象的时候,如果原发器对象中全部或者大部分的状态都需要保存,一个简洁的方式就是直接克隆一个原发器对象。也就是说,这个时候备忘录对象里面存放的是一个原发器对象的实例。 
391  */ 
392  
393 (function () { 
394   // http://www.dofactory.com/javascript-memento-pattern.aspx 
395   var Person = function (name, street, city, state) { 
396     this.name = name; 
397     this.street = street; 
398     this.city = city; 
399     this.state = state; 
400   }; 
401  
402   Person.prototype = { 
403     hydrate: function () { 
404       var memento = JSON.stringify(this); 
405       return memento; 
406     }, 
407     dehydrate: function (memento) { 
408       var m = JSON.parse(memento); 
409  
410       this.name = m.name; 
411       this.street = m.street; 
412       this.city = m.city; 
413       this.state = m.state; 
414     } 
415   }; 
416  
417   var CareTaker = function () { 
418     var mementos = {}; 
419  
420     this.add = function (key, memento) { 
421       mementos[key] = memento; 
422     }; 
423     this.get = function (key) { 
424       return mementos[key]; 
425     }; 
426   }; 
427  
428   new function run() { 
429  
430     var mike = new Person("Mike Foley", "1112 Main", "Dallas", "TX"); 
431     var john = new Person("John Wang", "48th Street", "San Jose", "CA"); 
432  
433     var caretaker = new CareTaker(); 
434  
435     // save state 
436  
437     caretaker.add(1, mike.hydrate()); 
438     caretaker.add(2, john.hydrate()); 
439  
440     // mess up their names 
441  
442     mike.name = "King Kong"; 
443     john.name = "Superman"; 
444  
445     // restore original state 
446  
447     mike.dehydrate(caretaker.get(1)); 
448     john.dehydrate(caretaker.get(2)); 
449  
450     console.log(mike.name); 
451     console.log(john.name); 
452   }; 
453 }()); 
454 </script> 
455 </body> 
456 </html>

本文参考链接:https://www.cnblogs.com/webFrontDev/p/3660296.html