魔笔低代码开发平台定义了一种灵活的表达式,本文详细介绍了表达式的定义、常见用法以及注意事项。
什么是表达式
表达式是逻辑开发中的核心概念,表达式既可以是纯静态的文本内容,也可以通过插值语法嵌入 JavaScript 表达式。在嵌入的 JavaScript 表达式中,可以访问特定作用域的数据,当依赖的数据发生变化时,表达式将自动执行,从而实现表达式的值对依赖数据项的动态绑定,表达式的自动更新是魔笔低代码开发平台数据驱动流程中的重要环节。
表达式语法
表达式可分为静态表达式、动态表达式和混合表达式,其中动态表达式和混合表达式基于插值语法实现。
静态表达式
当用户需要配置静态内容时,可以直接写入无插值的文本,即静态表达式。
例如指定一个按钮组件的文本为“确定”,可直接写入确定
。
静态表达式的初始类型为string
,因此通常用于期望类型为string
的配置项,若期望类型不为string
,平台会尝试将表达式的值从string
类型转为期望类型,如不希望触发平台的类型转换,可以在动态表达式中书写字面量等静态内容,例如{{ true }}
。
动态表达式
当用户需要配置动态内容或直接指定非string
类型的内容时,可以在{{ }}
内写入 JavaScript 表达式。
例如将一个文本组件的内容绑定为输入框组件 input1 的值,可写入{{ input1.value }}
。
混合表达式
当用户需要将静态文本和动态文本进行拼接时,可以利用插值语法书写混合表达式。
例如将一个文本组件的内容设置为同时展示输入框组件 input1 和 input2 的值,可写入input1 的值为:{{ input1.value }},input2 的值为:{{ input2.value }}
。
需要注意的是,混合表达式是将静态文本和动态文本以字符串的形式拼接的,因此混合表达式的初始类型为string
。
插值语法解析规则
从左至右扫描,遇到{{
进入 JavaScript 表达式语法空间,在 JavaScript 表达式语法空间内正常解析字符串,遇到}}
且左侧不存在未闭合的{
时退出 JavaScript 表达式语法空间,若 JavaScript 表达式语法空间直至表达式末尾仍未退出,则对应的{{
及其右侧内容将被视为静态文本。
下面对插值语法的边界情况进行举例说明。
边界情况 | 解析结果 | 示例 |
没有 | 静态文本 | |
| 表达式编辑器中视为 JavaScript 表达式,解析结果为静态文本 | |
| JavaScript 字符串 | |
| JavaScript 对象 |
由于插值语法基于{{
和}}
进行解析,因此一些特殊文本需要在{{ }}
内书写,例如需要写入一个静态文本{{ a }}
,可写入{{ "{{ a }}" }}
。
常见用法
魔笔低代码开发平台中有大量的数据绑定是通过表达式实现的,下面列举一些常见用法。
组件配置中使用表达式进行数据绑定
在组件的配置面板中,允许动态配置的属性都提供了表达式的能力,可通过表达式实现组件渲染的数据驱动。
例如当前页面有一个输入框组件 input1 和一个文本组件 text1 ,text1 的“文本内容”属性中写入 {{input1.value}}
,就建立了 text1 的“文本内容”与 input1 组件的值的依赖关系,当 input1 组件的值发生变化时,text1 的内容也会自动更新。
数据库集成操作中使用表达式实现 SQL 语句的动态拼接
数据库集成操作中,用户输入的 SQL 语句被视为表达式,用户既可以编写静态的 SQL 语句,也可以通过插值语法实现 SQL 语句的动态拼接。
例如要根据输入框组件 input1 的输入值来查询 users 中对应 name 的数据,则可以书写下图的混合表达式。
参数使用表达式实现动态默认值
在前端函数或集成操作中,允许用户添加参数,参数的默认值被视为表达式,用户可以配置静态或动态默认值。
例如要定义一个参数名为 name 的参数,其默认值为输入框组件 input1 的输入值,则可以进行下图的参数配置。
注意事项
副作用:表达式中不应包含可能产生副作用的逻辑,副作用是指对平台其他部分产生影响,例如表达式中不允许修改平台数据、调用前端函数或发送网络请求。
异步:表达式是同步执行的,不可执行异步操作。
自动执行:表达式本身是自动执行的,但不一定会触发其他依赖该表达式的逻辑自动执行,例如集成操作支持配置触发方式,前端函数仅支持手动触发。
类型转换:表达式执行时会尝试根据期望类型进行类型转换,可通过表达式输入框的预览功能查看最终执行结果。
混合表达式拼接:静态文本的所有字符都将参与拼接,JavaScript 表达式的值参与拼接,例如
a{{b}}
与a {{b}}
不等价,但a{{b}}
与a{{ b }}
等价。