设计模式：行为型

摘要：行为型：观察者、策略、状态、迭代器、模板方法、职责链、中介者、命令、备忘录、解释器和访问者
参考：
《设计模式之美》
JavaScript 设计模式核⼼原理与应⽤实践
Java设计模式：23种设计模式全面解析（超级详细）
JavaScript设计模式es6（23种)
23种设计模式——创建型设计模式（5种）
设计模式：可复用面向对象软件的基础
等等
全文中的组合关系即关联关系

观察者模式

观察者模式指多个对象间存在一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。在观察者模式中，观察者需要直接订阅目标事件，在目标发出内容改变的事件后，直接接收事件并作出响应。观察者模式降低了目标与观察者之间的耦合关系，但两者之间的依赖关系并没有完全解除。
发布订阅模式属于广义上的观察者模式，在发布订阅模式中，发布者和订阅者之间多了一个事件调度中心。调度中心一方面从发布者接收事件，另一方面向订阅者发布事件。订阅者需要从调度中心订阅事件，避免了发布者和订阅者之间产生依赖关系。
通用实现流程：
1、创建抽象目标类，它提供了一个用于保存观察者对象的聚集类和增加、删除观察者对象的方法，以及通知所有观察者的抽象方法
2、创建具体目标类，它实现抽象目标中的通知方法，当具体目标的内部状态发生改变时，通知所有注册过的观察者对象
3、创建抽象观察者类，它是一个抽象类或接口，它包含了一个更新自己的抽象方法，当接到具体目标的更改通知时被调用
4、创建具体观察者类，实现抽象观察者中定义的抽象方法，以便在得到目标的更改通知时更新自身的状态

示例

1、工作群中有产品经理、技术人员 A、测试人员 B，产品经理定好开发安排并提醒其他人员开始新功能的开发

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// 发布者类 产品经理
class Publisher {
  constructor() {
    this.observers = []
  }
  // 增加订阅者
  add(observer) {
    this.observers.push(observer)
  }
  // 移除订阅者
  remove(observer) {
    this.observers.some((item, i) => {
      if (item === observer) {
        this.observers.splice(i, 1)
        return true
      }
      return false
    })
  }
  // 通知所有订阅者
  notify() {
    console.log("有新消息了")
    this.observers.map(observer => {
      observer.update(this)
    })
  }
}
// 观察者 
class Observer {
  constructor(name) {
    this.name = name
  }
  update() {
    console.log(`${this.name} 收到, 开始工作`)
  }
}
// 调用
const A = new Observer("技术 A") // 订阅者 A
const B = new Observer("测试 B") // 订阅者 B
const PM = new Publisher() // 发布者 PM
PM.add(A) // 发布者添加订阅者
PM.add(B)
PM.notify() // 发布者通知所有订阅者
// 有新消息了
// 技术 A 收到, 开始工作
// 测试 B 收到, 开始工作

2、Vue 数据双向绑定核心原理

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// 观察者
class Observer {
  constructor(data) {
    this.observe(data)
  }
  observe(data) {
    // 若 data 是一个对象，则遍历它
    if (data && typeof data === "object") {
      Object.keys(data).forEach((key) => {
        // defineReactive 方法会给目标属性装上“监听器”
        this.defineReactive(data, key, data[key])
      })
    }
  }
  defineReactive(data, key, val) {
    this.observe(val)
    let dep = new Dep()
    // 监听当前属性
    Object.defineProperty(data, key, {
      set(newVal) {
        // 发送通知
        dep.notify(key, newVal)
      }
    })
  }
}
// 订阅者
class Dep {
  constructor() {
    // 初始化订阅队列
    this.subs = []
    // 这里为了方便，手动添加一个默认的订阅者
    this.addSub({ update(key, newVal) { console.log(`${key} 更新为：${newVal}`) } })
  }
  // 增加订阅者
  addSub(sub) {
    this.subs.push(sub)
  }
  // 通知订阅者
  notify(key, newVal) {
    this.subs.forEach(sub => sub.update(key, newVal))
  }
}
// 调用
let target = {
  a: 1,
  b: true
}
new Observer(target)
target.a = 2

3、全局事件总线 Event Bus

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
class EventEmitter {
  constructor() {
    // handlers 是一个 map，用于存储事件与回调之间的对应关系
    this.handlers = {}
  }

  // on 方法用于安装事件监听器，它接受目标事件名和回调函数作为参数
  on(eventName, cb) {
    // 先检查一下目标事件名有没有对应的监听函数队列
    if (!this.handlers[eventName]) {
      // 如果没有，那么首先初始化一个监听函数队列
      this.handlers[eventName] = []
    }

    // 把回调函数推入目标事件的监听函数队列里去
    this.handlers[eventName].push(cb)
  }

