设计模式

class Singleton {
  static #instance: Singleton | null = null
  name: string

  constructor(name: string) {
    if (Singleton.#instance) return Singleton.#instance
    this.name = name
    Singleton.#instance = this
  }
}

const a = new Singleton('first')
const b = new Singleton('second')

a === b // true
b.name  // 'first'

const Singleton = (() => {
  class Real {
    constructor(public name: string) {}
  }
  let instance: Real | null = null
  return (name: string) => (instance ??= new Real(name))
})()

class Product {
  constructor(public name: string) {}
  use(): void { console.log(`using ${this.name}`) }
}

class ProductFactory {
  create(name: string): Product {
    return new Product(name)
  }
}

const factory = new ProductFactory()
factory.create('widget').use() // using widget

class Query {
  elements: Element[]
  constructor(selector: string) {
    this.elements = [...document.querySelectorAll(selector)]
  }
  addClass(name: string): this { /* ... */ return this }
}

// 不暴露 new，调用方只需要一个统一入口
const $ = (selector: string): Query => new Query(selector)

class Doc {
  title = ''
  tags: string[] = []
  author: { name: string } = { name: '' }

  clone(): Doc {
    return structuredClone(this)
  }
}

const template = new Doc()
template.title = 'Hello'
template.tags.push('draft')

const copy = template.clone()
copy.title = 'World'
copy.tags.push('done')

template.title // 'Hello'
template.tags  // ['draft']
copy.title     // 'World'
copy.tags      // ['draft', 'done']   ← 深拷贝，互不影响

class QueryBuilder {
  private fields: string[] = ['*']
  private where: string[] = []
  private order: string | null = null
  private limit: number | null = null

  constructor(private table: string) {}

  select(...fields: string[]): this { this.fields = fields; return this }
  filter(cond: string): this        { this.where.push(cond); return this }
  orderBy(col: string): this        { this.order = col; return this }
  take(n: number): this             { this.limit = n; return this }

  build(): string {
    const parts = [`SELECT ${this.fields.join(', ')} FROM ${this.table}`]
    if (this.where.length) parts.push(`WHERE ${this.where.join(' AND ')}`)
    if (this.order)        parts.push(`ORDER BY ${this.order}`)
    if (this.limit)        parts.push(`LIMIT ${this.limit}`)
    return parts.join(' ')
  }
}

new QueryBuilder('users')
  .select('id', 'name')
  .filter('age > 18')
  .filter('active = true')
  .orderBy('id DESC')
  .take(10)
  .build()
// SELECT id, name FROM users WHERE age > 18 AND active = true ORDER BY id DESC LIMIT 10

interface Image {
  show(): void
}

class RealImage implements Image {
  constructor(private file: string) {
    console.log(`load ${file}`)
  }
  show(): void { console.log(`show ${this.file}`) }
}

class ImageProxy implements Image {
  private real: RealImage | null = null
  constructor(private file: string) {}

