5、发布-订阅模式

最新推荐文章于 2025-03-28 20:51:39 发布

原创最新推荐文章于 2025-03-28 20:51:39 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

设计模式专栏收录该内容

6 篇文章

订阅专栏

本文介绍了发布-订阅模式，也称为观察者模式，用于在对象间建立一对多的关系，当发布者状态变化时，所有订阅者都会收到通知。在JavaScript中，事件模型常用于实现这一模式。举例说明了在商城网站中，如何通过登录成功事件来同步更新header、nav、消息列表和购物车等模块的用户信息。该模式的优点包括时间上的解耦和对象间的解耦，但同时也存在内存消耗的问题，因为即使消息未触发，订阅者也会一直存在。

发布-订阅模式

发布-订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。在JavaScript中，我们一般用事件模型来代替传统的发布-订阅模式

例子:开发一个商城网站，网站里有header头部、nav导航、消息列表、购物车等模块，这几个模块都必须先用ajax异步请求获取用户的登录信息。

 // 作为中介者，把订阅者和发布者联系起来
 login.succ(function(data){
   header.setAvatar(data.avatar) // 设置header模块的头像
   nav.setAvatar(data.avatar) // 设置导航模块的头像
   message.refresh() // 刷新消息列表
   cart.refresh() // 刷新购物车列表
 })
 
 $.ajax('http://xxx.com?login',function(data){ // 登录成功
   login.trigger('loginSucc',data) // 发布登录成功的消息
 })
 
 var header = (function(){
   login.listen('loginSucc',function(data){
     header.setAvatar(data.avatar)
   });
   return {
     setAvator:function(data){
       console.log('设置header模块的对象')
     }
   }
 })()
 
 var nav = (function(){
   login.listen('loginSucc',function(data){
     nav.setAvatar(data.avatar)
   })
   return {
     setAvatar:function(avatar){
       console.log('设置nav模块的对象')
     }
   }
 })()