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)
 
   // 主题开始发布新通知，各观察者自动更新

observer-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"
+}

observer-pattern/ts/src/ConcreteObserver.ts

@@ -0,0 +1,21 @@
+import { ObserverAPI } from './ObserverAPI.js'
+import { Subject } from './Subject.js'
+
+// 具体的观察者实现类，也可以看成订阅者，关联对应的主题类。
+// 不同的观察者也可以对应多个主题
+export class ConcreteObserver extends ObserverAPI {
+  // 给观察者绑定主题，同时把观察者添加到主题列表
+  subject: Subject
+  constructor(subject: Subject, name: string) {
+    super(name)
+    this.subject = subject
+    subject.register(this)
+  }
+
+  // 观察者发出更新通知，不用单独告诉订阅者，由订阅者自行监听
+  update(content: string) {
+    console.log(
+      `${this.constructor.name}::update() [subject.name = ${this.subject.name} content = ${content}]`
+    )
+  }
+}

observer-pattern/ts/src/ConcreteObserver2.ts

@@ -0,0 +1,11 @@
+import { ObserverAPI } from './ObserverAPI.js'
+
+// 具体的观察者实现类，也可以看成订阅者，关联对应的主题类。
+// 不同的观察者可以对应不同的主题。
+export class ConcreteObserver2 extends ObserverAPI {
+  // 这里没有在构造器就绑定某个主题，而是从客户角度去注册观察者
+  // 观察者发出更新通知，观察者自行监听
+  update(content: string) {
+    console.log(`${this.constructor.name}::update() [content = ${content}]`)
+  }
+}

observer-pattern/ts/src/ConcreteSubject.ts

@@ -0,0 +1,20 @@
+import { ObserverAPI } from './ObserverAPI'
+import { Subject } from './Subject.js'
+
+// 观察者主题类，也是发布者，重写具体的通知方法。不同主题可以关联不同的观察者。
+export class ConcreteSubject extends Subject {
+  // 不同的主题类有自己的通知方法，批量通知绑定的观察者
+  notify(content: string) {
+    console.log(
+      this.constructor.name + '::notify() [content = ' + content + ']'
+    )
+
+    this.observers.forEach((observer: ObserverAPI) => {
+      observer.update(content)
+    })
+
+    // for (const observer of this.observers) {
+    //   observer[0].update(content)
+    // }
+  }
+}

observer-pattern/ts/src/ObserverAPI.ts

@@ -0,0 +1,16 @@
+// 观察者抽象父类，定义一些公共方法
+export class ObserverAPI {
+  name: string
+  constructor(name: string) {
+    this.name = name || this.constructor.name
+  }
+
+  // 观察者发出更新通知，观察者自行监听
+  update(content: string) {
+    console.log(`${this.constructor.name}::update() [content = ${content}]`)
+  }
+
+  setName(name: string) {
+    this.name = name
+  }
+}

observer-pattern/ts/src/Subject.ts

@@ -0,0 +1,36 @@
+import { ObserverAPI } from './ObserverAPI.js'
+
+// 定义抽象主题类或者接口，供具体主题类继承
+export abstract class Subject {
+  name: string
+  observers: Set<ObserverAPI>
+  constructor(name: string) {
+    this.name = name
+    this.observers = new Set<ObserverAPI>()
+  }
+
+  getName() {
+    return this.name
+  }
+
+  setName(name: string) {
+    this.name = name
+  }
+
+  register(observer: ObserverAPI) {
+    console.log(
+      this.constructor.name +
+        '::register() [observer = ' +
+        observer.constructor.name +
+        ']'
+    )
+    this.observers.add(observer)
+  }
+
+  remove(observer: ObserverAPI) {
+    this.observers.delete(observer)
+  }
+
+  // 通知由具体类来实现逻辑
+  abstract notify(name: string): void
+}

observer-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>

observer-pattern/ts/test/test.ts

@@ -0,0 +1,43 @@
+import { ConcreteSubject } from '../src/ConcreteSubject.js'
+import { ConcreteObserver } from '../src/ConcreteObserver.js'
+import { ConcreteObserver2 } from '../src/ConcreteObserver2.js'
+
+export function test() {
+  /**
+   * 观察者模式应用非常广泛，主要是观察者提前绑定到发布者
+   * 当发布者发布消息时，批量广播通知，而无需逐一通知
+   * 观察者监听到消息后自己决定采取哪一种行为
+   */
+
+  // 定义一个主题，也就是发布者
+  const concreteSubject = new ConcreteSubject('subject1')
+  // 再声明观察者，通过构造器注册到主题上s
+  const observer1 = new ConcreteObserver(concreteSubject, 'observer1')
+  // 也可以单独给主题注册一个新的观察者
+  const observer2 = new ConcreteObserver2('observer2')
+  concreteSubject.register(observer2)
+  // 可以移除观察者对象，可以打开注释试下
+  // concreteSubject.remove(observer1)
+
+  // 主题开始发布新通知，各观察者自动更新
+  concreteSubject.notify('hello, this is broadcast.')
+}
+
+// 执行测试
+;(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:
+ConcreteSubject::register() [observer = ConcreteObserver]
+ConcreteSubject::register() [observer = ConcreteObserver2]
+ConcreteSubject::notify() [content = hello, this is broadcast.]
+ConcreteObserver::update() [subject.name = subject1 content = hello, this is broadcast.]
+ConcreteObserver2::update() [content = hello, this is broadcast.]
+*/