低代码平台实战分析(二)

[huandie2012]

接上篇......

5、组件间通信

组件的通信可以大致分为这几类： 组件方法：每个组件都会暴露出一些方法供其他组件进行调用。例如表格组件，我们可以暴露出查询表格数据方法；弹窗组件，可以暴露打开、关闭方法等等。 系统动作：有些方法并不属于某个组件，而是系统全局的动作，例如路由的跳转、全局的消息提示、页面加载动画的显隐等等。- API调用：这一类主要用于处理组件与服务端的交互，也就是服务端api接口的调用。 这里我们主要说一下组件的方法，也就是自定义事件的定义。 使用页面设计器设计好页面之后，生成的组件元数据会附加一个ID字段，这个字段在事件监听中也起到了很重要的作用，能够有效的避免页面中相同的组件重复的触发事件。 设计器中的每个组件都对应了一段json元数据，组件自身属性设置和组件关联事件的属性设置都可以在右侧的属性配置区域进行赋值，事件属性可以定义为event，示例如下：代码编辑器插件

{
     code: 'myButton',
     name: '按钮',
     props: {
           type: 'default',
           size: 'small',
           ......
           event: 'function action(ctx){\n console.log('action')\n}'     //这个ctx参数就是vue组件中的this，在代码编辑器中编写事件时，就可以通过ctx变量调用vue组件methods中的方法了
     }
}

将事件配置成了一段函数字符串，可以使用eval或者Function去执行，这里推荐使用Function。 首先我们定义一个字符串函数解析方法funcStrParse，这个方法的参数是一段函数字符串，返回值是一个函数。执行时，我们只需要调用funcStrParse返回的函数即可。：

function funcStrParse(funcStr) {
  return Function("'use strict';return (" + funcStr + ")")();
}

总结

整个低代码平台比较复杂的一个体系，有这样几个难点，首先是画布，涉及到基于鼠标原生事件组织出拖拽识别、边缘探测等能力，其次是渲染过程对schema的运行时适配以及性能优化，此外还有出码模块和入料模块根据组件属性自动生成描述文件等辅助功能，涉及到语法分析和转化。