  show(): void {
    this.real ??= new RealImage(this.file)
    this.real.show()
  }
}

const img: Image = new ImageProxy('pic.png')
img.show()
// load pic.png
// show pic.png

interface Star {
  name: string
  phone: string
  price?: number
}

const star: Star = {
  name: 'Star',
  phone: '189****0511',
}

const agent = new Proxy(star, {
  get(target, key) {
    if (key === 'phone') return '经纪人：189****1234'
    return target[key as keyof Star]
  },
  set(target, key, value) {
    if (key === 'price' && value < 100000) throw new Error('低于底价')
    ;(target as Record<string | symbol, unknown>)[key] = value
    return true
  },
})

agent.phone // '经纪人：189****1234'

type EventHandler = (e: Event) => void

function bindEvent(
  elem: HTMLElement,
  type: string,
  selectorOrFn: string | EventHandler,
  fn?: EventHandler,
): void {
  let selector: string | null
  let handler: EventHandler
  if (typeof selectorOrFn === 'function') {
    selector = null
    handler = selectorOrFn
  } else {
    selector = selectorOrFn
    handler = fn!
  }
  elem.addEventListener(type, (e) => {
    if (!selector || (e.target as Element).matches(selector)) handler(e)
  })
}

// 同一个入口，参数自适应
declare const list: HTMLElement
declare const btn: HTMLElement
bindEvent(list, 'click', 'li', (e) => console.log((e.target as Element).textContent))
bindEvent(btn, 'click', () => console.log('clicked'))

interface Shape {
  draw(): void
}

class Circle implements Shape {
  draw(): void { console.log('画一个圆') }
}

class BorderDecorator implements Shape {
  constructor(private shape: Shape) {}
  draw(): void {
    this.shape.draw()
    console.log('加一圈红色边框')
  }
}

new BorderDecorator(new Circle()).draw()
// 画一个圆
// 加一圈红色边框

function tagged(tag: string) {
  return <T extends new (...args: any[]) => any>(
    _value: T,
    context: ClassDecoratorContext<T>,
  ) => {
    context.addInitializer(function (this: T) {
      ;(this as unknown as { tag: string }).tag = tag
    })
  }
}

@tagged('hero')
class Player {}

;(Player as unknown as { tag: string }).tag // 'hero'

function log<This, Args extends unknown[], Return>(
  value: (this: This, ...args: Args) => Return,
  context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,
) {
  return function (this: This, ...args: Args): Return {
    console.log(`call ${String(context.name)}`, args)
    const result = value.apply(this, args)
    console.log(`-> ${result}`)
    return result
  }
}

class Calculator {
  @log
  add(a: number, b: number): number { return a + b }
}

new Calculator().add(2, 4)
// call add [ 2, 4 ]
// -> 6

class EuropePlug {
  europeOutput(): string { return '220V · 欧标' }
}

class ChinaAdapter {
  constructor(private plug: EuropePlug) {}
  chinaOutput(): string {
    return `${this.plug.europeOutput()} -> 转换 -> 220V · 国标`
  }
}

new ChinaAdapter(new EuropePlug()).chinaOutput()
// 220V · 欧标 -> 转换 -> 220V · 国标

type AjaxOptions = { url: string; method?: string }
type AjaxResult = { done(cb: () => void): void }

declare function ajax(opts: AjaxOptions): AjaxResult

// 旧接口签名：ajax(opts).done(cb)
// 调用方期望：$.ajax(opts).done(cb)
const $ = {
  ajax: (options: AjaxOptions): AjaxResult => ajax(options),
}

// 实现维度：渲染器
interface Renderer {
  draw(shape: string): void
}

class CanvasRenderer implements Renderer {
  draw(shape: string): void { console.log(`canvas: ${shape}`) }
}

class SvgRenderer implements Renderer {
  draw(shape: string): void { console.log(`svg: ${shape}`) }
}

// 抽象维度：形状
abstract class ShapeBridge {
  constructor(protected renderer: Renderer) {}
  abstract render(): void
}

class CircleShape extends ShapeBridge {
  render(): void { this.renderer.draw('circle') }
}

class SquareShape extends ShapeBridge {
  render(): void { this.renderer.draw('square') }
}

new CircleShape(new CanvasRenderer()).render() // canvas: circle
new SquareShape(new SvgRenderer()).render()    // svg: square

interface FsNode {
  totalSize(): number
  print(prefix?: string): void
}

class FileNode implements FsNode {
  constructor(private name: string, private size: number) {}
  totalSize(): number { return this.size }
  print(prefix = ''): void {
    console.log(`${prefix}- ${this.name} (${this.size}B)`)
  }
}

class FolderNode implements FsNode {
  private children: FsNode[] = []
  constructor(private name: string) {}
  add(node: FsNode): this { this.children.push(node); return this }
  totalSize(): number {
    return this.children.reduce((sum, c) => sum + c.totalSize(), 0)
  }
  print(prefix = ''): void {
    console.log(`${prefix}+ ${this.name}/`)
    this.children.forEach((c) => c.print(prefix + '  '))
  }
}

const root = new FolderNode('root')
  .add(new FileNode('readme.md', 200))
  .add(
    new FolderNode('src')
      .add(new FileNode('index.js', 500))
      .add(new FileNode('utils.js', 300)),
  )

root.totalSize() // 1000
root.print()
// + root/
//   - readme.md (200B)
//   + src/
//     - index.js (500B)
//     - utils.js (300B)

// 内部状态：字形数据可复用
class Glyph {
  path: string
  constructor(public char: string) {
    this.path = `path-data-for-${char}` // 假装是几百 KB 的字形数据
  }
  drawAt(x: number, y: number): void {
    console.log(`draw "${this.char}" at (${x}, ${y})`)
  }
}

// 享元工厂：相同 char 复用一份 Glyph
const GlyphFactory = (() => {
  const cache = new Map<string, Glyph>()
  return {
    get(char: string): Glyph {
      if (!cache.has(char)) cache.set(char, new Glyph(char))
      return cache.get(char)!
    },
    size(): number { return cache.size },
  }
})()

const text = 'hello'
for (let i = 0; i < text.length; i++) {
  GlyphFactory.get(text[i]).drawAt(i * 10, 0)
}

GlyphFactory.size() // 4   ← h / e / l / o，'l' 复用了

type Strategy = (price: number) => number

const sale: Record<string, Strategy> = {
  '100-10': (price) => price - 10,
  '200-25': (price) => price - 25,
  '80%':    (price) => price * 0.8,
}

function calcPrice(price: number, type: string): number {
  const fn = sale[type]
  if (!fn) throw new Error(`不存在 ${type} 折扣`)
  return fn(price)
}

;(calcPrice as { add(type: string, fn: Strategy): void }).add = (type, fn) => {
  sale[type] = fn
}
;(calcPrice as { del(type: string): void }).del = (type) => {
  delete sale[type]
}

;(calcPrice as { add(type: string, fn: Strategy): void }).add(
  '70%',
  (price) => price * 0.7,
)
calcPrice(320, '70%') // 224

type ObserverFn<T> = (state: T) => void

class Observer<T> {
  constructor(public name: string, public fn: ObserverFn<T>) {}
}

class Subject<T> {
  private observers: Observer<T>[] = []

