导语

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。

连载第十三期

《编排详解:Brick Life Cycle 构件生命周期》

构件在自身渲染和页面渲染的各个时刻可以执行相关的动作,它们通过 lifeCycle 定义。

其生命周期包含的阶段及其顺序如下:

  • 当页面进入:

它同样支持传递一个数组以执行多项动作,另外,它额外支持配置 target: "_self" 以将目标指向到该构件自身:

# onAnchorLoad

定义构件在页面渲染完成后,当页面 URL 中包含非空的 anchor(URL hash 去掉前缀 #)时,需要处理的动作。它的配置与上一节 onPageLoad 一致。发送的事件为:

因此可以使用 ${EVENT.detail.anchor} 来获得 anchor 值,另外也可以使用 ${ANCHOR} 来获得相同的值。

# onAnchorUnload

类似 onAnchorLoad,但在页面 URL 中不包含 anchor 时触发,该事件不携带 detail。

# onBeforePageLeave

定义构件在页面离开前要执行的动作。结合 history.block 可以实现在特定条件下提示用户确认是否离开。

通过相关事件或构件属性绑定到 Context 上下文并通过 if 条件渲染构造判断条件以实现按条件阻止页面离开。另外也可以通过内置事件处理器 history.block 和 history.unblock 动态控制是否阻止页面离开及其提示信息。

示例一:阻止前往除指定页面外的其它页面:

undefined

示例二:当表单为已填写状态并且没有保存时阻止离开:

undefined

# onMessage

定义构件接收WebSocket消息推送中订阅的消息:

示例: