导语

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维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