基于uniapp/Vue的发布订阅模式实现和快速上手

Posted 帅气的黑桃J

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于uniapp/Vue的发布订阅模式实现和快速上手相关的知识,希望对你有一定的参考价值。

简介

发布订阅模式定义对象之间的一种一对多依赖关系,使得每当一个对象状态发生改变时,其相关依赖对象皆得到通知并被自动更新。

发布-订阅(Publish/Subscribe)模式的别名包括观察者模式(Observer Pattern)、模型-视图(Model/View)模式、源-监听器(Source/Listener)模式或从属者(Dependents)模式。观察者模式是一种对象行为型模式。

在Uniapp中,如果涉及到一些即时通信和复杂组件下的数据通信时,可以使用配置全局的发布订阅模式来进行topic的广播,让数据间的交互更加灵活。

本文提供了一个方便的全局配置模式,可以快速copy进行调用发布订阅模式,十分方便。

快速上手

先徒手撸一个发布订阅模式,这里我使用的dispatcher作为调度中心来分配发布和订阅之间的关系。

  • 创建一个Dispatcher.js
var dispIns = [];
var dispCbs = [];

function Dispatcher() 
  dispIns.push(this);
  dispCbs.push();


Dispatcher.prototype = 
  // 广播监听
  on(topic, cb) 
    let cbtypes = dispCbs[dispIns.indexOf(this)];
    let cbs = cbtypes[topic] = cbtypes[topic] || [];
    if (!~cbs.indexOf(cb))  cbs.push(cb) 
  ,
  // 关闭监听
  off(topic, cb) 
    let cbtypes = dispCbs[dispIns.indexOf(this)];
    let cbs = cbtypes[topic] = cbtypes[topic] || [];
    let curTypeCbIdx = cbs.indexOf(cb);
    if (~curTypeCbIdx) 
      cbs.splice(curTypeCbIdx, 1);
    
  ,
  // 发布广播
  fire(topic, ...args) 
    let cbtypes = dispCbs[dispIns.indexOf(this)];
    let cbs = cbtypes[topic] = cbtypes[topic] || [];

    for (let i = 0; i < cbs.length; i++) 
      cbs[i].apply(null, args);
    
  
;
module.exports = Dispatcher;
  • 创建一个broadcast.js
var Dispatcher = require("./Dispatcher.js");
module.exports = new Dispatcher();
  • 在main.js进行全局配置
import broadcast from 'utils/broadcast'
Vue.prototype.$disp = broadcast

接下来让我们来测试一下

  • 调用方式:发布topic
// 无参发布
this.$disp.fire("topicName")
// 有参发布
this.$disp.fire("topicName",data)
  • 调用方式:监听topic
// 无参监听
this.$disp.on("topicName", function () 
  doSomething()
)
// 有参监听
this.$disp.on("topicName", res => 
  console.log(`[info] res data :$res`)
)

因为已经在全局配置了,因此这个主题在App全局都可以监听到

  • 拿一个Test.vue页面进行测试
<template>
  <view>
    <u-button text='发布' @click="fire"></u-button>

  </view>
</template>
<script>
export default 
  onLoad()
  	//在onLoad的时候或者组件mouted的时候进行监听挂载
    this.$disp.on('myfire',res=>
      console.log(`[disp on] $JSON.stringify(res)`)
    )
  ,
  methods: 
    fire()
      // 发布主题
      this.$disp.fire("myfire",`zeeland's boardcast`)
    
  

</script>
  • 点击发布按钮,运行结果如下:

参考资料

对象间的联动——观察者模式

以上是关于基于uniapp/Vue的发布订阅模式实现和快速上手的主要内容,如果未能解决你的问题,请参考以下文章

基于Redis的发布/订阅模式实现者:RedisQ

基于Redis的发布/订阅模式实现者:RedisQ

uniapp vue2项目迁移vue3项目

在Unity3D中基于订阅者模式实现事件机制

Spring中的观察者模式(发布订阅模式)(基于SpringBoot实现)

从发布-订阅模式到消息队列