Skip to content

中介者

JiessMidder中介者用于建立模块间的关联,是模块内部的状态管理器

项目中常使用vuex,pinia,redux进行全局的状态管理;与之类似, midder中介者常作为模块中的状态管理,更灵活的控制模块内的数据交互

准备工作

使用包管理器,安装依赖

bash
# 安装工具模块
npm i @jiess/utils -S
# -------------------------------------------------

# 引入未经babel转化的版本(体积小,建议高版本项目中使用)
import JiessMidder from '@jiess/utils/midder';

# 引入babel转化的版本(体积大,建议低版本项目中使用)
import JiessMidder from '@jiess/utils/JiessMidder.babel';

使用cdn引入js库

bash
# 引入未经babel转化的版本(体积小,建议高版本项目中使用)
<script src="//cdn.jsdelivr.net/npm/@jiess/utils/midder.js"></script>

# 引入babel转化的版本(体积大,建议低版本项目中使用)
<script src="//cdn.jsdelivr.net/npm/@jiess/utils/JiessMidder.babel.js"></script>

使用cdn引入后,会在全局挂载名为JiessMidder的实例对象

使用

实例化Midder构造函数,得到实例对象midder

js
const midder = new Midder(
  jiess: Jiess,
  // 对midder绑定唯一的标记
  reference: unknown,
  // 默认defaultKey模式
  model: string,
  // 默认开始防抖模式
  isDebounce = true
)

在Jiess基础库中基于Midder封装成$midder函数,使用$midder函数不需要传入jiess实例对象, 其余参数保持一致,简化了实例化过程

绑定模式

midder可以与传入的reference参数形成映射关系,reference可以是任意的数据类型

单列模式中,每次实例化得到同一个实例,使用midder传入相同的reference, 也可以得到同一个midder,可以更加灵活的控制生成的实例

watchEffect

  • 类型 Function
  • 参数 (fn: Function, tag: String, param = {})
  • 返回
  • 详细

clean

  • 类型 Function
  • 参数 (name?: string, tag?: string)
  • 返回
  • 详细

订阅模式

midder中使用广播-订阅的模式,对模块内的功能组件关联

在模块内的每个功能块都应访问到midder,所以可借助midder将模块内各功能组件关联

addListener

  • 类型 Function
  • 参数 (name: string, config: Object | Function )
  • 返回
  • 详细

dispatch

  • 类型 Function
  • 参数 (name: string, config: Object | Function )
  • 返回
  • 详细

绑定模式

midder可以与传入的reference参数形成映射关系,reference可以是任意的数据类型

在单列模式中,每次实例化均得到同一个实例,使用midder时,传入相同的reference, 也均能得到同一个midder,这样可以更加灵活的控制生成的midder实例

绑定模式下的model控制

  • no-store:不启用缓存,即不开启绑定模式,每次实例化均得到唯一的实例对象
  • 其他:启用缓存,开启绑定模式

watchEffect

  • 类型 Function
  • 参数 (fn: Function, tag: Object, param = {})
  • 返回
  • 详细

方法是基于$watchEffect的封装,提供一个字符串标记tag,则命名为该tag 的watchEffect仅会初始化一次,不会随着组件体的更新而再次执行fn

clean

  • 类型 Function
  • 参数 (name?: string, tag?: string)
  • 返回
  • 详细

用于移除监听器;按照精细化程度,可分为三种场景:

不传入参数:清除当前midder中所有的监听器(Listener) 仅传入name:清除当前midder下名为name的所有监听器 传入name和tag:清除当前midder下名为name且被标记为tag的监听器

订阅模式

在模块内的每个功能块都应访问到midder,且midder中使用广播-订阅的模式, 实现了对模块内的各功能组件的关联

单订阅

midder中的所有监听器被添加到同一个回调集合中,所有的触发器被添加到同一个 执行队列中,同一个执行队列的触发器,触发与之对于的监听器;因此,触发器的 每一次触发,均会全部触发midder中所有的监听器

多订阅

midder中的监听器按照name添加到对应回调集合中,触发器按照name添加到对应 执行队列中,同一个执行队列的触发器,触发与之对于的监听器;

订阅模式下的model控制

  • no-store:启用多订阅模式
  • multiple:启用多订阅模式
  • 其他:单订阅模式

addListener

  • 类型 Function
  • 参数 (name?: string, config: Object | Function )
  • 返回
  • 详细

用于添加监听器的方法;类似于接收信号的终端

单订阅模式

该模式下,无需提供name,首参可以是监听器(监听器函数),也可以是监听器对象

多订阅模式

该模式下,首参需提供name,次参可以是监听器(监听器函数),也可以是监听器对象

监听器对象

监听器对象为Object类型,需提供必要属性listener(监听器函数),否则无法正确解析, 为了避免每次更新重复添加监听器,可以提供tag属性(字符串)作为标记

监听器函数

  • 类型 Function|AsyncFunction
  • 参数 (data : any, ...args )
  • 返回
  • 详细

data初始为广播的数据,若监听器中返回非undefined的数据,则后续队列监听器中的data, 则是上次放回的数据;

监听器的执行支持异步函数,因此可以先后按照顺序处理异步任务

dispatch

  • 类型 Function
  • 参数 (name?: string, config: Object | Function )
  • 返回
  • 详细

用于触发监听器的方法;类似于广播信号的基站

单订阅模式

该模式下,无需提供name,首参可以是defaultValue(默认值),也可以是数据对象

多订阅模式

该模式下,首参需提供name,次参可以是defaultValue(默认值),也可以是数据对象

数据对象

数据对象为Object类型,需提供必要属性defaultValue(默认值),否则无法正确解析, 为了避免每次更新重复添加触发器,可以提供tag属性(字符串)作为标记

广播参数

广播参数即触发器执行时用于广播的参数,其中defaultValue为初始提供的默认参数, 如果监听器为返回新的数据,则以defaultValue作为执行结果值

注:广播时后续的参数,也可以在监听器中分别接收

广播回执

触发器的执行会返回一个promise,通过该返回可获取最终的广播回执

js
const promise = midder.dispatch('testName', {
  tag: 'testTag',
  defaultValue: '这是初始值'
}, '参数1', '参数2');

promise.then(data=>{
  console.log('最终结果值:',data);
})