一、什么是观察者模式
观察者模式又叫做发布—订阅模式，是我们最常用的设计模式之一。它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知和更新。观察者模式提供了一个订阅模型，其中对象订阅事件并在发生时得到通知，这种模式是事件驱动的编程基石，它有利益于良好的面向对象的设计。
二、观察者模式的使用场景
1、实际上，只要我们曾经在DOM节点上面绑定过事件函数，那我们就使用过观察者模式，应为JS和DOM之间就是实现了一种观察者模式。
document.body.addEventListener("click", function() {
alert("Hello World")
}，false )
document.body.click() //模拟用户点击
在上面的代码中，需要监听用户点击 document.body 的动作，但是我们是没办法预知用户将在什么时候点击的。因此我们订阅了 document.body 的 click 事件，当 body 节点被点击时，body 节点便会向订阅者发布 "Hello World" 消息。
2、自定义事件
const event = { clientList: [], listen: function(key , fn) { if (this.clientListen[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',fn1 = (say) => { console.log('say:' + say) }) // 发布信息 events.trigger('newMessage',"Hello world") //移除订阅 events.remove('newMessage',fn1)
三、观察者模式的弊端
观察者模式的有点非常明显：一是时间上的解耦，而是对象之间的解耦。既可用于异步编程中，也可以用帮助我们完成更松耦合的代码编写。但它仍然有所不足：
- 创建订阅者本身要消耗一定的时间和内存
- 当订阅一个消息时，也许此消息并没有发生，但这个订阅者会始终存在内存中。
- 观察者模式弱化了对象之间的联系，这本是好事情，但如果过度使用，对象与对象之间的联系也会被隐藏的很深，会导致项目的难以跟踪维护和理解。
四、面向对象与观察者模式
//模拟一个目标可能拥有的一些列依赖 function ObserverList() { this.observerList = []; }; //添加一个观察者 ObserverList.prototype.Add = function (obj) { return this.observerList.push(obj); }; //清除所有观察者 ObserverList.prototype.Empty = function () { this.observerList = []; }; //获得所有观察者的数量 ObserverList.prototype.Count = function () { return this.observerList.length; }; //获取某个指定的观察者 ObserverList.prototype.Get = function (index) { if (index > -1 && index < this.observerList.length) { return this.observerList[index]; } }; //插入一个观察者 ObserverList.prototype.Insert = function (obj, index) { var pointer = -1; if (index === 0) { this.observerList.unshift(obj); pointer = index; } else if (index == this.observerList.length) { this.observerList.push(obj); pointer = index; } return pointer; }; //从某个位置开始查找特定的观察者并返回观察者的索引值 ObserverList.prototype.IndexOf = function (obj, startIndex) { var i = startIndex, pointer = -1; while (i < this.observerList.length) { if (this.observerList[i] == obj) { pointer = i; } i++; } return pointer; }; //移除某个特定索引的观察者（如果存在） ObserverList.prototype.RemoveIndexAt = function (index) { if (index == 0) { this.observerList.shift(); } else if (index == this.observerList.length - 1) { this.observerList.pop(); } }; //扩展对象 function extend(obj, extension) { console.log(obj); for (var k in obj) { console.log(k); extension[k] = obj[k] } }; //模拟一个目标对象，并模拟实现在观察者列表上添加、删除和通知观察者的能力 function Subject() { this.observers = new ObserverList(); }; //目标添加一个观察者 Subject.prototype.AddObserver = function (observer) { this.observers.Add(observer); }; //目标对象移除某个观察者 Subject.prototype.RemoveObserver = function (observer) { this.observers.RemoveIndexAt(this.observers.IndexOf(observer, 0)); }; Subject.prototype.RemoveAllObserver = function () { this.observers = []; } //模拟实现通知功能 Subject.prototype.Notify = function (context) { var observerCount = this.observers.Count(); for (var i = 0; i < observerCount; i++) { this.observers.Get(i).Update(context); } }; //模拟创建一个观察者 function Observer() { this.Update = function () { }; } var controlCheckbox = document.getElementById("mainCheckBox"); var removerObserver = document.getElementById("removerAllObserver"); var addBtn = document.getElementById("addNewObserver"); var container = document.getElementById("observerContainer"); extend(new Subject(), controlCheckbox); controlCheckbox["onclick"] = Function("controlCheckbox.Notify(controlCheckbox.checked)"); addBtn["onclick"] = AddNewObserver; function AddNewObserver() { var check = document.createElement("input"); check.type = "checkbox"; extend(new Observer(), check); check.Update = function (value) { this.checked = value; }; controlCheckbox.AddObserver(check); container.appendChild(check); }
五、class与观察者模式
/** * 发布订阅模式(观察者模式) * handles: 事件处理函数集合 * on: 订阅事件 * emit: 发布事件 * off: 删除事件 **/ class PubSub { constructor() { this.handles = {}; } // 订阅事件 on(eventType, handle) { if (!this.handles.hasOwnProperty(eventType)) { this.handles[eventType] = []; } if (typeof handle == 'function') { this.handles[eventType].push(handle); } else { throw new Error('缺少回调函数'); } return this; } // 发布事件 emit(eventType, ...args) { if (this.handles.hasOwnProperty(eventType)) { this.handles[eventType].forEach((item, key, arr) => { item.apply(null, args); }) } else { throw new Error(`"${eventType}"事件未注册`); } return this; } // 删除事件 off(eventType, handle) { if (!this.handles.hasOwnProperty(eventType)) { throw new Error(`"${eventType}"事件未注册`); } else if (typeof handle != 'function') { throw new Error('缺少回调函数'); } else { this.handles[eventType].forEach((item, key, arr) => { if (item == handle) { arr.splice(key, 1); } }) } return this; // 实现链式操作 } } // 下面做一些操作 let callback = function () { console.log('you are so nice'); } let pubsub = new PubSub(); pubsub.on('completed', (...args) => { console.log(args.join(' ')); }).on('completed', callback); pubsub.emit('completed', 'what', 'a', 'fucking day'); pubsub.off('completed', callback); pubsub.emit('completed', 'fucking', 'again');