发布-订阅模式，又称观察者模式。
一对多：当一个对象更新时，所有依赖它的对象都将得到通知并自动更新。
关键代码：在抽象类里有一个 array list 来存放观察者们。
关键概念：即使没有观察者，主体也可以独自存在并正常运行。
主体“发布”事件。
观察者通过“订阅”事件来观察对象。
优点：
有助于解耦，保持功能的隔绝。
因为触发事件的代码和监听事件的代码是完全分离的。
缺点：
- 如果观察者和主体之间有循环依赖，系统会循环崩溃。
- 主体有很多直接/间接观察者的话，通知到所有观察者很花时间。
- 观察者们不知道主体怎么发生变化，只知道它变了。
代码1 - 红宝书版：
function EventTarget() {
this.handler = {}
}
EventTarget.prototype = {
constructor: EventTarget,
addHander(type, handler) {
//增加事件
if (typeof this.handler[type] == 'undefined') {
this.handler[type] = []
}
this.handler[type].push(handler) //可能有很多方法，把方法做为数组
},
fire(event) {
//触发事件，传入触发的事件名和参数
if (!event.target) {
//如果没有传入事件对象，把实例做为对象
event.target = this
}
//事件方法做为数组存在
const handlers = this.handler[event.type]
//if (handlers instanceof Array) {
if (Array.isArray(handlers)) {
const length = handlers.length
for (let k = 0; k < length; k++) {
handlers[k](event)
}
}
},
removeHander(type, handler) {
//删除事件
const handlers = this.handler[type]
//if (handlers instanceof Array) {
if (Array.isArray(handlers)) {
const length = handlers.length
for (let k = 0; k < length; k++) {
if (handlers[k] == handler) {
this.handler[type].splice(k, 1)
break
}
}
}
}
}
let event = new EventTarget()
function hello() {
console.log('hi')
}
event.addHander('click', hello)
event.fire({
type: 'click'
})
代码2 - es6版:
// to do
调用代码：
function handleMessage(event){
alert("Message received: " + event.message);
}
var target = new EventTarget();
target.addHandler("message", handleMessage);
target.fire({ type: "message", message: "Hello world!"});
target.removeHandler("message", handleMessage);
target.fire({ type: "message", message: "Hello world!"});
结合“寄生组合式继承”（红宝书p172）：
function Person(name, age){
EventTarget.call(this);
this.name = name;
this.age = age;
}
inheritPrototype(Person,EventTarget);
Person.prototype.say = function(message){
this.fire({type: "message", message: message});
};
function handleMessage(event){
alert(event.target.name + " says: " + event.message);
}
var person = new Person("Nicholas", 29);
person.addHandler("message", handleMessage);
person.say("Hi there.");
function object(o){
function F(){}
F.prototype = o;
return new F();
}
function inheritPrototype(subType, superType){
var prototype = object(superType.prototype); //create object
prototype.constructor = subType; //augment object
subType.prototype = prototype; //assign object
}
参考资料：
- 《红宝书》第22章 高级技巧 - 自定义事件 p616 - 618
- 菜鸟教程 https://www.runoob.com/design-pattern/observer-pattern.html
- 雾切's blog 自定义事件/观察者模式