  // emit 方法用于触发目标事件，它接受事件名和监听函数入参作为参数
  emit(eventName, ...args) {
    // 检查目标事件是否有监听函数队列
    if (this.handlers[eventName]) {
      // 这里需要对 this.handlers[eventName] 做一次浅拷贝，主要目的是为了避免通过 once 安装的监听器在移除的过程中出现顺序问题
      const handlers = this.handlers[eventName].slice()
      // 如果有，则逐个调用队列里的回调函数
      handlers.forEach((callback) => {
        callback(...args)
      })
    }
  }

  // 移除某个事件回调队列里的指定回调函数
  off(eventName, cb) {
    const callbacks = this.handlers[eventName]
    const index = callbacks.indexOf(cb)
    if (index !== -1) {
      callbacks.splice(index, 1)
    }
  }

  // 为事件注册单次监听器
  once(eventName, cb) {
    // 对回调函数进行包装，使其执行完毕自动被移除
    const wrapper = (...args) => {
      cb(...args)
      this.off(eventName, wrapper)
    }
    this.on(eventName, wrapper)
  }
}
// 调用
let bus = new EventEmitter()
let a = true // 初始化 a 为 true
bus.on("a", function (newVal) { // 添加监听
  console.log(`a 要更新为：${newVal}`)
})
bus.emit("a", false) // 触发事件

策略模式

策略模式定义一系列算法，将每个算法分别封装起来，让它们可以互相替换，且算法的变化不会影响使用算法的客户。策略模式的重心不是如何实现算法，而是如何组织这些算法，策略模式可以使算法的变化独立于使用它们的客户端（这里的客户端代指使用算法的代码）。环境类依赖策略类，但策略类不依赖环境类。可以通过策略模式来移除 if-else 分支判断，其本质是借助“查表法”的实现对象映射，根据 type 查表替代根据 type 分支判断。
通用实现流程：
1、创建抽象策略类，定义所有支持的算法的公共接口
2、创建具体策略类，封装所有算法，创建对象映射关系
3、使用映射关系的 type 替换 if-else 分支判断

示例

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 抽象策略类
class AbstractProcessor {
  constructor() {
    if (new.target === AbstractProcessor) {
      throw new Error("抽象类不能实例化!")
    }
  }
  calculate() {
    throw new Error("子类需重写该方法")
  }
}
// 具体策略类
class PreProcessor extends AbstractProcessor {
  calculate(originPrice) {
    return originPrice * 0.9
  }
}
class SaleProcessor extends AbstractProcessor {
  calculate(originPrice) {
    return originPrice * 0.8
  }
}
class BackProcessor extends AbstractProcessor {
  calculate(originPrice) {
    return originPrice * 0.6
  }
}
// 如果要添加新的促销活动
// class NewUserProcessor extends AbstractProcessor {
//   calculate(originPrice) {
//     return originPrice * 0.4
//   }
// }
// 环境类
class AskPrice {
  constructor() {
    this.processor = null
  }
  setProcessor(Processor) {
    this.Processor = Processor
  }
  getPrice(originPrice) {
    return this.processor.calculate(originPrice)
  }
}
let askPrice = new AskPrice()
askPrice.setProcessor(new BackProcessor())
console.log(askPrice.getPrice(100)) // 60

上面是标准的流程，每种策略都要有具体的类，但 JavaScript 有更简单的写法：将策略都设置为一个对象的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 策略对象 创建对象映射关系
let priceProcessor = {
  pre(originPrice) {
    return originPrice * 0.9
  },
  onSale(originPrice) {
    return originPrice * 0.8
  },
  back(originPrice) {
    return originPrice * 0.6
  }
}
// 如果要添加新的促销活动
// riceProcessor.newUser = function(originPrice) { return originPrice * 0.4 }
// 询价函数 映射关系确定分支
function askPrice(type, originPrice) {
  return priceProcessor[type](originPrice)
}
// 调用
askPrice("onSale", 100) // 80

2、验证表单

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<body>
  <form action="http:// xxx.com/register" id="registerForm" method="post">
    请输入用户名：<input type="text" name="userName" /> 
    请输入密码：<input type="text" name="password" /> 
    请输入手机号码：<input type="text" name="phoneNumber" />
    <button>提交</button>
  </form>
