观察者模式&发布订阅模式

观察者

定义

对象间一种一对多的依赖关系，当目标对象 Subject 的状态发生改变时，所有依赖它的对象 Observer 都会得到通知。

实质

学生在一和学生二在老师的学生列表中，当老师向学生通知要晚点名的时候，学生列表的学生一和学生二都得去教室参加晚点名。

特点

1，老师在执行添加、通知操作的时候会通知所有的学生

// ---------------观察者模式---------------
// 定义一个老师类
class Teacher {
  constructor() {
    this.classes = []
  }
  add (option) {
    this.classes.push(option)
  }
  notify () {
    for (let stu of this.classes) {
      stu.enroll.apply(stu, Array.prototype.slice.call(arguments))
    }
  }
}

//定义一个学生类
class Student {
  constructor(name) {
    this.name = name;
  }
  enroll () {
    console.log("我是学生" + this.name)
  }
}

//初始化一个目标老师
let teacher = new Teacher();

//初始化学生一
let student1 = new Student("jack")
//初始化学生二
let student2 = new Student("mary")

//加入老师的学生队列
teacher.add(student1);
teacher.add(student2);

//通知学生们报上名来
teacher.notify();

解读

1），老师和学生的功能耦合度降低，可以注重自身发展

学生被动接受老师的命令，当老师发出通知的时候，学生队列的所有学生都会收到信息

学生无法选择接收消息的类型，只要老师发出了通知，学生都会接收到（比如说，学生只关注老师在学校的动作，其他的老师行为动作都不关心，但是老师所有的动作都会推送过来，学生都会接收到）

发布订阅

定义

对象间一种一对多的依赖关系，当目标对象指定的动作发生改变时，订阅该动作的依赖对象会收到相应的通知。

实质

people1和people2是女主播X的粉丝并且开启了主播上线提醒，其中people1关注的是女孩在斗鱼上的直播，people2关注的是女孩在虎牙上的直播，当女孩X在斗鱼上直播的时候会通知到people1，当女孩X在虎牙上面直播的时候会通知到people2


特点

1，主播（发布者）上不同的平台（事件调度中心）会通知到对应平台的粉丝（订阅者）

 

// ---------------发布订阅模式---------------
// 定义一个直播类
class broadcast {
  constructor() {
    // 直播时间{直播平台：直播事件}
    this.eventList = {}
  }

  //关注直播平台
  attention (event, fn) {
    (this.eventList[event] || (this.eventList[event] = [])).push(fn);
    return this;
  }

  //取消平台关注
  unattention (event, fn) {
    // 获取该平台下面的所有关注者
    let fns = this.eventList[event];
    // 如果该平台下面没得关注者那么直接返回
    if (!fns) {
      return false;
    }
    // 如果没有穿具体的关注者那么直接清除全部的关注者
    if (!fn) {
      fns.splice(0, fns.length)
    } else {
      fns.forEach(function (item, index) {
        if (item === fn) {
          //清除传递过来的关注者
          fns.splice(index, 1);
        }
      })
    }
    return this;
  }

  //发布信息(开始直播)
  emitAction () {
    let event = Array.prototype.shift.call(arguments);
    let content = arguments[0];
    let fns = this.eventList[event] || [];
    let _that = this;
    if (fns.length == 0) {
      return false;
    }
    fns.forEach(function (fn) {
      fn.call(_that, content)
    })
    return this;
  }

}

// 初始化观看直播的人
const people1 = new broadcast()
people1.attention("douyu", (content) => {
  console.log("观察者一" + content)
})

const people2 = new broadcast()
people2.attention("douyu", (content) => {
  console.log("观察者二" + content)
})
// 订阅者取消关注虎牙直播
people2.unattention("huya", (content) => {
  console.log("观察者二" + content)
})

//发布直播消息
people1.emitAction("douyu", "来斗鱼看直播了哦");
people2.emitAction("huya", "来虎牙看直播了哦");

观察者模式：

目标直接将通知分发到观察者身上。

发布订阅者模式：

目标首先是将通知分发到事件调度中心，事件调度中心再通过订阅者具体订阅的类型分发到不同的订阅者身上。