ajax php 观察者模式,JavaScript观察者模式定义和dom事件实例详解

观察者模式(发布-订阅模式)：其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

在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信息");

}

}

})();