</body>
<script>
  // 策略对象
  let strategies = {
    isNonEmpty: function (value, errorMsg) {
      if (value === '') {
        return errorMsg
      }
    },
    minLength: function (value, length, errorMsg) {
      if (value.length < length) {
        return errorMsg
      }
    },
    isMobile: function (value, errorMsg) {
      if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
        return errorMsg
      }
    }
  }
  // 环境类
  class Validator {
    constructor() {
      this.cache = []
    }
    add(dom, rules) {
      rules.map(rule => {
        let strategyAry = rule.strategy.split(':')
        let strategy = strategyAry.shift()
        strategyAry.unshift(dom.value)
        strategyAry.push(rule.errorMsg)
        this.cache.push(function () {
          return strategies[strategy](...strategyAry)
        })
      })
    }
    start() {
      for (let i = 0; i < this.cache.length; i++) {
        let errorMsg = this.cache[i]()
        if (errorMsg) return errorMsg
      }
    }
  }
  // 调用
  const registerForm = document.getElementById('registerForm')
  // 绑定确认回调事件
  registerForm.onsubmit = function (e) {
    let errorMsg = validataFunc(this) // 将具体验证逻辑抽离
    if (errorMsg) {
      alert(errorMsg)
    } else {
      alert("验证通过")
    }
    e.preventDefault()
  }
  // 验证逻辑
  function validataFunc(form) {
    let validator = new Validator()
    validator.add(form.userName, [{
      strategy: 'isNonEmpty',
      errorMsg: '用户名不能为空'
    }, {
      strategy: 'minLength:8',
      errorMsg: '用户名长度不能小于 8 位'
    }])
    validator.add(form.password, [{
      strategy: 'isNonEmpty',
      errorMsg: '密码不能为空'
    }, {
      strategy: 'minLength:6',
      errorMsg: '密码长度不能小于 6 位'
    }])
    return validator.start()
  }
</script>
</html>

状态模式

状态模式允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。简单来说，就是当控制一个对象状态转换的条件表达式过于复杂时，把相关“判断逻辑”提取出来，用不同的类进行表示，系统处于哪种情况，直接使用相应的状态类对象进行处理，这样能把原来复杂的逻辑判断简单化，消除了 if-else、switch-case 等冗余语句，代码更有层次性，并且具备良好的扩展力。要注意的是：状态模式中的环境类与各个状态类之间是相互依赖的关系。策略模式是让用户指定更换的策略算法，也就是说客户端必须了解所有策略。而状态模式是状态在满足一定条件下的自动更换，用户无法指定状态，最多只能设置初始状态，客户端也就不需要了解状态，只需要调用方法即可。
通用实现流程：
1、创建抽象状态类，定义一个接口，用以封装环境对象中的特定状态所对应的行为，可以有一个或多个行为
2、创建具体状态类，实现抽象状态所对应的行为，并且在需要的情况下进行状态切换
3、创建环境类，定义客户端需要的接口，内部维护一个当前状态，并负责具体状态的切换

示例

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// 抽象状态类
class AbstractLight {
  constructor(state) {
    if(new.target === AbstractLight) {
      throw new Error("抽象类不能实例化!")
    }
    this.state = state
  }
  show() {
    throw new Error("子类需重写该方法")
  }
}
// 具体状态类
class RedLight extends AbstractLight {
  constructor(state) {
    super(state)
  }
  show() {
    console.log("当前是红灯")
    this.state.setState(this.state.yellowLight)
  }
}
class YellowLight extends AbstractLight {
  constructor(state) {
    super(state)
  }
  show() {
    console.log("当前是黄灯")
    this.state.setState(this.state.greenLight)
  }
}
class GreenLight extends AbstractLight {
  constructor(state) {
    super(state)
  }
  show() {
    console.log("当前是绿灯")
    this.state.setState(this.state.redLight)
  }
}
// 环境类
class State {
  constructor () {
    this.redLight = new RedLight(this)
    this.yellowLight = new YellowLight(this)
    this.greenLight = new GreenLight(this)
    this.setState(this.redLight) // 初始化为红灯
  }
  setState (state) {
    this.currState = state
  }
}
// 调用
const state = new State()
state.currState.show() // 当前是红灯
state.currState.show() // 当前是黄灯
state.currState.show() // 当前是绿灯

2、咖啡机制作多种咖啡

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
33
34
35
36
37
38
39
40
41
42
43
44
class CoffeeMaker {
  constructor() {
    // 初始化状态
    this.state = "addCoffee"
  }
  // 为实例对象添加属性，可以直接使用咖啡机（环境类）的属性，这样可以省略具体状态类的编写
  stateToProcessor = {
    that: this,
    addCoffee() {
      console.log("开始制作咖啡")
      console.log("我只吐黑咖啡")
      this.that.state = "addMilk" // 改变状态
    },
    addMilk() {
      console.log("加点奶")
      this.that.state = "addVanillaLatte"
    },
    addVanillaLatte() {
      console.log("再加香草糖浆")
      this.that.state = "addChocolates"
    },
    addChocolates() {
      console.log("再加巧克力")
      this.that.state = "addCoffee"
    }
  }
  // 关注咖啡机状态切换函数
  changeState() {
    if (!this.stateToProcessor[this.state]) {
      return
    }
    this.stateToProcessor[this.state]()
  }
}
const mk = new CoffeeMaker()
mk.changeState()
mk.changeState()
mk.changeState()
mk.changeState()
// 开始制作咖啡
// 我只吐黑咖啡
// 加点奶
// 再加香草糖浆
// 再加巧克力

