观察者模式（Observer Pattern）
观察者模式是一种对象间的一对多依赖关系，当一个对象的状态发生变化时，所有依赖他的对象都将得到通知。通常运用在对象之间的消息通讯中。
// 比如现在有一群学生，可以组成小组，可以寻求帮助
class Students {
constructor(name, level) {
this.name = name;
this.level = level;
this.tasks = [];
}
askForHelp(subject) {
console.log(`关于${subject}, ${this.level}${this.name}向大家寻求帮助!`)
this.tasks.forEach((fn) => {
fn(subject);
});
}
makeTeam(student, fn) {
console.log(`${this.level}${this.name}与${student.level}${student.name}组成了学习小组!`);
student.tasks.push(fn);
}
}
const studentWango = new Students('Wango', '学神');
const studentLily = new Students('Lily', '学霸');
const studentTom = new Students('Tom', '平平无奇的');
const studentPeter = new Students('Peter', '学渣');
// 老师说Peter的成绩比较差，所以大家都和Peter组成了学习小组
studentWango.makeTeam(studentPeter, function(subject) {
console.log(`Wango说：${subject}确实很难，我也花了好几分钟复习才堪堪得到了满分！`);
})
// 学神Wango与学渣Peter组成了学习小组!
studentLily.makeTeam(studentPeter, function(subject) {
console.log(`Lily说：${subject}!? 背就完事了！`);
})
// 学霸Lily与学渣Peter组成了学习小组!
studentTom.makeTeam(studentPeter, function(subject) {
console.log(`Tom说：${subject}的话，一定要好好学，但学不好也没事，我们都是凡人！`);
})
// 平平无奇的Tom与学渣Peter组成了学习小组!
// 有一天...
studentPeter.askForHelp('英语');
// 关于英语, 学渣Peter向大家寻求帮助!
// Wango说：英语确实很难，我也花了好几分钟复习才堪堪得到了满分！
// Lily说：英语!? 背就完事了！
// Tom说：英语的话，一定要好好学，但学不好也没事，我们都是凡人！
发布订阅模式（Pub-Sub Pattern）
发布订阅模并不在24种设计模式之中，只是观察者模式的一种变体。相比观察者模式，订阅发布模式新增了一个任务调度中心，订阅者将自己想要订阅的事件注册到调度中心，当发布者发布该事件到调度中心，也就是触发该事件时，由调度中心同一调度订阅者注册到调度中心的代码。
// 同样的学习小组
class Students {
constructor(name, level) {
this.name = name;
this.level = level;
}
// 订阅事件
on(type, fn) {
ClassRoom.subscribe(type, fn);
}
// 发布内容
emit(type, content) {
ClassRoom.askForHelp(type, content);
}
}
// 任务调度中心
class ClassRoom {
static topic = Object.create(null)
// 对于某个事件发布任务
static askForHelp(type, content) {
console.log(`${type}：${content}`);
if (!ClassRoom.topic[type] || ClassRoom.topic[type].length === 0) {
console.log(`然而并没有学生对${type}感兴趣！`);
return;
}
ClassRoom.topic[type].forEach((fn) => {
fn(content);
});
}
// 订阅某个类型的事件
static subscribe(type, fn) {
if (!ClassRoom.topic[type]) {
ClassRoom.topic[type] = [];
}
console.log(`有学生订阅了${type}.`);
ClassRoom.topic[type].push(fn);
}
}
const studentWango = new Students('Wango', '学神');
const studentLily = new Students('Lily', '学霸');
const studentTom = new Students('Tom', '平平无奇的');
const studentPeter = new Students('Peter', '学渣');
studentWango.on('Life', function(type, content) {
console.log(`Wango说: 终于有人问生活上的问题了，果然还是做个凡人比较快乐啊!`);
})
// 有学生订阅了Life.
studentWango.on('English', function(type, content) {
console.log(`Wango说：英语确实很难，我也花了好几分钟复习才堪堪得到了满分！`);
})
// 有学生订阅了English.
studentTom.on('English', function(type, content) {
console.log(`Tom说：英语的话，一定要好好学，但学不好也没事，我们都是凡人！`);
})
// 有学生订阅了English.
studentLily.on('English', function(type, content) {
console.log(`Lily说: 英语?! 背就完事了！`);
})
// 有学生订阅了English.
studentLily.emit('Life', '这个世界有英雄吗？');
// Life：这个世界有英雄吗？
// Wango说: 终于有人问生活上的问题了，果然还是做个凡人比较快乐啊!
studentTom.emit('English', '单词记不住怎么办啊？');
// English：单词记不住怎么办啊？
// Wango说：英语确实很难，我也花了好几分钟复习才堪堪得到了满分！
// Tom说：英语的话，一定要好好学，但学不好也没事，我们都是凡人！
// Lily说: 英语?! 背就完事了！
studentPeter.emit('Game', '学什么？玩游戏啊！');
// Game：学什么？玩游戏啊！
// 然而并没有学生对Game感兴趣！
区别与联系
相比观察者模，订阅发布模式中的的订阅者和发布者分离更加彻底。订阅者在订阅的时候只关注事件本身，而不用关心是谁发布的信息；而发布者同样只需要关注发布的内容，不用关心是谁在订阅，如何处理。
总的来说，尽管订阅发布模式多了个调度中心，但使用起来可以更加灵活，对多事件的支持更好，当然，内存消耗更大，毕竟要为维护多个事件队列。