优维低代码：Custom Templates 自定义模板

导语

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

连载第十六期

《高级指引：Custom Templates 自定义模板》

▽

# 背景

在较早的 Legacy Templates 构件模板中（以下称 Legacy Templates），我们定义了一种使用 JavaScript Functions 定义的构件模板，这一层抽象在一定程度上封装了复杂的构件配置。

Legacy Templates 使用函数定义，因此拥有了高度灵活的动态展开能力。但函数定义使得框架无法将它们像普通构件一样地利用起来，因此受到了诸多限制，例如模板无法享受 Provider 刷新带动更新、无法对模板绑定事件处理、无法让用户编排一个自定义模板等等。

因此有必要设计一种自定义模板（以下称 Custom Templates），它使用静态结构声明（JSON or YAML），并且拥有普通构件的所有能力，以便在 Brick Next 中编排者可以像普通构件一样去使用它们。

# 原理

Custom Templates 的定义和 Storyboard 中的构件配置基本保持一致，可以在它内部配置多个构件，并且可以为这些构件配置插槽。在系统渲染该模板时，将按模板定义展开，并维护一份模板外部与模板内部的属性和事件等的的映射关系。

模板的展开过程如下图所示：

上图中 紫色边框 表示的是 Custom Template，模板在运行时按模板的定义被展开，绿色边框 的构件是模板内部定义好的构件，展开前的模板的 tools 插槽下的 橙色边框 的构件按模板定义被移植到了 basic-bricks.micro-view 的 toolbar 插槽中。并且模板构件的属性和事件等也会按模板定义映射到相关内部构件中。

# 示例

例如一个简单的模板定义：

# A custom template definition.name: "some-package.my-custom-template"bricks:  - brick: "basic-bricks.micro-view"    properties:      pageTitle: "My Awesome Page"    slots:      content:        type: "bricks"        bricks:          - brick: "my.awesome-brick"          - brick: "my.another-b