迭代器模式

迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素，而又不暴露该对象的内部表示。
通用实现流程：
1、创建抽象迭代器类，定义访问和遍历聚合元素的接口，通常包含 hasNext()、first()、next() 等方法
2、创建具体迭代器类，实现抽象迭代器接口中所定义的方法，完成对聚合对象的遍历，记录遍历的当前位置
3、创建抽象聚合类，定义存储、添加、删除聚合对象以及创建迭代器对象的接口
4、创建具体聚合类，实现抽象聚合类，返回一个具体迭代器的实例

示例

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// 抽象迭代器类
class AbstractIterator {
  constructor(list) {
    if (new.target === AbstractIterator) {
      throw new Error("抽象类不能实例化!")
    }
    this.list = list
    this.index = 0
  }
  next() {
    throw new Error("子类需重写该方法")
  }
  hasNext() {
    throw new Error("子类需重写该方法")
  }
  first() {
    throw new Error("子类需重写该方法")
  }
}
// 具体迭代器类
class Iterator extends AbstractIterator {
  constructor(list) {
    super(list)
  }
  next() {
    if (this.hasNext()) {
      return this.list[this.index++]
    }
    return null
  }
  hasNext() {
    if (this.index >= this.list.length) {
      return false
    }
    return true
  }
  first() {
    this.index = 0
    return this.list[this.index++]
  }
}
// 抽象聚合类
class AbstractAggregate {
  constructor(list) {
    if (new.target === AbstractAggregate) {
      throw new Error("抽象类不能实例化!")
    }
    this.list = list
  }
  add() {
    throw new Error("子类需重写该方法")
  }
  remove() {
    throw new Error("子类需重写该方法")
  }
  getIterator() {
    throw new Error("子类需重写该方法")
  }
}
// 具体聚合类
class Aggregate extends AbstractAggregate {
  constructor(list) {
    super(list)
  }
  add(item) {
    this.list.push(item)
  }
  remove(index) {
    this.list.splice(index, 1)
  }
  getIterator() {
    return new Iterator(this.list)
  }
}
const aggregate = new Aggregate([1,2,3])
const iterator = aggregate.getIterator()
while (iterator.hasNext()) {
  console.log(iterator.next())
}
// 1
// 2
// 3

2、使用 ES6 提供的生成器函数

1
2
3
4
5
6
7
8
9
10
11
function* iteratorGenerator(arr) {
  let i = 0
  yield arr[i++]
  yield arr[i++]
  yield arr[i++]
}
const iterator = iteratorGenerator([1,2,3])
iterator.next() // {value: 1, done: false}
iterator.next() // {value: 2, done: false}
iterator.next() // {value: 3, done: false}
iterator.next() // {value: undefined, done: true}

3、迭代器生成函数（使用闭包保存并控制索引变化）

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
// 定义生成器函数，入参是任意集合
function iteratorGenerator(list) {
  // idx 记录当前访问的索引
  let idx = 0
  // len 记录传入集合的长度
  let len = list.length
  return {
    // 自定义next方法
    next: function() {
      // 如果索引还没有超出集合长度，done 为 false
      let done = idx >= len
      // 如果 done 为 false，则可以继续取值
      let value = !done ? list[idx++] : undefined
      // 将当前值与遍历是否完毕（done）返回
      return {
        value: value,
        done: done
      }
    }
  }
}
let iterator = iteratorGenerator([1, 2, 3])
iterator.next() // {value: 1, done: false}
iterator.next() // {value: 2, done: false}
iterator.next() // {value: 3, done: false}
iterator.next() // {value: undefined, done: true}

模板方法模式

