观察者模式,定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。事实上,只要你曾经在DOM节点上绑定过事件函数,那么你就曾经使用过观察者模式了
1 | document.body.addEventListener('click', function () { |
但是这只是对观察者模式最简单的使用,在很多场景下我们经常会实现一些自定义事件来满足我们的需求。
1 | 举个例子: |
那么一个简单的观察者模式应该怎么实现呢?
- 要指定一个发布者;
- 给发布者添加一个缓存列表,用于存放回调函数以便通知订阅者;
- 最后发布消息的时候,发布者会遍历这个缓存列表,依次触发订阅者回调函数;
1 | var event = {}; //发布者(hr) |
到这里,我们已经实现了一个最简单的观察者模式了!
但是上面的函数其实存在一个问题,那就是发布者没办法选择自己要发布的消息类型!比如这家公司同时在招php,web前端,如果使用上面的函数就没办法区分职位了!只能一次性把全部订阅者都发送一遍消息。
对上面的代码进行改写:
1 | var event = {}; //发布者(hr) |
通过添加了一个key,我们实现了对职位的判断。有了订阅事件,我们怎么能少了取消订阅事件呢?
1 | event.remove = function(key, fn) { |
对上面代码进行改进,创建一个全局对象来实现观察者模式,使用闭包实现私有变量,仅暴露必须的API给使用者:
1 | var event = (function() { |