优维低代码：Evaluate Placeholders 求值占位符

导语

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

连载第十八期

《高级指引：Evaluate Placeholders 求值占位符》

▽

Evaluate Placeholders 求值占位符可同时用于 transform 及参数注入。与普通的 Placeholders 占位符不同，求值占位符可以编写真正的 JavaScript 代码（实际是 JavaScript 的表达式子集），因此它的能力更丰富、使用更灵活。

# 示例

your-prop-a: "<% _.find(EVENT.detail, item => item.id === QUERY.objectId) %>"your-prop-b: "<% PIPES.yamlStringify(DATA.cellData) ?? '' %>"your-prop-c: "<% `/your-app/${QUERY.path}?quality=${QUERY.q}` %>"transform:  your-prop-d: "<% DATA.cellData + QUERY.id %>"

# 说明 

求值占位符是「以 <% + 至少一个空白符开始，并且以至少一个空白符 + %> 结束的字符串」，它的内部包裹一个且仅一个 JavaScript 表达式。

例如：​​​​​​

properties:  # ✅ Will Work  a: "<% `/your-app/${QUERY.path}?quality=${QUERY.q}` %>"
  # 🚫 Not starting with `<% `  b: "/bad/<% QUERY.path %>"
  # 🚫 Not ending with ` %>`  c: "<% QUERY.path %>/bad"
  # 🚫 Missing spaces  d: "<%QUERY.path%>"

求值占位符中可以使用大部分 JavaScript 语法，出于避免意外的错误使用、安全、框架复杂度等方面考虑，支持的语法子集将限制在 Expression 中，并剔除了赋值相关的语法或操作，具体的支持清单见本文档最后的附录。

新的占位符可同时用于 transform 及参数注入。下面列举一些常见的将原占位符改写为求值占位符的示例。​​​​​​​

old: "${QUERY.id}"new: "<% QUERY.id %>"​​​​​​

# Path parameters and queryold: "/your-app/${objectId}?quality=${QUERY.q}"# Template literalnew: "<% `/your-app/${PATH.objectId}?quality=${QUERY.q}` %>"​​​​​​​

# Pipesold: "${EVENT.detail | yamlStringify }"new: "<% PIPES.yamlStringify(EVENT.detail) %>"​​​​​​​

# Transformold: "@{cellData}"new: "<% DATA.cellData %>"

​​​​​​​

# Eventsold: "${EVENT.detail}"new: "<% EVENT.detail %>"​​​​​​

# Mix transform and queryold: "@{cellData.id}/detail/${QUERY.id}"new: "<% `${DATA.cellData.id}/detail/${QUERY.id}` %>"

# 内置对象

求值占位符支持所有原参数注入支持的对象：

并且还额外支持了一些对象：

# 高级

由于表达式（包括占位符和 Transform）计算得到的数据通常包含来自用户输入的数据，因此为了避免意外解析（例如某数据需要保存原始内容的表达式字符串），表达式得到的数据的内部的其它表达式在消费时不会执行解析。同时也避免了类比于 XSS 的攻击，例如攻击者将某实例描述字段设置为包含恶意表达式的内容。

# 递归标记

通过添加递归标记 ~ 例如 <%~ DATA %>，可以允许该表达式得到的数据的内部的其它表达式（包括占位符和 Transform）在消费时继续执行解析。该标记适用于 Dashboard 等场景：数据库中的数据明确包含需要被解析的表达式。