  constructor(private state: T) {}

  add(observer: Observer<T>): void {
    if (!this.observers.includes(observer)) this.observers.push(observer)
  }

  remove(observer: Observer<T>): void {
    this.observers = this.observers.filter((o) => o !== observer)
  }

  setState(state: T): void {
    this.state = state
    this.observers.forEach((o) => o.fn(state))
  }
}

const teacher = new Observer<string>('老师', (s) => console.log(`老师：${s}`))
const principal = new Observer<string>('校长', (s) => console.log(`校长：${s}`))

const student = new Subject<string>('上课睡觉')
student.add(teacher)
student.add(principal)
student.setState('打架')
// 老师：打架
// 校长：打架

type Listener = (...args: unknown[]) => void

class EventBus {
  private events: Record<string, Listener[]> = {}

  on(type: string, cb: Listener): void {
    ;(this.events[type] ??= []).push(cb)
  }

  off(type: string, cb?: Listener): void {
    if (!cb) { delete this.events[type]; return }
    if (!this.events[type]) return
    this.events[type] = this.events[type].filter((c) => c !== cb)
  }

  emit(type: string, ...args: unknown[]): void {
    this.events[type]?.forEach((cb) => cb(...args))
  }
}

const bus = new EventBus()
const onPing: Listener = (msg) => console.log(`ping: ${msg}`)

bus.on('ping', onPing)
bus.emit('ping', 'hello')   // ping: hello

bus.off('ping', onPing)
bus.emit('ping', 'world')   // 无输出

abstract class DataPipeline<Raw, Cleaned> {
  run(): number {
    const raw = this.fetch()
    const cleaned = this.transform(raw)
    return this.save(cleaned)
  }
  protected abstract fetch(): Raw
  protected transform(x: Raw): Cleaned { return x as unknown as Cleaned } // 默认透传
  protected abstract save(x: Cleaned): number
}

class CsvPipeline extends DataPipeline<string, string[][]> {
  protected fetch(): string { return 'a,b,c\n1,2,3' }
  protected transform(s: string): string[][] {
    return s.split('\n').slice(1).map((r) => r.split(','))
  }
  protected save(rows: string[][]): number {
    console.log('saved rows:', rows)
    return rows.length
  }
}

new CsvPipeline().run()
// saved rows: [ [ '1', '2', '3' ] ]   -> 1

class Range {
  constructor(
    private start: number,
    private end: number,
    private step = 1,
  ) {}

