发布订阅模式在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 相关文章推荐
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
vue中是怎样监听数组变化的
Oct 24 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+javascript的日历控件
2009/11/19 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
Python制作爬虫采集小说
2015/10/25 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
python实现微信自动回复机器人功能
2019/07/11 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
中秋节超市促销方案
2014/01/30 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
节能环保演讲稿
2014/08/28 职场文书
房屋转让协议书
2014/10/18 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
退货证明模板
2015/06/23 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
用python批量解压带密码的压缩包
2021/05/31 Python