JavaScript设计模式之观察者模式(发布订阅模式)原
本文实例讲述了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法。分享给大家供大家参考,具体如下
观察者模式,又称为发布订阅模式,它定义了一种一对多的关系,让多个观察者对象监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己的状态。
在观察者模式中,并不是一个对象调用另一个对象的方法,而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知。订阅者也称为观察者,而被观察的对象称为发布者或主题。当发生了一个重要的事件时,发布者将会通知(调用)所有订阅者并且可能经常以事件对象的形式传递消息。
思路
① 发布者需要一个数组类型的属性subscribers,以存储所有的订阅者;
② 订阅subscribe()
将新的订阅者加入到这个数组中去;
③ 退订unsubscribe()
从订阅者数组中删除某个订阅者;
④ 发布publish()
循环遍历subscribers数组中的每一个元素,并通知他们,即发送消息,意味着调用订阅者的某个方法。,当用户订阅信息时,该订阅者需要向subscribe()
提供它的其中一个方法。
subscribe()
、unsubscribe()
、publish()
三种方法都需要一个type参数,因为发布者可能触发多个事件,而用户可能仅选择订阅其中一种,而不是一种。
使用观察者模式的好处
① 支持简单的广播通信,自动通知所有已经订阅过的对象。
② 页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。
③ 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
在JavaScript中,一般使用事件模型来替代传统的观察者模式。 DOM事件,也是JavaScript和DOM之间实现的一种观察者模式。
Eg1
监听用户单击按钮的动作,但没有办法预知用户将在什么时候点击。,订阅按钮上的click事件,当按钮被点击时,便向订阅者发布此消息。
btn.addEventListener("click", function() { console.log("First click"); }, false); // 可以有多个订阅者 btn.addEventListener("click", function() { console.log("Second click"); }, false); btn.click();
Eg2
非观察者模式
$.ajax({ url: './login', type: 'post', contentType: 'application/json', dataType:'json', suess: function(data) { if(data.status === "suess") { // 登录成功,渲染header、footer header.setInfo(data.headerInfo); footer.setInfo(data.footerInfo); } } });
观察者模式
$.ajax({ ..., suess: function(data) { if(data.status === "suess") { // 登录成功,发布登陆成功消息 login.trigger("loginsuess", data); } } }); var header = (function() { // 监听消息 login.listen("loginsuess", function(data){ header.setInfo(data.headerInfo); }); return { setInfo: function(data) { console.log("渲染header"); } }; })(); var footer = (function() { login.listen("loginsuess", function(data){ footer.setInfo(data.navInfo); }); return { setInfo: function(data) { console.log("渲染nav"); } }; })();
更多关于JavaScript相关内容可查看本站专题《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程