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

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

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

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

<>强思路:

①发布者需要一个数组类型的属性,以存储所有的订阅者;

②订阅<代码>订阅():将新的订阅者加入到这个数组中去;

③退订<代码>退订():从订阅者数组中删除某个订阅者;

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

<代码>订阅(),<代码>退订(),<代码> publish() 三种方法都需要一个参数,因为发布者可能触发多个事件,而用户可能仅选择订阅其中一种,而不是另外一种。

<强>使用观察者模式的好处:

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

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

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

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

<强>烤箱

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

　　　　　　btn。addEventListener(“点击”,函数(){ 　　控制台。日志(“第一次点击”); 　　},假);//可以有多个订阅者　　btn。addEventListener(“点击”,函数(){ 　　控制台。日志(“第二次点击”); 　　},假); 　　btn.click (); 　　　　之前　　　　

<强> Eg2:

非观察者模式:

　　　　　　. ajax({美元　　url:“。/登录的, 　　类型:“文章”, 　　contentType: application/json, 　　数据类型:json, 　　成功:功能(数据){ 　　如果(数据)。状态===俺晒Α?{//登录成功,渲染头,页脚　　header.setInfo (data.headerInfo); 　　footer.setInfo (data.footerInfo); 　　} 　　} 　　}）; 　　　　之前　　　　

观察者模式:

　　　　　　. ajax({美元　　…, 　　成功:功能(数据){ 　　如果(数据)。状态===俺晒Α?{//登录成功,发布登陆成功消息　　登录。触发(“loginsuccess”数据); 　　} 　　} 　　}）; 　　var头=(函数(){//监听消息　　登录。听(“loginsuccess”、功能(数据){ 　　header.setInfo (data.headerInfo); 　　}）; 　　返回{ 　　setInfo:功能(数据){ 　　console.log(“渲染头”); 　　} 　　}; 　　}) (); 　　var页脚=(函数(){ 　　登录。听(“loginsuccess”、功能(数据){ 　　footer.setInfo (data.navInfo); 　　}）; 　　返回{ 　　setInfo:功能(数据){ 　　console.log(“渲染导航”); 　　} 　　}; 　　}) (); 　　　　之前　　　　

更多关于JavaScript相关内容可查看本站专题:《JavaScript面向对象入门教程》、《JavaScript切换特效与技巧总结》,《JavaScript查找算法技巧总结》,《JavaScript错误与调试技巧总结》,《JavaScript数据结构与算法技巧总结》,《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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