模板方法模式在一个方法中定义一个算法骨架，并将某些步骤推迟到子类中实现。模板方法模式可以让子类在不改变算法整体结构的情况下，重新定义算法中的某些步骤。模板方法模式有两大作用：复用和扩展。复用指的是所有的子类可以复用父类中提供的模板方法的代码。扩展是指框架通过模板方法模式提供功能扩展点，让框架用户可以在不修改框架源码的情况下，基于扩展点定制化框架的功能。同步回调看起来更像模板方法模式，异步回调更像观察者模式，但回调基于组合关系来实现，模板方法模式基于继承关系来实现，回调比模板方法模式更加灵活。
通用实现流程：
1、创建抽象模板类，实现模板方法和若干个基本方法。模板方法定义了算法的股价，按某种顺序调用其他的基本方法。基本方法则是整个算法中的一个步骤，可以有抽象类实现，也可以由子类继承重写
2、创建具体实现类，实现或重写抽象模板类中定义的方法

示例

冲咖啡、奶粉等饮料

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// 抽象模板类
class Beverage {
  constructor() {
    if (new.target === Beverage) {
      throw new Error("抽象类不能实例化!")
    }
  }
  // 共用
  boilWater() {
    console.log('水已经沸腾')
  }
  // 添加饮品
  brewDrink() {
    throw new Error("子类需重写该方法")
  }
  // 添加调味品
  addCondiment() {
    throw new Error("子类需重写该方法")
  }
  // 共用
  pourCup() {
    console.log('将热水倒入杯中')
  }
  // 搅拌
  stirDrinks() {
    console.log('充分搅拌')
  }
  init() {
    this.boilWater()
    this.brewDrink()
    this.addCondiment()
    this.pourCup()
    this.stirDrinks()
  }
}
// 具体实现类
class MakeCoffee extends Beverage{
  brewDrink() {
    console.log("杯中倒入咖啡粉")
  }
  addCondiment() {
    console.log("添加白糖")
  }
}
class MakeMilk extends Beverage{
  brewDrink() {
    console.log("杯中倒入奶粉")
  }
  addCondiment() {
    console.log("添加蜂蜜")
  }
}
// 调用
let coffee = new MakeCoffee()
coffee.init()
// 水已经沸腾
// 杯中倒入咖啡粉
// 添加白糖
// 将热水倒入杯中
// 充分搅拌
let milk = new MakeMilk()
milk.init()
// 水已经沸腾
// 杯中倒入奶粉
// 添加蜂蜜
// 将热水倒入杯中
// 充分搅拌

职责链模式

职责链模式也叫责任链模式，它将请求的发送和接收解耦，让多个接收对象都有机会处理这个请求。将这些接收对象串成一条链，并沿着这条链传递这个请求，直到链上的某个接收对象能够处理它为止。
通用实现流程：
1、创建抽象处理者类，定义一个处理请求的接口，包含抽象处理方法和一个后继连接
2、创建具体处理者类，继承并实现抽象类的处理方法，判断判断能否处理本次请求，如果可以处理请求则处理，否则将该请求转给它的后继者
3、创建处理链，并向链头的具体处理者对象提交请求，它不关心处理细节和请求的传递过程

示例

请假审批，需要组长审批、经理审批、总监审批

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 抽象处理者类
class AbstractAction {
  constructor(name) {
    this.name = name
    this.next = null
  }
  setNext(action) {
    this.next = action
  }
  handle() {
    throw new Error("子类需重写该方法")
  }
}
// 具体处理者类
// 组长
class Action1 extends AbstractAction {
  handle() {
    console.log(`组长 ${this.name} 同意`)
    if (this.next) {
      this.next.handle()
    } else {
      console.log("没有经理审批！")
    }
  }
}
// 经理
class Action2 extends AbstractAction {
  handle() {
    console.log(`经理 ${this.name} 同意`)
    if (this.next) {
      this.next.handle()
    } else {
      console.log("没有总监审批！")
    }
  }
}
// 总监
class Action3 extends AbstractAction {
  handle() {
    console.log(`总监 ${this.name} 同意`)
  }
}
// 创建处理链
let a1 = new Action1("小王")
let a2 = new Action2("大王")
let a3 = new Action3("老王")
a1.setNext(a2)
a2.setNext(a3)
a1.handle()
// 组长 小王 同意
// 经理 大王 同意
// 总监 老王 同意

中介者模式

中介者模式定义一个中介对象来封装一系列对象之间的交互，使原有对象之间的耦合松散，且可以独立地改变它们之间的交互。中介者模式将一组对象之间的交互关系（或者依赖关系）从多对多（网状关系）转换为一对多（星状关系）。观察者模式和中介模式都是为了实现参与者之间的解耦，简化交互关系。两者的不同在于应用场景上。在观察者模式的应用场景中，参与者之间的交互比较有条理，一般都是单向的，一个参与者只有一个身份，要么是观察者，要么是被观察者。而在中介模式的应用场景中，参与者之间的交互关系错综复杂，既可以是消息的发送者、也可以同时是消息的接收者。但当同事类越多时，中介者就会越臃肿，变得复杂且难以维护。
通用实现流程：
1、创建抽象中介者类，定义同事对象注册与转发同事对象信息的抽象方法
2、创建具体中介者类，实现中介者接口，定义一个列表来管理同事对象，协调各个同事角色之间的交互关系，因此它依赖于同事角色
3、创建抽象同事类，保存中介者对象，提供同事对象交互的抽象方法，实现所有相互影响的同事类的公共功能
4、创建具体同事类，实现抽象类中的方法，当需要与其他同事对象交互时，由中介者对象负责后续的交互

