关于低代码:低代码系列之哈姆雷特千变万化的属性设置器

一个低代码平台最外围局部，可能大多数人都感觉是渲染器局部，而我更感觉属性设置器才是正正的灵魂所在，渲染器，物料决定了一个低代码平台的下线，而属性设置器决定了上线。就像一千个观众眼中有一千个哈姆雷特一样。明天就带大家看看 lowcode-engine 是怎么实现属性设置器的。

咱们先来梳理一下，咱们来写 vue 的时候，应用一个组件，必定会有很多属性，事件，款式须要咱们去定义，低代码平台也一样，只是简化了咱们应用的老本，利用这种可视化的形式去设置，组件的这些参数仍然须要有中央去通知组件，该怎么去渲染。这是就是属性设置器发挥作用的中央了。

设置器次要用于低代码组件属性值的设置，顾名思义叫 ” 设置器 ”，又称为 Setter。因为组件的属性有各种类型，须要有与之对应的设置器反对，每一个设置器对应一个值的类型。—— lowcode-engine 官网定义

咱们能够很清晰的看见 lowcode-engine 将设置器分为四类：

属性：展现该物料惯例的属性
款式：展现该物料款式的属性
事件：如果该物料有申明事件，则会呈现事件面板，用于绑定事件。
高级：两个逻辑相干的属性，条件渲染 和循环

其实从下面不难看出，这四个分类基本上涵盖了绝大部分场景的须要。咱们在前期只须要依据不同的应用对象凋谢绝对应的性能即可。

简略的梳理了一下思路与官网可能不完全一致，lowcode-engine 实现的相当简单，再加上是 React 代码，没有写过，看起来还是有点吃力，这种简单的零碎，lowcode-engine 官网采纳了面向对象的写法。每一个属性设置器都是一个 setter 类，他们之间能够互相嵌套，通过 path 门路操作具体的值，不理解的能够看一下【lodashjs】get 和 set 办法的实现。这样就能够和具体的每一个设置器之间离开来，只须要每个设置抛出对应的值变动。触发事件显示对应值即可。

通过上图咱们能够清晰的看见，物料与渲染器，与属性设置器之间的分割，setter 与 setter 的关系，其实也就对应着咱们的具体属性构造，有多少个属性就会生成多少 setter，彼此之间形成一个树形构造，path 门路作为沟通桥梁，获取值批改值。

贴一段官网代码，这个就是 setter 实现的一个接口，定义每一个 setter 领有的属性办法，都贴心的给出了正文

export interface SettingTarget {
  /**
   * 同样类型的节点
   */
  readonly isSameComponent: boolean;

  /**
   * 一个
   */
  readonly isSingle: boolean;

  /**
   * 多个
   */
  readonly isMultiple: boolean;

  /**
   * 编辑器援用
   */
  readonly editor: IEditor;

  /**
   * 拜访门路
   */
  readonly path: Array<string| number>;

  /**
   * 顶端
   */
  readonly top: SettingTarget;

  /**
   * 父级
   */
  readonly parent: SettingTarget;


  /**
   * 获取以后值
   */
  getValue: () => any;

  /**
   * 设置以后值
   */
  setValue: (value: any) => void;

  /**
   * 获得子项
   */
  get: (propName: string | number) => SettingTarget | null;

  /**
   * 获得子项
   */
  getProps?: () => SettingTarget;

  /**
   * 获取子项属性值
   */
  getPropValue: (propName: string | number) => any;

  /**
   * 设置子项属性值
   */
  setPropValue: (propName: string | number, value: any) => void;

  /**
   * 革除已设置值
   */
  clearPropValue: (propName: string | number) => void;

  /**
   * 获取顶层从属属性值
   */
  getExtraPropValue: (propName: string) => any;

  /**
   * 设置顶层从属属性值
   */
  setExtraPropValue: (propName: string, value: any) => void;

  // @todo 补充 node 定义
  /**
   * 获取 node 中的第一项
   */
  getNode: () => any;}

当然这个是外部实现了，要实现一个具体的 setter，不须要怎么简单，这个只是外部 lowcode-engine 外部流转，
上面官网给出的几个设置器，有趣味能够去看看怎么去实现的，最外围的局部是 ArraySetter 和 ObjectSetter, 这两个 setter 提供属性嵌套的能力，也是最罕用的.

【官网设置器源码仓库】

【官网设置器列表阐明】

优良的属性设置器，

须要有优良的扩展性
优良的交互性
简化设置优先准则

【低代码系列之序章】打翻前端的狗碗？
【低代码系列之万物之初】新生之梦回 Dreamweaver？
【低代码系列之万物互联】怎么买通物料，渲染器，属性设计器？

本文首发于 @阿乐去买菜，转载请署名出处

关于低代码:低代码系列之哈姆雷特千变万化的属性设置器

序

什么是属性设置器

该如何实现一个属性设置器

最初

系列文章