  *[Symbol.iterator](): IterableIterator<number> {
    for (let i = this.start; i < this.end; i += this.step) yield i
  }
}

const r = new Range(0, 10, 2)

for (const n of r) console.log(n)
// 0, 2, 4, 6, 8

console.log([...r]) // [0, 2, 4, 6, 8]

type Request = { user: string | null; qps: number }
type Response = { code: number; msg?: string; data?: string }

abstract class Handler {
  private next: Handler | null = null
  setNext(next: Handler): Handler { this.next = next; return next }
  handle(req: Request): Response | null {
    return this.next ? this.next.handle(req) : null
  }
}

class AuthHandler extends Handler {
  handle(req: Request): Response | null {
    if (!req.user) return { code: 401, msg: 'unauthorized' }
    return super.handle(req)
  }
}

class RateLimitHandler extends Handler {
  handle(req: Request): Response | null {
    if (req.qps > 100) return { code: 429, msg: 'rate limited' }
    return super.handle(req)
  }
}

class BusinessHandler extends Handler {
  handle(req: Request): Response {
    return { code: 200, data: `hello ${req.user}` }
  }
}

const chain = new AuthHandler()
chain.setNext(new RateLimitHandler()).setNext(new BusinessHandler())

chain.handle({ user: 'alice', qps: 10 })   // { code: 200, data: 'hello alice' }
chain.handle({ user: null,    qps: 10 })   // { code: 401, msg: 'unauthorized' }
chain.handle({ user: 'bob',   qps: 999 })  // { code: 429, msg: 'rate limited' }

interface Command {
  execute(): void
  undo(): void
}

class TextEditor {
  content = ''
  append(text: string): void { this.content += text }
  remove(len: number): void  { this.content = this.content.slice(0, -len) }
}

class AppendCommand implements Command {
  constructor(private editor: TextEditor, private text: string) {}
  execute(): void { this.editor.append(this.text) }
  undo(): void    { this.editor.remove(this.text.length) }
}

class CommandHistory {
  private stack: Command[] = []
  do(cmd: Command): void { cmd.execute(); this.stack.push(cmd) }
  undo(): void { this.stack.pop()?.undo() }
}

const editor = new TextEditor()
const history = new CommandHistory()

history.do(new AppendCommand(editor, 'hello '))
history.do(new AppendCommand(editor, 'world'))
editor.content // 'hello world'

history.undo()
editor.content // 'hello '

interface EditorMemento {
  readonly text: string
}

class Editor {
  constructor(public text = '') {}

  // 创建快照：导出内部状态
  save(): EditorMemento { return { text: this.text } }

  // 恢复快照
  restore(memento: EditorMemento): void { this.text = memento.text }
}

class Caretaker {
  private snapshots: EditorMemento[] = []
  push(memento: EditorMemento): void { this.snapshots.push(memento) }
  pop(): EditorMemento | undefined { return this.snapshots.pop() }
}

const editor = new Editor()
const history = new Caretaker()

editor.text = 'hello'
history.push(editor.save())

editor.text = 'hello world'
history.push(editor.save())

editor.text = 'oops'
editor.restore(history.pop()!) // 回到 'hello world'
editor.text                    // 'hello world'

interface JobState {
  next(ctx: Job): void
  describe(): string
}

class IdleState implements JobState {
  next(ctx: Job): void { ctx.setState(new WorkingState()) }
  describe(): string { return 'idle' }
}

class WorkingState implements JobState {
  next(ctx: Job): void { ctx.setState(new DoneState()) }
  describe(): string { return 'working...' }
}

class DoneState implements JobState {
  next(ctx: Job): void { ctx.setState(new IdleState()) }
  describe(): string { return 'done!' }
}

class Job {
  private state: JobState = new IdleState()
  setState(s: JobState): void { this.state = s }
  next(): void { this.state.next(this) }
  toString(): string { return this.state.describe() }
}

const job = new Job()
console.log(`${job}`) // idle
job.next(); console.log(`${job}`) // working...
job.next(); console.log(`${job}`) // done!
job.next(); console.log(`${job}`) // idle

interface ShapeVisitor<R> {
  visitCircle(node: CircleNode): R
  visitSquare(node: SquareNode): R
}

interface ShapeNode {
  accept<R>(v: ShapeVisitor<R>): R
}

class CircleNode implements ShapeNode {
  constructor(public r: number) {}
  accept<R>(v: ShapeVisitor<R>): R { return v.visitCircle(this) }
}

class SquareNode implements ShapeNode {
  constructor(public side: number) {}
  accept<R>(v: ShapeVisitor<R>): R { return v.visitSquare(this) }
}

// 操作 1：算面积
class AreaVisitor implements ShapeVisitor<number> {
  visitCircle(n: CircleNode): number { return Math.PI * n.r ** 2 }
  visitSquare(n: SquareNode): number { return n.side ** 2 }
}

// 操作 2：生成 SVG
class SvgVisitor implements ShapeVisitor<string> {
  visitCircle(n: CircleNode): string { return `<circle r="${n.r}" />` }
  visitSquare(n: SquareNode): string {
    return `<rect width="${n.side}" height="${n.side}" />`
  }
}

const shapes: ShapeNode[] = [new CircleNode(3), new SquareNode(4)]
const area = new AreaVisitor()
const svg = new SvgVisitor()

shapes.map((s) => s.accept(area)) // [ 28.274..., 16 ]
shapes.map((s) => s.accept(svg))  // [ '<circle r="3" />', '<rect width="4" height="4" />' ]

class ChatRoom {
  private users: User[] = []
  join(user: User): void { this.users.push(user); user.room = this }
  send(from: User, msg: string): void {
    this.users
      .filter((u) => u !== from)
      .forEach((u) => u.receive(from.name, msg))
  }
}

class User {
  room: ChatRoom | null = null
  constructor(public name: string) {}
  send(msg: string): void { this.room?.send(this, msg) }
  receive(from: string, msg: string): void {
    console.log(`[${this.name}] <- ${from}: ${msg}`)
  }
}

const room = new ChatRoom()
const a = new User('Alice')
const b = new User('Bob')
const c = new User('Carol')
room.join(a); room.join(b); room.join(c)

a.send('hi')
// [Bob]   <- Alice: hi
// [Carol] <- Alice: hi

type Context = Record<string, number>

interface Expr {
  evaluate(ctx?: Context): number
}

class NumberExpr implements Expr {
  constructor(private n: number) {}
  evaluate(): number { return this.n }
}

class VarExpr implements Expr {
  constructor(private name: string) {}
  evaluate(ctx: Context = {}): number { return ctx[this.name] ?? 0 }
}

class AddExpr implements Expr {
  constructor(private l: Expr, private r: Expr) {}
  evaluate(ctx: Context = {}): number {
    return this.l.evaluate(ctx) + this.r.evaluate(ctx)
  }
}

class MulExpr implements Expr {
  constructor(private l: Expr, private r: Expr) {}
  evaluate(ctx: Context = {}): number {
    return this.l.evaluate(ctx) * this.r.evaluate(ctx)
  }
}

// 表示 (x + 2) * 3
const expr = new MulExpr(
  new AddExpr(new VarExpr('x'), new NumberExpr(2)),
  new NumberExpr(3),
)

expr.evaluate({ x: 5 }) // 21