示例

二手房交易平台

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
// 抽象中介者类 中介公司
class Medium {
  constructor() {
    if (new.target === Medium) {
      throw new Error("抽象类不能实例化!")
    }
  }
  // 用户注册
  register() {
    throw new Error("子类需重写该方法")
  }
  // 转发
  relay() {
    throw new Error("子类需重写该方法")
  }
}
// 具体中介者类 房地产中介
class EstateMedium extends Medium {
  constructor() {
    super()
    this.members = new Map()
  }
  register(member) {
    if (!this.members.has(member.name)) {
      this.members.set(member.name, member)
      member.setMedium(this)
    }
  }
  relay(from, msg) {
    this.members.forEach(item => {
      if (item.name !== from) {
        item.receive(from, msg)
      }
    })
  }
}
// 抽象同事类 客户
class Customer {
  constructor(name) {
    if (new.target === Customer) {
      throw new Error("抽象类不能实例化!")
    }
    this.name = name
    this.medium = null
  }
  setMedium(medium) {
    this.medium = medium
  }
  send(msg) {
    throw new Error("子类需重写该方法")
  }
  receive(from, msg) {
    throw new Error("子类需重写该方法")
  }
}
// 具体同事类 卖方
class Seller extends Customer {
  constructor(name) {
    super(name)
  }
  send(msg) {
    console.log(`卖方界面：${this.name}说:${msg}`)
    this.medium.relay(this.name, msg)
  }
  receive(from, msg) {
    console.log(`卖方界面：${from}说:${msg}`)
  }
}
// 具体同事类 买方
class Buyer extends Customer {
  constructor(name) {
    super(name)
  }
  send(msg) {
    console.log(`买方界面：${this.name}说:${msg}`)
    this.medium.relay(this.name, msg)
  }
  receive(from, msg) {
    console.log(`买方界面：${from}说:${msg}`)
  }
}
const medium = new EstateMedium() // 地产中介
const member1 = new Seller("张三(卖方)")
const member2 = new Buyer("李四(买方)")
medium.register(member1)
medium.register(member2)
member1.send("我有一套88平的房子")
member2.send("是两室还是三室的？")

有两点可以精简优化：
1、将具体中介者对象实现成为单例
2、同事对象不持有中介者，在需要的时候直接获取中介者单例对象并调用

命令模式

命令模式将一个请求封装为一个对象，使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通，这样方便将命令对象进行储存、传递、调用、增加与管理。但是每一个命令都要设计一个具体命令类，增加了系统的复杂性。在代码实现上来看，就是两个对象之间又增加了一个包装对象（命令类），通过这个对象，将请求者和接收者解耦。
通用实现流程：
1、创建抽象命令类，定义执行命令的抽象方法
2、创建具体命令类，继承并实现抽象类中的方法，它拥有接收者对象，并通过调用接收者的功能来完成命令要执行的操作
3、创建接收者类，实现执行命令功能的相关操作，它是具体命令对象业务的真正实现者
4、创建请求者类，它是请求的发送者，通常拥有很多的命令对象，并通过访问命令对象来执行相关请求，它不直接访问接收者

示例

点餐

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// 抽象命令类
class Breakfast {
  constructor(name) {
    if (new.target === Breakfast) {
      throw new Error("抽象类不能实例化!")
    }
  }
  cooking() {
    throw new Error("子类需重写该方法")
  }
}
// 具体命令类 
// 肠粉
class ChangFen extends Breakfast {
  constructor() {
    super()
    this.receiver = new ChangFenChef()
  }
  cooking() {
    this.receiver.cooking()
  }
}
// 馄饨
class HunTun extends Breakfast {
  constructor() {
    super()
    this.receiver = new HunTunChef()
  }
  cooking() {
    this.receiver.cooking()
  }
}
// 接收者类
// 肠粉厨师
class ChangFenChef {
  cooking() {
    console.log("制作肠粉")
  }
}
// 混沌厨师
class HunTunChef {
  cooking() {
    console.log("制作混沌")
  }
}
// 请求者类 服务员
class Waiter {
  constructor() {
    this.changFen = null
    this.hunTun = null
  }
  setChangFen(changFen) {
    this.changFen = changFen
  }
  setHunTun(hunTun) {
    this.hunTun = hunTun
  }
  chooseChangFen() {
    this.changFen.cooking()
  }
  chooseHunTun() {
    this.hunTun.cooking()
  }
}
// 
let food1 = new ChangFen()
let food2 = new HunTun()
let waiter = new Waiter()
waiter.setChangFen(food1) // 设置肠粉菜单
waiter.setHunTun(food2) // 设置河粉菜单
waiter.chooseChangFen() // 选择肠粉
waiter.chooseHunTun() // 选择馄饨
// 制作肠粉
// 制作混沌

