中介者
JiessMidder中介者用于建立模块间的关联,是模块内部的状态管理器
项目中常使用vuex,pinia,redux进行全局的状态管理;与之类似, midder中介者常作为模块中的状态管理,更灵活的控制模块内的数据交互
准备工作
使用包管理器,安装依赖
# 安装工具模块
npm i @jiess/utils -S
# -------------------------------------------------
# 引入未经babel转化的版本(体积小,建议高版本项目中使用)
import JiessMidder from '@jiess/utils/midder';
# 引入babel转化的版本(体积大,建议低版本项目中使用)
import JiessMidder from '@jiess/utils/JiessMidder.babel';
使用cdn引入js库
# 引入未经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
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,通过该返回可获取最终的广播回执
const promise = midder.dispatch('testName', {
tag: 'testTag',
defaultValue: '这是初始值'
}, '参数1', '参数2');
promise.then(data=>{
console.log('最终结果值:',data);
})