Uknow | 优维低代码:Events 事件
导语
优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。
连载第二十一期
《高级指引:Events 事件》
▽
在 Storyboard 中可以为构件配置事件的处理:BrickConf。
例如:
对于以上配置,在构件 发起 something.happened 事件时,将触发内建处理函数 console.warn;而在发起 others.happened 事件时,将依次触发内建函数 console.log、找到 并调用它的 openModal() 方法。
构件的事件处理器主要有三种种:内建处理器、Provider 处理器、自定义构件处理器。
# 内建处理器
使用 action: "..." 来配置内建处理器,使用 args: [...] 设置传递给处理器的参数。
当前内建处理器主要有以下几类:
history.*
segue.*
alias.*
legacy.*
location.*
window.*
event.*
console.*
message.*
handleHttpError
context.*
state.*
localStorage.*
sessionStorage.*
tpl.*
# 内建处理器:history.*
更多信息请参考 History 会话历史。
# 内建处理器:location.*
# 内建处理器:window.*
# 内建处理器:legacy.*
# 内建处理器:event.*
# 内建处理器:console.*
# 内建处理器:message.*
# 内建处理器:handleHttpError
# 内建处理器:segue.*
segue.* 接收一个必填参数和两个可选参数,分别为 Segue ID、路由中的 path 参数、URL Query 参数。
# 内建处理器:alias.*
alias.* 接收一个必填参数和两个可选参数,分别为路由的 alias、路由中的 path 参数、URL Query 参数。
# 内建处理器:context.*
context.* 接收两个参数:context name 和 context value。更多信息请参考 Context 上下文。注意:不能对绑定构件属性的 Context 执行 context.* 操作。
# 内建处理器:state.*
state.* 接收两个参数:state name 和 state value。
# 内建处理器:localStorage.*
localStorage 存储的信息,支持写入数据(setItem)方法和移除项(removeItem)方法。
需要获取数据的时候使用Evaluate Placeholders 求值占位符:<% LOCAL_STORAGE.getItem("your-key") %>
# 内建处理器:sessionStorage.*
sessionStorage 存储的信息,支持写入数据(setItem)方法和移除项(removeItem)方法。
需要获取数据的时候使用Evaluate Placeholders 求值占位符:<% SESSION_STORAGE.getItem("your-key") %>
# 内建处理器:tpl.*
tpl.dispatchEvent 可以用于在 Custom Template 自定义模板内部定义的 useBrick 中以 Custom Template 的名义对外发送事件。
它触发时将使用该构件所属的 Custom Template 作为事件源发送自定义事件,第一个参数为新的事件类型名,第二个参数是 CustomEventInit,可以包装新的 detail 数据。
# Provider 处理器
使用 useProvider 指定要使用的 Provider 构件名,并通过 callback 来处理 Provider 的 resolve(...args) 调用后的结果。
# 自定义构件处理器
自定义构件处理器让构件的事件可以传递给其它指定构件,执行指定构件的方法或设置指定构件的属性。
自定义构件处理器:执行指定构件方法
自定义构件处理器:设置指定构件属性
提示:事件处理器的 args 参数可使用参数注入 💉。
# 条件判断 💉
在事件处理器中可以配置 if 字段,以根据事件信息决定是否执行相关事件处理。它的使用方式和条件渲染大体相似,例如:
# 接口定义
请查看 BrickEventHandler