什么是观察者模式
观察者模式（有时又被称为发布-订阅Subscribe>模式、模型-视图View>模式、源-收听者Listener>模式或从属者模式）是软件设计模式的一种。在此种模式中，一个目标物件管理所有相依于它的观察者物件，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实现事件处理系统。（来源于百度百科）
还是不懂，没关系
今天晚上老大要上线一个活动，这时候PM来通知你了，
“XX，今天有个活动需要你支持一下，巴拉巴拉，上线了发个邮件给我，我先回家了。”
“尼玛，F**K！”
但是没办法，这个事件已经跟你绑定了，只有完成条件才能解绑，于是你疯狂code，终于上完了线，发了邮件通报，这个时候这个事件才算完成。
这个栗子里面，PM就是一个订阅者(bind)，向你订阅了一个邮件通报，他可以不用关心你的code过程，只需要获得通知即可。你就是一个发布者，在满足上线这个要求后，才触发了发邮件的操作（trigger）。
观察者模式适用场景
百度百科里面有个单词大家不造有没有注意到，事件处理，而javascript就是纯事件驱动的语言。为什么说事件驱动适合用观察者模式解决，分析一下事件产生的要素你就知道，一个事件必须包含事件时间、事件对象、事件起因、事件经过、事件结果。
什么！你要把这些全跟我说！
对于一个日理万机的攻城狮来说，你TM只要告诉我事件结果就好了，我只需要知道这个事情已经发生即可。
前端之观察者模式应用
PM：在每个播放的链接上加个调起逻辑
ok，so easy，最常见的实现使用事件委托
function openAPP(event) {
event.preventDefault();
//open app
......
}
$('body').on('click', '[data-openapp=true]', openAPP);
然而事情没有那么简单：
PM：现在登录的用户直接播放，未登录的用户弹登录框
Coder：OK!
如果你的登录接口是个异步请求，你可能会这样做：
function login() {
$.ajax({
url: '/login',
success: function(data) {
if(data.login === true) {
window.login = true;
}
}
});
}
$('body').on('click', '[data-openapp=true]', function(event) {
event.preventDefault();
if(typeof window.login !== 'undefined'
&& window.login === true) {
location.href = $(this).data('openapp-url');
}else {
//show dialog
......
}
}
你以为事情完了吗？NO
PM：已登录的用户不用展示首屏广告了，另外送个五块钱券吧！
Coder：WTF！
没办法，改吧。
function showADs() {
if(typeof window.login !== 'undefined'
&& window.login === true) {
return;
}else {
//show ads
......
}
}
//送券部分省略
然而以上代码只适用于模板登录情况，如果登录接口是异步接口呢，那只能去login回调函数里面加一个去除广告的逻辑了。事情做到这，你有没有感觉到一丝丝egg hurt，如果PM再加这样的逻辑肿么办？有没有办法做到登录之后就发出通知呢，所有的跟登录相关的事件都绑定到这个通知上去？
仔细分析浏览器事件绑定的原理，我们可以发现，案列一中那个最常见的dom事件绑定代码，其实内部实现原理是这样子的，浏览器为每个节点维护一个eventMap，类似于
eventMap = {
'click' : [
fn1,
fn2
],
'touchstart' : [
fn3,
fn4
]
}
当浏览器USER Interface线程捕获到用户的click操作时，浏览器就去eventMap里面查找索引为click数据，发现里面有fn1、fn2，并依次执行。
在上面的代码中，我们只是向浏览器订阅了一个click事件，事件在什么时候、什么时间触发全都由浏览器内部实现。在发生click的时候你可以执行fn1、fn2、….fnn。这个不就是我们所需要解决的事件耦合的问题嘛！事情到这，就很简单了，我们只需要实现一个自定义事件队列即可。
参考code，来自alloyteam
Events = function() {
var listen, log, obj, one, remove, trigger, __this;
obj = {};
__this = this;
listen = function( key, eventfn ) {
var stack, _ref;
stack = ( _ref = obj[key] ) != null ? _ref : obj[ key ] = [];
return stack.push( eventfn );
};
one = function( key, eventfn ) {
remove( key );
return listen( key, eventfn );
};
remove = function( key ) {
var _ref;
return ( _ref = obj[key] ) != null ? _ref.length = 0 : void 0;
};
trigger = function() {
var fn, stack, _i, _len, _ref, key;
key = Array.prototype.shift.call( arguments );
stack = ( _ref = obj[ key ] ) != null ? _ref : obj[ key ] = [];
for ( _i = 0, _len = stack.length; _i < _len; _i++ ) {
fn = stack[ _i ];
if ( fn.apply( __this, arguments ) === false) {
return false;
}
}
return {
listen: listen,
one: one,
remove: remove,
trigger: trigger
}
}
现在再来改我们之前的代码
var eventCenter = new Events();
eventCenter.listen('login', function(data) {
//隐藏广告
hideADs(arguments);
});
eventCenter.listen('login', function(data) {
//登录播放跳转
openUrl(arguments);
});
eventCenter.listen('login', function(data) {
//赠送代金券
sendCash(arguments);
});
function login() {
$.ajax({
url: '/login',
success: function(data) {
if(data.login === true) {
eventCenter.trigger('login');
}
}
});
}
完成!
总结与展望
因为观察者模式应用之广，本来想发散出去讲的，浏览器中的观察者模式、前后端数据交互中的观察者模式，发现涉及的内容太多，根本停不下来，所以先大致对观察者模式做个简单介绍，后续想到再写，让大家了解观察者模式的两个特性，为解耦而生、为事件而生。下一篇博客里我打算讲讲当前前端比较火的backbone、angularjs以及一些MVP框架中的观察者模式的应用。
后记
因为之前一段时间比较忙以及很久都没写过博客，前端公众号虽然筹备了很久但是一直没去写，相信万事开头难，千里之行始于足下。如有建议或者意见，欢迎反馈。