add ts for design pattern

Author: jarry

README.md

@@ -1,10 +1,10 @@
 # Design Pattern 23种经典设计模式源码详解
 
-23种经典设计模式，结合实际场景，源码详解，充分注释说明，每一行代码都经过检验，确保可靠。
+超过23种经典设计模式源码详解，结合实际场景，充分注释说明，每一行代码都经过检验，确保可靠。
 
 用不同语言来实现，包括Java/JS/Python/TypeScript/Go等。
 
-Including 23 source code examples of classic design patterns, which are fully annotated in combination with actual scenarios. Every line of code has been verified to ensure reliability.
+Including over 23 source code examples of classic design patterns, which are fully annotated in combination with actual scenarios. Every line of code has been verified to ensure reliability.
 
 Implemented in different languages, including Java/JS/Python/TypeScript/Go, etc.
 

memento-pattern/ts/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "esm-project",
+  "version": "1.0.0",
+  "main": "test/test.js",
+  "scripts": {
+    "test": "node test/test.js"
+  },
+  "type": "module"
+}

memento-pattern/ts/src/Caretaker.ts

@@ -0,0 +1,28 @@
+import { Memento } from './Memento.js'
+
+// 负责人(Caretaker)角色，只负责保存备忘录记录，不能修改备忘录对象的内容
+export class Caretaker {
+  mementoList: Memento[]
+  constructor() {
+    // 备忘录可以是一个记录，也可以就是一个对象，根据业务场景设置
+    this.mementoList = []
+  }
+
+  add(memento: Memento) {
+    console.log(
+      this.constructor.name +
+        '::add() [memento = ' +
+        memento.constructor.name +
+        ']'
+    )
+    this.mementoList.push(memento)
+  }
+
+  get(index: number) {
+    return this.mementoList[index]
+  }
+
+  getMementoList() {
+    return this.mementoList
+  }
+}

memento-pattern/ts/src/Memento.ts

@@ -0,0 +1,16 @@
+// 备忘录(Memento)角色，负责存储发起人传入的状态
+export class Memento {
+  state: string
+  constructor(state: string) {
+    console.log(this.constructor.name + '::Memento() [state = ' + state + ']')
+    this.state = state
+  }
+
+  getState() {
+    return this.state
+  }
+
+  setState(state: string) {
+    this.state = state
+  }
+}

memento-pattern/ts/src/Originator.ts

@@ -0,0 +1,28 @@
+import { Memento } from './Memento.js'
+
+// 发起人(Originator)负责生成状态快照，即利用一个新备忘录对象将自己的内部状态存储起来
+export class Originator {
+  state: string
+  constructor() {}
+
+  // 每次创建一个新备忘录来保存状态
+  saveMemento() {
+    console.log(
+      this.constructor.name + '::saveMemento() [state = ' + this.state + ']'
+    )
+    return new Memento(this.state)
+  }
+
+  // 从备忘录中恢复状态
+  restoreMemento(memento: Memento) {
+    this.state = memento.getState()
+  }
+
+  getState() {
+    return this.state
+  }
+
+  setState(state: string) {
+    this.state = state
+  }
+}

memento-pattern/ts/test/test.html

@@ -0,0 +1,5 @@
+<script type="module">
+// module need run in http server
+import { test } from './test.js'
+alert('pls look console info.' + '\n\r' + test)
+</script>

memento-pattern/ts/test/test.ts

@@ -0,0 +1,71 @@
+import { Originator } from '../src/Originator.js'
+import { Caretaker } from '../src/Caretaker.js'
+
+export function test() {
+  /*
+   * 备忘录模式是在不暴露对象实现细节的情况下保存和恢复对象之前的状态。
+   * 先声明发起人Originator，再声明负责人Caretaker，发起人生成备忘录Memento
+   * 通过负责人则保存备忘录历史记录，读取备忘录由负责人来完成。
+   */
+  const originator = new Originator()
+  const careTaker = new Caretaker()
+  // 发起人产生一个状态
+  originator.setState('state1')
+  // 覆盖了状态，那么前面的状态未保存
+  originator.setState('state2')
+  // 发起人生成备忘录，一般添加时直接保存即可
+  const memento = originator.saveMemento()
+  // 负责人保添加备忘录历史记录
+  careTaker.add(memento)
+
+  // 直接生成备忘录并添加到负责人的备忘录列表
+  originator.setState('state3')
+  careTaker.add(originator.saveMemento())
+  originator.setState('state4')
+  careTaker.add(originator.saveMemento())
+
+  console.log('发起人当前的状态: ' + originator.getState())
+
+  // 发起人通过负责人那里取出状态
+  originator.restoreMemento(careTaker.get(0))
+  console.log('第一个保存的状态: ' + originator.getState())
+  originator.restoreMemento(careTaker.get(1))
+  console.log('第二个保存的状态: ' + originator.getState())
+
+  // 遍历全部备忘录
+  for (let i = 0; i < careTaker.getMementoList().length; i++) {
+    // 外部一般不直接访问备忘录里面的状态，而是逐个恢复备忘录，再取出状态来
+    originator.restoreMemento(careTaker.get(i))
+    console.log('state: ' + i + ')' + originator.getState())
+  }
+}
+
+// 执行测试
+;(function () {
+  console.log('test start:')
+  test()
+})()
+
+/**
+ // use ems
+ jarry@jarrys-MacBook-Pro ts % ts-node-esm test/test.ts
+ // or tsc and node run
+jarry@jarrys-MacBook-Pro ts % tsc
+jarry@jarrys-MacBook-Pro ts % node test/test.js
+test start:
+Originator::saveMemento() [state = state2]
+Memento::Memento() [state = state2]
+Caretaker::add() [memento = Memento]
+Originator::saveMemento() [state = state3]
+Memento::Memento() [state = state3]
+Caretaker::add() [memento = Memento]
+Originator::saveMemento() [state = state4]
+Memento::Memento() [state = state4]
+Caretaker::add() [memento = Memento]
+发起人当前的状态: state4
+第一个保存的状态: state2
+第二个保存的状态: state3
+state: 0)state2
+state: 1)state3
+state: 2)state4
+*/

memento-pattern/ts/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["esnext", "dom"],
+    "module": "esnext",
+    "strict": true,
+    "removeComments": true,
+    "forceConsistentCasingInFileNames": true,
+    "strictPropertyInitialization": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+  },
+  "include": [
+    "src/**/*.ts",
+    "test/*.ts",
+  ]
+}

observer-pattern/java/test/Test.java

@@ -19,7 +19,7 @@ public static void start() {
 
     // 也可以单独给主题注册一个新的观察者
     concreteSubject.register(new ConcreteObserver2());
-    // 可以移除观察者对象
+    // 可以移除观察者对象，可以打开注释试下
     // concreteSubject.remove(observer1);
 
     // 主题开始发布新通知，各观察者自动更新

observer-pattern/js/test/test.js

@@ -16,7 +16,7 @@ export function test() {
   // 也可以单独给主题注册一个新的观察者
   const observer2 = new ConcreteObserver2()
   concreteSubject.register(observer2)
-  // 可以移除观察者对象
+  // 可以移除观察者对象，可以打开注释试下
   // concreteSubject.remove(observer1)
 
   // 主题开始发布新通知，各观察者自动更新