前端函数

前端函数允许用户编写复杂的业务逻辑。(代码运行环境归属用户。)

什么是前端函数

为了支持复杂业务逻辑的编写和复用,魔笔低代码开发平台定义了一种可执行 JavaScript 脚本的数据对象,由于对应脚本是在浏览器中执行,因此称为前端函数。

前端函数作用域

页面级前端函数

页面级前端函数仅能在对应页面中被使用,可访问和操作对应页面的组件和数据以及全局的数据。

全局级前端函数

全局级前端函数可在所有页面中被使用,可访问和操作全局的数据。

创建前端函数

可在左侧代码面板中创建当前页面或全局的前端函数,前端函数的设置包括参数、函数体、成功回调、失败回调、描述、防抖和禁止执行条件。

image

参数

image

当需要定义带参数的前端函数时,可添加一个或多个参数,参数的定义包括参数名、参数类型、默认值和参数描述。

  • 参数名:必填,不可重复,需符合 JavaScript 标识符规范。

  • 参数类型:必填,与变量类型定义一致,预填类型为string

  • 默认值:可选,可输入表达式,当默认值未定义时将根据参数类型设置默认值。

  • 参数描述:可选,对参数进行注释说明。

定义的参数可在对应前端函数的函数体中通过参数名进行引用。

函数体

函数体用于承载 JavaScript 脚本,既可以执行副作用,也可以执行异步操作。return语句是可选的,在前端函数执行后,函数体中定义的返回值将记录在前端函数对象的data属性中。

成功回调和失败回调

前端函数执行后将触发成功事件或失败事件,成功回调和失败回调分别用于定义成功事件和失败事件的事件处理器,可定义多个事件处理器,多个事件处理器是并发执行的,不保证时序。

事件的详细介绍参考:事件

描述

对前端函数进行注释说明。

防抖

执行前端函数时的防抖延迟时间,单位为毫秒。可输入表达式,默认值为0,即不进行防抖处理。

禁止执行条件

可输入表达式,当表达式值为true时则禁止执行,默认值为false,即正常执行。

执行前端函数

前端函数仅支持手动执行,前端函数执行方式包括手动点击、前端函数事件调用和代码调用三种方式。

在底部面板编辑和查看前端函数时,用户可通过点击“运行”按钮执行前端函数,右侧将展示本次执行的结果。

image

手动点击主要用于调试,实际场景中一般通过前端函数事件调用和代码调用的方式执行前端函数。例如为一个按钮组件配置点击事件,事件动作为前端函数,选择需要调用的前端函数标识,并传入参数对象。

image

此外,也可以将事件动作设置为执行脚本,在脚本中可通过function1.trigger()调用前端函数。

image

如需要在调用时传递参数,可在trigger调用时传递参数对象。

image

前端函数 API 的详细介绍参考:前端函数 API

注意事项

  • 异步:前端函数是异步执行的,函数体中可以使用await关键字,通过trigger调用时返回值是Promise

  • 并发:前端函数是并发执行的,多次触发同一个前端函数时不保证执行顺序。

常见问题解答

Q: 如何精确获取前端函数某一次的执行结果?

A: 由于前端函数的并发执行特性,以及前端函数对象的单例特性,无法通过data属性精确获取某一次的执行结果。如需精确获取某一次的执行结果,可在代码调用时直接获取trigger的结果,如下图所示。

image

Q: 如何写递归函数?

A: 为了减小出现死循环的可能性,在前端函数的函数体中禁止调用自身,并且由于前端函数是异步的,并不适合直接写递归函数。如需写递归函数,可以在函数体中声明内部函数,或利用预加载 JS 功能定义函数,如下图所示。

image

image

Q: 如何写同步函数?

A: 前端函数是异步执行的,如需写同步函数,可通过预加载 JS 功能定义同步函数。