低代码中的事件联动

394 阅读2分钟

事件联动:

事件联动简单举例,就是点击一个组件,执行相应的一个动作,例如点击按钮组件,打开弹窗组件。

tmagic-editor 事件联动json

浅析一下在tmagic-editor中,事件联动是如何实现的。在tmagic中,有

  1. 通用的事件联动:如点击组件1,页面滚动到顶部
  2. 多个组件之间的事件联动:点击组件1,组件2隐藏或展现。

这里主要讲第二种,如何实现,点击一个按钮组件,弹出相应的蒙层组件。在官网配置好具有这种功能的组件后,可以看到按钮组件的dsl如下:

{
          type: 'text',
          id: 'text_9027',
          style: {
            width: '280.75',
            height: '38.97',
            ...
          },
          name: '文本',
          text: '${ds_425cf2a6.nickname}',
          multiple: true,
          events: [
            {
              name: 'magic:common:events:click',
              actions: [
                {
                  actionType: 'comp',
                  to: 'overlay_0c45b917',
                  method: 'openOverlay',
                  codeId: '',
                  dataSourceMethod: '',
                },
              ],
            },
          ],
          created: '',
          mounted: '',
          displayConds: [],
        }

低代码中所有的行为都是通过dsl来进行触发的,从events可以看到,点击该文本组件时,overlay_0c45b917组件执行openOverlay方法。这个流程简单讲就是事件注册和事件监听。但是再讲细一点,具体怎么实现呢。

tmagic-editor 事件联动原理

从c端页面如何执行事件联动开始看起
new Core(c端入口)-> setConfig -> setPage -> bindEvents(遍历页面所有的节点,组件json中有events字段的,对事件名和要执行的方法进行监听,当点击的时候,执行相应的方法)

Q1: 执行的方法,如何知道?

获取json中的events里面的to的组件('overlay_0c45b917')的实例,从实例上拿到method字段('openOverlay')对应的方法。 实例打印如下:

image.png

Q2:instance是什么,为什么有这些内容?

同样是c端入口,在bindEvents之前,会根据json,对页面所有的节点执行initNode,在initNode中,对组件的'created','mounted'进行监听(listenLifeSafe方法),并对instance存储,这里的instance就是上面用到的instance,既然有监听,就有相应的事件emit。

Q3: 各个组件的事件如何注册的?

在各个组件的ui渲染器中,会执行useApp方法,useApp中emit的参数emitData,就是我们在packages/Core中接收到的instance的值

image.png

image.png

总结

简单来讲,分三条线

  1. ui渲染器,每个组件渲染的时候,在生命周期里会emit事件,如果这个组件有可以被触发的事件就作为参数emitdata
  2. c端页面new Core时
    2.1 每个node初始化时,对步骤一里的事件进行接收,保存instance
    2.2 对dsl进行遍历,组件有events字段时,对事件名和方法(方法从instance中获取)进行监听,点击时执行该方法