组件化&模板化 ​

一、初衷 ​

降本提效：快速响应用户需求，降低对人员的技术要求，处理相同的需求时有更少的成本，提升企业竞争力。

技术壁垒：定制化开发具有行业特性的组件，与竞品做出差异化产品。

二、技术方案 ​

基于低代码平台，构建组件&模板应用包，发布应用包后可授权至各相关租户、站点，相关站点的项目下就会新增部件和模板。

其中组件区分移动端项目和PC端项目，PC组件仅可在PC项目中应用，移动组件仅可在移动项目中应用。

应用包目前按业务通用性和组件功能拆分为：PC-可视化组件库（lc-zkcomponents）、PC-图表（lc-pcchart）、PC-地图（lc-zkmap）、M-Vant组件（lc-vant-tools）、M-图表（lc-mobilechart）

根据低代码平台技术架构设计，低代码平台支持开发部件、页面模板，另外支持UIBlock形式引用页面。同时支持自定义某一节点的参数设置配置项setter，使得组件可以自定义可视化配置面板，让配置人员可以方便地调节组件数据和组件参数。

三、组件、模板和UIBlock ​

组件、模板、UIBlock分别具有一些特性，这些特性决定了我们在处理具体需求的时候，是把它作为组件开发还是作为模板开发，是否使用UIblock进行封装。

3.1 组件 ​

组件=部件，支持定义一个dom结构，结构中可以在循环中定义JSON数组，但是不支持定义样式表文件和全局模型，因此更加适合不含动态交互效果的基础dom结构进行使用。

当使用者拖出一个组件时，即可理解为将组件对应JSON复制到某一现存节点的children字段中作为子元素出现，可以方便地还原dom结构。

3.2 模板 ​

模板比组件高一个层级，模板包含了一个页面的所有内容，即包含了组件所不包含的样式表、全局模型等全部内容，这样的特性决定了模板的使用是覆盖的，用户在使用模板的时候双击所选模板，会替换当前页面中的所有内容变为模板的内容，因此使用模板时最好新建一个新页面来进行应用，以免覆盖已存在内容，然后再用UIBlock引入到需要使用该模板的页面即可。

3.3 UIBlock ​

UIBlock（子页面）是页面引用的工具，可以引用同项目下的任一页面，有利于页面的模块拆分，保障每个页面的结构和代码不会过于复杂，也有利于多人分工协作。

UIBlock是节点的一种类型，可被应用于部件、模板，可以单独定义UIBlock的setter配置项，且引用UIBlock的父页面无法直接选中UIBlock内部的节点，所以UIBlock的更新会影响所有引用该UIBlock的页面，因此如果将一些固化的具有通用性的元素以UIBlock的形式进行封装，可以更好地进行更新维护

3.4 抉择方案 ​

当需要做一个组件/模板时，根据是否必须定义样式表或全局模型，可以决定是采用模板还是部件；在编写的过程中需要将具有通用性的东西尽可能地进行抽取，合理地封装成UIBlock，降低产品页面的节点复杂度，提高可维护性和稳定性。

四、名词定义 ​

为了更好地理解文档，这边约定一些名词：

4.1 组件 ​

组件=部件，是在低代码平台左侧-部件目录下可以被拖出来的一个dom结构（左侧节点目录下的一个完整目录树）。

4.2 根节点 ​

dom结构的最外层唯一的第一个节点

4.3 模板 ​

在低代码平台左侧-模板目录下可以双击应用的一个完整页面。

4.4 配置项（Setter） ​

当点击选中某一节点时，右侧配置栏中参数设置选项中的内容，该内容也是类似UIBlock形式引用的已编写好的页面，在节点JSON中定义为setter，值为配置项页面id

4.5 子页面（UIBlock） ​

引用其他页面的一种容器

4.6 变量 ​

在全局模型data中声明，用于控制样式、交互的值

4.7 配置内容（option） ​

组件支持的参数，一般放在节点数据中的options.attrs传给组件

4.8 第三方资源包 ​

组件依赖的js、css资源包，一般放于oss上，在低代码平台中以$js或$css的形式进行引入和使用

4.9 插槽（slot） ​

UIBlock封装的组件支持使用者向其内部放入自己编写的dom结构，这种形式叫做插槽，可以定义插槽名称以实现一个UIBlock使用多个插槽的目的

4.10 事件（events） ​

UIBlock封装的组件支持使用者定义交互-事件交互，名称为组件暴露的事件名，具体内容详见各组件支持的事件