观察者模式(发布-订阅模式)：其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。
在JavaScript中，一般使用事件模型来替代传统的观察者模式。
好处：
(1)可广泛应用于异步编程中，是一种替代传递回调函数的方案。
(2)可取代对象之间硬编码的通知机制，一个对象不用再显示地调用另外一个对象的某个接口。两对象轻松解耦。
DOM事件–观察者模式典例
需要监控用户点击document.body的动作，但是我们没有办法预知用户将在什么时间点击。
所以，我们订阅document.body上的click事件，当body节点被点击时，body节点便向订阅者发布这个消息！
document.body.addEventListener("click", function() {
console.log(1);
}, false);
// 可以多个订阅者
document.body.addEventListener("click", function() {
console.log(2);
}, false);
doucment.body.click();
某网站有header头部、nav导航、消息列表等模块。这几个模块的渲染都需要获取用户登陆信息。
(1)一般写法：
$.ajax({
url: './login',
type: 'post',
contentType: 'application/json',
dataType:'json',
success: function(data) {
if(data.status === "success") {
// 登录成功，渲染header、nav
header.setInfo(data.headerInfo);
nav.setInfo(data.navInfo);
}
}
});
(2)使用观察者模式，很轻松解耦！
$.ajax({
...,
success: function(data) {
if(data.status === "success") {
// 登录成功，发布登陆成功消息
login.trigger("loginsuccess", data);
}
}
});
var header = (function() {
// 监听消息
login.listen("loginsuccess", function(data){
header.setInfo(data.headerInfo);
});
return {
setInfo: function(data) {
console.log("设置header信息");
}
};
})();
var nav = (function() {
login.listen("loginsuccess", function(data){
nav.setInfo(data.navInfo);
});
return {
setInfo: function(data) {
console.log("设置nav信息");
}
}
})();
)