备忘录模式

备忘录模式又叫快照模式，它是指在不破坏封装性的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态，以便以后当需要时能将该对象恢复到原先保存的状态。但如果要保存的内部状态信息过多或者特别频繁，将会占用比较大的内存资源。
通用实现流程：
1、创建发起人类，记录当前时刻的内部状态信息，提供创建备忘录和恢复备忘录数据的功能，实现其他业务功能，它可以访问备忘录里的所有信息
2、创建备忘录类，负责存储发起人的内部状态，在需要的时候提供这些内部状态给发起人
3、创建管理者类，对备忘录进行管理，提供保存与获取备忘录的功能，但其不能对备忘录的内容进行访问与修改

示例

编辑器恢复编辑的内容

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// 发起人类
class Editor {
  constructor() {
    this.content = null
  }
  setContent(content) {
    this.content = content
  }
  getContent() {
    return this.content
  }
  saveContentToMemento() {
    return new Memento(this.content)
  }
  getContentFromMemento(memento) {
    this.content = memento.getContent()
  }
}
// 备忘录类
class Memento {
  constructor(content) {
    this.content = content
  }
  getContent() {
    return this.content
  }
}
// 管理者类
class CareTaker {
  constructor() {
    this.list = []
  }
  add(memento) {
    this.list.push(memento)
  }
  get(index) {
    return this.list[index]
  }
}
// 调用
let editor = new Editor()
let careTaker = new CareTaker()
editor.setContent(111)
careTaker.add(editor.saveContentToMemento())
editor.setContent(222)
console.log(editor.getContent()) // 222
careTaker.add(editor.saveContentToMemento())
editor.getContentFromMemento(careTaker.get(0))
console.log(editor.getContent()) // 111
editor.setContent(333)
console.log(editor.getContent()) // 333
careTaker.add(editor.saveContentToMemento())
editor.getContentFromMemento(careTaker.get(1))
console.log(editor.getContent()) // 222

解释器模式

解释器模式是指给分析对象定义一个语言，并定义该语言的文法表示，再设计一个解析器来解释语言中的句子。要了解其中的几个概念：
1、文法是指用于描述语言的语法结构的形式规则。
2、句子是语言的基本单位，是语言集中的一个元素，它由终结符构成，能由“文法”推导出。
3、语法树是句子结构的一种树型表示，它代表了句子的推导结果，它有利于理解句子语法结构的层次。
4、终结符：通俗的说就是不能单独出现在推导式左边的符号，也就是说终结符不能再进行推导。
5、非终结符：不是终结符的都是非终结符。非终结符可理解为一个可拆分元素，而终结符是不可拆分的最小元素。
解释器模式的结构与组合模式相似，不过其包含的组成元素比组合模式多，而且组合模式是对象结构型模式，而解释器模式是类行为型模式。解释器模式可以通过继承等机制来改变或扩展文法，而且每个表达式节点类都是相似的，实现起来较为容易。但因为解释器模式使用了大量的循环和递归调用，所以执行效率比较低。而且每条规则至少需要定义一个类，规则越多，系统越难以维护。在软件开发中的应用场景也比较少。解释器模式的代码实现的核心思想，就是将语法解析的工作拆分到各个小类中，以此来避免大而全的解析类。一般的做法是，将语法规则拆分一些小的独立的单元，然后对每个单元进行解析，最终合并为对整个语法规则的解析。
通用实现流程：
1、创建抽象表达式类，定义解释器的接口，约定解释器的解释操作，主要包含解释方法 interpret
2、创建终结符表达式类和非终结符表达式，它们是抽象表达式的子类，文法中的每一个终结符或非终结符都有一个具体终结表达式与之相对应
3、创建环境类，通常包含各个解释器需要的数据或是公共的功能，一般用来传递被所有解释器共享的数据，后面的解释器可以从这里获取这些值

示例

