JS【发布订阅设计模式】在vue中的实际运用

亦凉 2022-01-19 01:21 175阅读 0赞

## 什么是发布订阅模式？ ##

> 订阅发布模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时，会通知所有订阅者对象，使它们能够自动更新自己的状态。

比如addEventListener 这个api就是个发布订阅模式

如果用过vue的同学，可以把他类比于 **watch**

下面我们看一个例子

var observe={
        fnsObj:{},
        // 订阅方法
        on:function(key,fn){
            if(!observe.fnsObj[key]){
                observe.fnsObj[key] = []
            }
            observe.fnsObj[key].push(fn)
        },
        // 发布
        emmit:function(key,value){
            if(observe.fnsObj[key].length){
                var fnsList = observe.fnsObj[key]
                for(var i=0;i<fnsList.length;i++){
                    fnsList[i].call(this,value)
                }
            }
            
        },
        //删除订阅者
        remove:function(key){
            for(var k in observe.fnsObj){
                if(k===key) delete observe.fnsObj[key]
            }
        }
        
    }
    复制代码

ok，那我们来尝试来调用下

// 我们订阅了两个监听者
    observe.on('say',function(e){
    console.log('i can hear he say: '+e)
    })
    observe.on('say',function(e){
    console.log('he say: '+e)
    })
    复制代码

接着发布消息

// 发布消息
    observe.emmit("say","嘿，这里是发布者")
    复制代码

可以看见控制台返回了两条消息，就是刚才我们定义的订阅者里打印出的内容

i can hear he say: 嘿，这里是发布者
     he say: 嘿，这里是发布者
    复制代码

这就是发布订阅模式，我相信很多人概念都知道，但是至于在项目中如何实际运用，这又是个大问题。

毕竟设计模式感觉不是很常用，而且即使不用设计模式，也能实现需求，所以下面我着重介绍下，我在vue中碰到的一个需求中是如何使用发布订阅模式。

## 实际运用 ##

### 1，需求介绍 ###

我这个项目是公司内部的人力资源管理系统。因此需要根据对不同权限进行菜单获取，还有一些下拉框数据，以及一些基础信息，需要在登陆后就马上获取，在调用接口后获取数据后，把它存储在vuex里面

目前这几个方法是写在app.vue里面

// 获取基本数据
      this.loadMenu()
      this.loadBasicData()
      this.loadUserInfo()
    
    复制代码

所以我要考虑到两种情况

1.  只有登陆后才能拉取这些数据
2.  当前页面刷新，如果为登陆后则需要重新拉取数据，否则不进行任何操作

### 1，常规解决方案 ###

这个算是比较普遍的需求，类似的很常见，按照常规解决方法，可以这么做：

1.  在mixin 里面把这些方法放在里面
2.  login.vue页面中，在登陆成功后存一个状态到sessionStorage里面，同时调用这些方法拉取数据
3.  app.vue里面的created生命周期里判断sessionStorage里的状态是否为登陆，如登陆则拉取数据

ok，需求解决，但是问题是，万一这些方法是只能放在app.vue里面呢，比如这个项目，app.vue不是我写的。是另外一个前端写，他不愿意把这些方法放在mixin呢？

如果我们能够监听sessionStorage的变化就可以了。但是无论是watch 还是computed 都没办法监听sessionStorage的变化，

所以这时候我们可以尝试使用 **发布订阅模式**

#### 1,创建一个 **observe.js** ####

class Observe {
      constructor() {
        this.fnsObj = {}
      }
         // 订阅方法
      on(key, fn) {
        if (!this.fnsObj[key]) { this.fnsObj[key] = [] }
        this.fnsObj[key].push(fn)
      }
          // 发布
      emmit(key, value) {
        if (this.fnsObj[key].length) {
          var fns = this.fnsObj[key]
          for (let i = 0; i < fns.length; i++) {
            fns[i].call(this, value)
          }
        }
      }
          //删除订阅者
      remove(key) {
        for (var k in this.fnsObj) {
          if (k === key) {
            delete (this.fnsObj[k])
          }
        }
      }
    }
    const observeSession = new Observe()
    
    export default observeSession
    复制代码

#### 2，在app.vue将他引入，同时定义监听和发布者 ####

import observeSession from './utils/Observe'
    ...
    created(){
        //刷新后如果为登陆状态则获取数据
         sessionStorage.getItem('login') === 'login' && this.loadSelectVal()
       //定义全局方法，在调用window.setSessionStorage的时候，发布者发布信息
          window.setSessionStorage = (key, value) => {
            observeSession.emmit('watchSesStore', { key, value })
          }
      // 监听存储在sessionStorage登陆状态变化，如果为登陆状态则获取数据，监听者监听信息
          observeSession.on('watchSesStore', e => {
            sessionStorage.setItem(e.key, e.value)
           e.value === 'login'&&this.loadSelectVal()
          })
    }
    复制代码

最后我们在登陆login.vue页面登陆成功的时候，给他加一行

window.setSessionStorage('login', 'login')
    复制代码

以及在router.js路由控制里面，对退出的时候处理

//如果跳转到登陆页面则登陆状态为登出
     if (to.name === "Login") {
        next()
        window.setSessionStorage && window.setSessionStorage('login', 'logout')
      } else {
      ....
    
    复制代码

至此需求完美解决。

## 结语 ##

我个人认为，当打开设计模式这扇门后，会发现解决问题的思路广阔很多，也会让你写出更加优质的代码，而本文只是抛砖引玉，只是项目中碰到的一个小需求，希望能给大家一些启发，如有不足之处，欢迎斧正，谢谢。

转载于:https://juejin.im/post/5cfa0a7ae51d4556dc2935f7