JS设计模式之发布/订阅模式、观察者模式

1.发布/订阅模式

/**
 * 发布订阅者模式,
 * 每一个订阅者都是相互独立的只和发布者有关系，
 * 与发布者是一对多的关系，也可以是一对一的关系。
 */
function pubSub() {
  var topics = {};
  function subScribe(topic, fn) {
    if (!topics[topic]) {
      topics[topic] = [];
    }
    //并未去重,如果去重的话不能使用解构赋值,因为[...new Set(arr)]这种方式只能去重基本数值类型,fn是函数引用类型
    topics[topic].push(fn);
  }
  function publish(topic, ...args) {
    // console.log(topics[topic].length)
    if (!topics[topic]) return;
    // 迭代相同topic值对应的函数
    for (let fn of topics[topic]) {
      fn(...args)
    }

  }
  return {
    subScribe, publish
  }
}
var pubSub1 = new pubSub();
pubSub1.subScribe('add', function (a, b) {
  console.log(a + b)
})
pubSub1.subScribe('minus', function (a, b) {
  console.log(a - b)
})
// pubSub1.subScribe('minus', function (a, b) {
//   console.log(a - b - 1)
// })
/**
 * 发布订阅者模式
 * 对象写法
 */
console.log("==================================")
const event = {
  clientList: [],
  listen: function (key, fn) {
    if (!this.clientList[key]) {
      this.clientList[key] = []
    }
    this.clientList[key].push(fn)
  },
  trigger: function () {
    const key = Array.prototype.shift.call(arguments)
    const fns = this.clientList[key]
    if (!fns || fns.length === 0) {
      return false
    }
    for (let i = 0, fn; fn = fns[i++];) {
      fn.apply(this, arguments)
    }
  },
  remove: function (key, fn) {
    const fns = this.clientList[key]
    if (!fns) {
      return false
    }
    if (!fn) {
      fns && (fns.length = 0)
    } else {
      for (let l = fns.length - 1; l >= 0; l--) {
        const _fn = fns[l]
        if (_fn === fn) {
          fns.splice(l, 1)
        }
      }
    }
  }
}
const installEvent = (obj) => {
  for (let i in event) {
    obj[i] = event[i]
  }
}
const events = {}
installEvent(events)
// 订阅信息
events.listen('newMessage', fn = (say) => {
  console.log('say:listen:' + say)
})
// 发布信息
events.trigger('newMessage', 'hello')
events.remove('newMessage', (say) => {
  console.log('say:remove:' + say)
})

2.观察者模式

在观察者模式中，观察者需要直接订阅目标事件。在目标发出内容改变的事件后，直接接收事件并作出响应。发布订阅模式相比观察者模式多了个事件通道，订阅者和发布者不是直接关联的。
这段话可以看出上面的例子是发布订阅模式。订阅者A和发布者B是通过pubsub这个对象关联起来的，他们没有直接的交流。
直接上栗子：

/**
 * 观察者模式
 */
//观察者 ->可理解为订阅者
class Observer {
  update() {
    console.log('update')
  }
}
class Observer1 {
  update() {
    console.log('update1')
  }
}
//目标 -> 可理解为发布者
class Subject {
  constructor() {
    this.subs = [];
  }
  //添加订阅者，这里其实是添加观察者，观察者可理解为订阅者
  addSub(subScribe) {
    this.subs.push(subScribe);
    console.log(this.subs)
  }
  notify() {
    this.subs.forEach(sub => {sub.update()})
  }
}

let subject = new Subject();
let observer = new Observer();
let observer1 = new Observer1();
//目标添加观察者了
subject.addSub(observer);
subject.addSub(observer1);
//目标发布消息调用观察者的更新方法了
subject.notify();   //update

可以看到目标和观察者是直接联系在一起的。观察者把自身添加到了目标对象中，可见和发布订阅模式差别还是很大的。在这种模式下，目标更像一个发布者，他让添加进来的所有观察者都执行了update函数，而观察者就像一个订阅者。

3.两个模式的区别

定义

观察者模式
目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。具体观察者和具体目标继承各自的基类，然后具体观察者把自己注册到具体目标里，在具体目标发生变化时候，调度观察者的更新方法。

8066565-e531d0901175b641.png
发布/订阅模式
订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布该事件到调度中心（顺带上下文），由调度中心统一调度订阅者注册到调度中心的处理代码。

8066565-4ecebbe0a281dc53.png

我们再用一个图来直观地感受一下两种模式之间的区别：

8066565-591c8c1ebef13ce6.jpg

观察者模式和发布／订阅模式的区别是：
从上面的图片中可以看到，最大的区别是调度的地方。虽然两种模式都存在订阅者和发布者（具体观察者可认为是订阅者、具体目标可认为是发布者），但是观察者模式是由具体目标调度的，而发布/订阅模式是统一由调度中心调的，所以观察者模式的订阅者与发布者之间是存在依赖的，而发布/订阅模式则不会。
在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。
参考博客：https://www.jianshu.com/p/f0f22398d25d
https://www.jianshu.com/p/2f94d7596522
https://www.jianshu.com/p/e751d0ef4557