发布订阅模式在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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
JS中的作用域链
Mar 01 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
微信小程序纯文本实现@功能
Apr 08 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
jquery 简单导航实现代码
2009/09/11 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
javascript操作css属性
2013/12/30 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
解决layer图标icon不加载的问题
2019/09/04 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
python 自动提交和抓取网页
2009/07/13 Python
python批量提交沙箱问题实例
2014/10/08 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
用Django写天气预报查询网站
2018/10/21 Python
Django 重写用户模型的实现
2019/07/29 Python
Python如何转换字符串大小写
2020/06/04 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
机械制造专业个人的自我评价
2013/12/28 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
小学生差生评语
2014/12/29 职场文书
四大名著读书笔记
2015/06/25 职场文书
js Proxy的原理详解
2021/05/25 Javascript
PHP中strval()函数实例用法
2021/06/07 PHP
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