公交车读卡器播报并扣费

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 抽象表达式类
class Expression {
  constructor() {
    if (new.target === Expression) {
      throw new Error("抽象类不能实例化!")
    }
  }
  interpret() {
    throw new Error("子类需重写该方法")
  }
}
// 终结符表达式类
class TerminalExpression extends Expression {
  constructor(list) {
    super()
    this.list = list
  }
  interpret(info) {
    return this.list.includes(info)
  }
}
// 非终结符表达式类
class AndExpression extends Expression {
  constructor(city, person) {
    super()
    this.city = city
    this.person = person
  }
  interpret(info) {
    let list = info.split("的")
    return this.city.interpret(list[0]) && this.person.interpret(list[1])
  }
}
// 环境类
class Context {
  constructor() {
    this.citys = ["北京", "天津"]
    this.persons = ["老人", "儿童"]
    this.city = new TerminalExpression(this.citys)
    this.person = new TerminalExpression(this.persons)
    this.cityPerson = new AndExpression(this.city, this.person)
  }
  freeRide(info) {
    this.cityPerson.interpret(info) ? console.log(`${info}，您本次乘车免费！`) : console.log(`${info}，本次乘车扣费 2 元！`)
  }
}
// 调用
let bus = new Context()
bus.freeRide("北京的老人")
bus.freeRide("天津的儿童")
bus.freeRide("北京的年轻人")

访问者模式

访问者模式将作用于某种数据结构中的各元素的操作分离出来封装成独立的类，使其在不改变数据结构的前提下可以添加作用于这些元素的新的操作，为数据结构中的每个元素提供多种访问方式。它将对数据的操作与数据结构进行分离，是行为类模式中最复杂的一种模式。实现访问者模式的关键是如何将作用于元素的操作分离出来封装成独立的类，而 JavaScript 是弱类型的语言，使用 call、apply 可以很简单的实现访问者模式。
通用实现流程：
1、创建抽象访问者类，定义一个访问具体元素的接口，为每个具体元素类对应一个访问操作 visit() ，该操作中的参数类型标识了被访问的具体元素
2、创建具体访问者类，继承并实现抽象访问者类中的方法，确定访问者访问一个元素时该做什么
3、创建抽象元素类，声明一个包含接受操作 accept() 的接口，被接受的访问者对象作为 accept() 方法的参数
4、创建具体元素类，实现抽象元素角色提供的 accept() 操作，其方法体通常都是 visitor.visit(this) ，另外具体元素中可能还包含本身业务逻辑的相关操作
5、创建对象结构类，提供让访问者对象遍历容器中的所有元素的方法

示例

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
// 抽象访问者类 公司
class Company {
  constructor() {
    if (new.target === Company) {
      throw new Error("抽象类不能实例化!")
    }
  }
  visit() {
    throw new Error("子类需重写该方法")
  }
}
// 具体访问者类
// 艺术公司
class ArtCompany extends Company {
  visit(el) {
    if (el instanceof Paper) {
      return "画图"
    } else if (el instanceof Cuprum) {
      return "设计铜像"
    }
  }
}
// 造钱公司
class Mint extends Company {
  visit(el) {
    if (el instanceof Paper) {
      return "造纸币"
    } else if (el instanceof Cuprum) {
      return "造铜币"
    }
  }
}
// 抽象元素类
class Material {
  constructor() {
    if (new.target === Material) {
      throw new Error("抽象类不能实例化!")
    }
  }
  accept() {
    throw new Error("子类需重写该方法")
  }
}
// 具体元素类
// 纸
class Paper extends Material {
  accept(visitor) {
    return visitor.visit(this)
  }
}
// 铜
class Cuprum extends Material {
  accept(visitor) {
    return visitor.visit(this)
  }
}
// 对象结构类
class SetMaterial {
  constructor() {
    this.list = []
  }
  accept(visitor) {
    let str = ""
    this.list.map(item => {
      str += item.accept(visitor) + "\n"
    })
    return str
  }
  add(el) {
    this.list.push(el)
  }
  remove(el) {
    this.list = this.list.filter((item) => item !== el)
  }
}
let setMaterial = new SetMaterial()
setMaterial.add(new Paper())
setMaterial.add(new Cuprum())
let pro1 = setMaterial.accept(new ArtCompany())
let pro2 = setMaterial.accept(new Mint())
console.log(pro1)
// 画图
// 设计铜像
console.log(pro2)
// 造纸币
// 造铜币

2、让对象拥有像数组的 push 方法

1
2
3
4
5
6
7
8
9
10
class Visitor {
  push() {
    return Array.prototype.push.apply(this, arguments)
  }
}
let obj = new Visitor()
obj.push("first")
obj.push(10)
console.log(obj[0]) // first
console.log(obj.length) // 2

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

持续学习