# 设计模式

源自,设计模式介绍 (opens new window)

设计模式,是软件设计中常见问题的典型解决方案。

模式包含哪些内容?

  • 意图:简单描述问题和解决方案
  • 动机:进一步解释问题并说明模式会如何提供解决方案
  • 结构:展示模式的每个部分和它们之间的关系
  • 不同语言中实现:提供流行编程语言的代码

# 创建型设计模式

用于描述“怎么创建对象”。
它的主要特点是“将对象的创建与使用分离”。
如,单例、原型、工厂方法、抽象工厂、建造者等5种创建型模式。

提供创建对象的机制,增加已有代码的灵活性和可复用性。

# 1. 简单工厂模式

又称静态工厂模式,由一个工厂对象决定创建某一种产品对象类的实例。主要用来创建同一类对象

# 2. 工厂方法模式

定义一个用于创建产品的接口,由子类决定生产什么产品.

# 3. 抽象工厂模式

提供一个创建产品族的接口,其每个子类可以生产一系列相关的产品。

# 4. 建造者模式

将一个复杂对象分解成多个相对简单的部分,然后根据不同需要分别创建它们,最后构建成该复杂对象。

# 5. 原型模式

将一个对象作为原型,通过对其进行复制而克隆出多个和原型类似的新实例。

# 6. 单例模式

某个类只能生成一个实例,该类提供了一个全局访问点供外部获取该实例,其拓展是有限多例模式。

# 结构性设计模式

用于描述“如何将类或对象按某种布局组成更大的结构”。
如,代理、适配器、桥接、装饰、外观、享元、组合等7种结构型模式。

如何将对象和类组装成较大的结构,并同时保持结构的灵活和高效。

# 7. 外观模式

# 8. 适配器模式

# 9. 代理模式

# 10. 装饰者模式

# 11. 桥接模式

# 12. 组合模式

# 13. 享元模式

# 行为型设计模式

用于描述“类或对象之间怎样相互协作共同完成单个对象无法单独完成的任务,以及怎样分配职责”。
如,模板方法、策略、命令、职责链、状态、观察者、中介者、迭代器、访问者、备忘录模式、解释器等11中行为模式。

负责对象间的高校沟通和职责委派

# 14. 模版方法模式

# 15. 观察者模式

又称 发布-订阅模式,核心 API:on、emit

  • on:订阅
  • emit:发布
  • off:删除
class customEventEmitter {
  constructor() {
    this.eventMap = {}
  }

  on = (type, handler) => {
    if (!(handler instanceof Function)) {
      throw new Error('need a function parameter')
    }
    if (!this.eventMap[type]) {
      this.eventMap[type] = []
    }
    this.eventMap[type].push(handler)
  }

  emit = (type, payload) => {
    if (this.eventMap[type]) {
      this.eventMap[type].forEach((handler, index) => {
        handler(payload)
      })
    }
  }

  off = (type, handler) => {
    if (this.eventMap[type]) {
      const idx = this.eventMap[type].indexOf(handler)
      if (idx >= 0) {
        this.eventMap[type].splice(this.eventMap[type].indexOf(handler) >>> 0, 1)
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

测试

const e = new customEventEmitter()

const fn1 = p => console.log('fn1:', p)
const fn2 = p => console.log('fn2:', p)

e.on('one', fn1)
e.on('one', fn2)

e.emit('one', 123)
// fn2: 123
// fn1: 123

e.off('one', fn2)

e.emit('one', 123)
// fn1: 123
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 16. 状态模式

# 17. 策略模式

# 18. 职责链模式

# 19. 命令行模式

# 20. 访问者模式

# 21. 中介者模式

# 22. 备忘录模式

# 23. 迭代器模式

# 24. 解释器模式

# 技巧性设计模式

# 25. 链模式

# 26. 委托模式

# 27. 数据访问对象模式

# 28. 节流模式

# 29. 简单模版模式

# 30. 惰性模式

# 31. 参与者模式

# 32. 等待者模式

# 架构型设计模式

# 33. 同步模块模式

# 34. 异步模块模式

# 35. Widget 模式

# 36. MVC 模式

# 37. MVP 模式

# 38. MVVM 模式