JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
本文实例讲述了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法。分享给大家供大家参考，具体如下：
观察者模式，又称为发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己的状态。
在观察者模式中，并不是一个对象调用另一个对象的方法，而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知。订阅者也称为观察者，而被观察的对象称为发布者或主题。当发生了一个重要的事件时，发布者将会通知（调用）所有订阅者并且可能经常以事件对象的形式传递消息。
思路：
①发布者需要一个数组类型的属性subscribers，以存储所有的订阅者；
②订阅subscribe()：将新的订阅者加入到这个数组中去；
③退订unsubscribe()：从订阅者数组中删除某个订阅者；
④发布publish()：循环遍历subscribers数组中的每一个元素，并通知他们，即发送消息，意味着调用订阅者的某个方法。因此，当用户订阅信息时，该订阅者需要向subscribe()提供它的其中一个方法。
subscribe()、unsubscribe()、publish()三种方法都需要一个type参数，因为发布者可能触发多个事件，而用户可能仅选择订阅其中一种，而不是另外一种。
使用观察者模式的好处：
①支持简单的广播通信，自动通知所有已经订阅过的对象。
②页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。
③目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
在JavaScript中，一般使用事件模型来替代传统的观察者模式。DOM事件，也是JavaScript和DOM之间实现的一种观察者模式。
Eg1：
监听用户单击按钮的动作，但没有办法预知用户将在什么时候点击。因此，订阅按钮上的click事件，当按钮被点击时，便向订阅者发布此消息。
btn.addEventListener("click",function(){
console.log("Firstclick");
},false);
//可以有多个订阅者
btn.addEventListener("click",function(){
console.log("Secondclick");
},false);
btn.click();
Eg2：
非观察者模式：
$.ajax({
url:'./login',
type:'post',
contentType:'application/json',
dataType:'json',
success:function(data){
if(data.status==="success"){//登录成功，渲染header、footer
header.setInfo(data.headerInfo);
footer.setInfo(data.footerInfo);
}
}
});
观察者模式：
$.ajax({
...,
success:function(data){
if(data.status==="success"){
//登录成功，发布登陆成功消息
login.trigger("loginsuccess",data);
}
}
});
varheader=(function(){//监听消息
login.listen("loginsuccess",function(data){
header.setInfo(data.headerInfo);
});
return{
setInfo:function(data){
console.log("渲染header");
}
};
})();
varfooter=(function(){
login.listen("loginsuccess",function(data){
footer.setInfo(data.navInfo);
});
return{
setInfo:function(data){
console.log("渲染nav");
}
};
})();
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。