上一篇文章我们讲述了在 EasyMABuilder 中通过 Context 和 State 在编排中管理数据,其中使用到了形如 <% CTX.saving %> 的表达式,和无代码平台不同,低代码平台为了能解决更丰富的应用场景、满足更个性化的需求,仍然离不开代码的编写,包括简单的逻辑计算和数据加工处理,而对于高阶开发者搭建更复杂的应用时,甚至需要不逊色于专业代码的开发体验,对此 EasyMABuilder 提供了对应的代码开发能力:表达式和微应用函数。
表达式
表达式用于在编排中引用动态数据并进行简单的加工处理,可以在编排中随处使用,包括属性、事件、回调等等。
这里的表达式是 JavaScript 的表达式子集,对于有少量 Web 编程、或者 C/Java 编程经验的同学,上手都不会太难。
- 引用数据:
<% CTX.saving %> - 逻辑判断:
<% CTX.saving ? "Saving..." : "Save" %> - 数学运算:
<% CTX.rate * 100 %> - 字符串组装:
<% `/project/${DATA.projectId}` %> - 数据过滤:
<% DATA.list.filter(item => item.active) %>
表达式还支持最新的 JavaScript 的语言特性,例如在 ES2020 中引入的可选链 Optional Chaining 和空值转换 Nullish Coalescing 语法:
<% a?.b %><% data.settings ?? defaultSettings %>
我们还在表达式中集成了 Lodash 和 Moment,对于有经验的开发者可以更得心应手的进行数据加工。此外还集成了 EasyMABuilder 官方提供的管道加工函数 brick-next-pipes,进行特定应用场景的数据加工。
<% _.findLastIndex(list, "active") %><% moment(date).format() %><% PIPES.yamlStringify(input) %>
而为了使流式的、连续的数据加工可以更流畅的编写、并具有更好的可读性,我们加入了 JavaScript 目前还在提案阶段的 Pipeline Operator 的特性,并采用了其 minimal 草案。
<% DATA.source |> JSON.parse |> PIPES.yamlStringify %>
另一方面,由于表达式的定位是处理简单的数据加工,除了不能使用 JS 语句类语法外,也限制了修改操作类的 JS 表达式语法,例如:赋值 a = 1、更新值 ++i、删除 delete a.b 等,同时也无法访问 DOM 对象。
微应用函数
表达式使用简单的语法就可以完成常见的数据加工,而当面对更加复杂的数据处理的需求时,它就显得力不从心了,同时越复杂的逻辑越需要自动化测试来保障其健壮性和可维护性,这些都是表达式不具备的,因此,我们提供了微应用函数。
微应用函数直接在 Visual Builder 中相关的项目中编写,使用 JavaScript 或 TypeScript:

编写好的函数可以在该微应用的编排表达式中使用:<% FN.sayHello("World") %>。
微应用函数中可以使用上文表达式中提到的内置对象,例如 _、 moment、 PIPES 等。同时函数也可以使用同一个微应用下的其它函数。而无论使用 JavaScript 或 TypeScript ,函数编辑器都具有类型提示、自动补全、代码检查等能力,其体验向桌面 IDE 看齐。



对函数进行调试也非常简单,只需给出输入参数即可运行并查看返回结果:

微应用函数为解决复杂问题而生,虽然它直接在 Visual Builder 界面中编写,但仍需要手段来保障其质量、以及健壮性和可维护性。对此,我们提供了对函数进行单元测试的能力,并提供覆盖率统计。
与编写普通代码的单元测试不同,由于微应用函数专注于处理数据,不依赖副作用也不产生副作用,因此,我们的测试用例可以直接来自 Debug 的输入参数和输出结果。编写单元测试后,可以直接统计覆盖率,并在代码编辑器中给出未覆盖的代码部分的相关提示。

而在维护微应用函数时,修改代码并保存前,系统会自动运行单元测试,并对比测试预期结果,以便发现可能的问题:

至此,我们在低代码平台中获得了与专业代码媲美的编写代码的能力和体验,不过这些代码仅限于数据加工,它无法参与 UI 界面相关的工作,虽然 EasyMABuilder 提供了数百个开箱即用的构件,并提供了在微应用层面封装模板的能力,但对于 UI 界面,总有更个性化的场景和需求,对此,我们提供了用户编写新构件的能力,并提供配套的脚手架工具来方便用户更快捷的编写新构件,下一期我们将讲述《构件开发 Step by Step》。