发布订阅模式在vue中的实际运用实例详解


Posted in Javascript onJune 09, 2019

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

比如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,常规解决方案

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

在mixin 里面把这些方法放在里面

登陆成功后存一个状态到sessionStorage里面,同时调用这些方法拉取数据
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 {
 ....

至此需求完美解决。

总结

以上所述是小编给大家介绍的发布订阅模式在vue中的实际运用实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
flash 得到自身url参数的代码
Nov 15 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
原生JS实现音乐播放器
Jan 26 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 #Javascript
解决vue单页面应用中动态修改title问题
Jun 09 #Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 #Javascript
详解Node.js异步处理的各种写法
Jun 09 #Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 #Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 #Javascript
微信小程序与webview交互实现支付功能
Jun 07 #Javascript
You might like
php中几种常见安全设置详解
2010/04/06 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
详解Python 正则表达式模块
2018/11/05 Python
python使用正则筛选信用卡
2019/01/27 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
Ajax主要包含了哪些技术
2014/06/12 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
审核会计岗位职责
2013/11/08 职场文书
学生实习证明范文
2014/09/28 职场文书
团代会闭幕词
2015/01/28 职场文书
物业接待员岗位职责
2015/04/15 职场文书
redis中lua脚本使用教程
2021/11/01 Redis
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL