优维低代码：Brick Life Cycle 构件生命周期

 

 

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

连载第十三期

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

▽

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

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

• 当页面进入：

Ⅰ.useResolves

Ⅱ.onBeforePageLoad

Ⅲ.onPageLoad

Ⅳ.onAnchorLoad or onAnchorUnload

Ⅴ.onMessage

• 当页面离开时：

Ⅰ.onBeforePageLeave

Ⅱ.onPageLeave

# useResolves

定义构件渲染前需要使用的异步数据处理，请参考 Use Resolves。

# onBeforePageLoad

定义页面渲染前要执行的动作，它是配置初始化页面的主题和模式的窗口期。它的配置与构件单个事件的配置方式基本一致。

# onPageLoad

定义构件在页面渲染完成后的动作。它的配置与构件单个事件的配置方式基本一致，例如：

- brick: your.any-brick
  lifeCycle:
    onPageLoad:
      action: console.log

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

- brick: your.any-brick
  lifeCycle:
    onPageLoad:
      - target: _self
        method: doSomething


      - target: your.other-brick
        method: doSomethingElse
        args:
          - oops

# onAnchorLoad

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

CustomEvent<{ hash: string; anchor: string; }>

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

# onAnchorUnload

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

# onBeforePageLeave

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

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

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

- brick: your.any-brick
  lifeCycle:
    # 当页面离开前触发 `onBeforePageLeave`
    onBeforePageLeave:
      # 通过事件配置的 `if` 决定是否执行对应动作。
      # 如果是框架代理的内部链接跳转，`EVENT.detail` 中将包含 `{ location }` 为将要跳转的目标页面的地址信息。
      # 如果是浏览器级别的页面跳转、刷新或关闭等行为，`EVENT.detail` 始终为 `{}`。
      # 因此，通常应判断 location 是否存在。
      if: '<% !EVENT.detail.location?.pathname.startsWith("/specified/page") %>'
      # `history.bock` 方法阻止页面离开，它接收一个字符串参数，用于提示用户。
      action: history.block
      args:
        # 注：提示信息参数仅适用于框架代理的内部链接跳转，由浏览器触发的页面离开无法控制提示信息。
        - "You should stay, are you sure to leave?"

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

- brick: your.form-brick
  events:
    something.change:
      # 可以由指定事件提前设置 `history.block`。
      # 此时需要在另一事件中主动设置 `history.unblock`，否则页面将始终处于阻止状态。
      action: history.block
      args:
        - "Your data has not been saved, are you sure to leave?"
    submit:
      useProvider: ...
      callback:
        success:
          action: history.unblock

# onMessage

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

- brick: your.any-brick
  lifeCycle:
    onMessage:
      handlers:
        - target: your.any-brick
          transform:
            dataSource: <% EVENT.detail %>

示例：

brick: your.any-brick
lifeCycle:
  onPageload:
    - action: message.subscribe
      args:
        - pipelineChannel
        - system: pipeline
          topic: "pipeline.task.running.${QUERY.taskId}"
      callback:
        success:
          action: console.log
        error:
          action: console.log
  onMessage:
    - channel: pipelineChannel
      handlers:
        - target: your-brick
          transform:
            dataSource: <% EVENT.detail %>

---