JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例

前端之家收集整理的这篇文章主要介绍了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法分享给大家供大家参考,具体如下:

观察者模式,又称为发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己的状态。

在观察者模式中,并不是一个对象调用另一个对象的方法,而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知订阅者也称为观察者,而被观察的对象称为发布者或主题。当发生了一个重要的事件时,发布者将会通知调用)所有订阅者并且可能经常以事件对象的形式传递消息。

思路:

① 发布者需要一个数组类型的属性订阅者;

订阅subscribe():将新的订阅者加入到这个数组中去;

③ 退订unsubscribe():从订阅者数组中删除某个订阅者;

④ 发布publish():循环遍历通知他们,即发送消息,意味着调用订阅者的某个方法。因此,当用户订阅信息时,该订阅者需要向subscribe()提供它的其中一个方法

subscribe()unsubscribe()publish()三种方法都需要一个用户可能仅选择订阅其中一种,而不是另外一种。

使用观察者模式的好处:

支持简单的广播通信,自动通知所有已经订阅过的对象。

页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。

③ 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

在JavaScript中,一般使用事件模型来替代传统的观察者模式。 DOM事件,也是JavaScript和DOM之间实现的一种观察者模式。

Eg1:

监听用户单击按钮的动作,但没有办法预知用户将在什么时候点击。因此,订阅按钮上的click事件,当按钮被点击时,便向订阅者发布此消息。

订阅者 btn.addEventListener("click",function() { console.log("Second click"); },false); btn.click();

Eg2:

非观察者模式:

登录成功,渲染header、footer header.setInfo(data.headerInfo); footer.setInfo(data.footerInfo); } } });

观察者模式:

登录成功,发布登陆成功消息 login.trigger("loginsuccess",data); } } }); var header = (function() { // 监听消息 login.listen("loginsuccess",function(data){ header.setInfo(data.headerInfo); }); return { setInfo: function(data) { console.log("渲染header"); } }; })(); var footer = (function() { login.listen("loginsuccess",function(data){ footer.setInfo(data.navInfo); }); return { setInfo: function(data) { console.log("渲染nav"); } }; })();

更多关于JavaScript相关内容可查看本站专题:《》、《》、《》、《》、《》、《》及《用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

猜你在找的JavaScript相关文章