低代码可视化系统核心对象详解
前端系统的构建通常结合在线代码编写与可视化操作两种方式。页面结构通过拖拽生成,而元素绑定及交互事件则通过属性面板配置。为了管理不同类型的数据,系统提供了多个对象进行分类。
从功能维度看,主要涉及属性值、预置函数、寄连、视图、元素及工具类。由于细分项繁多,我们通过特定的对象来访问这些值。
核心对象概览
| 名称 | 定义 | 说明 |
|---|---|---|
| B | 基础对象 | 包含 initData, collectionData 等 |
| G | 全局对象 | 包含 page, menu, user 等 |
| R | 请求链接对象 | 包含链接调用的方法和属性 |
| P | 执行寄连对象 | 包含寄连调取的方法和属性 |
几乎所有变量都能通过这四个对象访问。每个页面都有独立的 B、R、P 对象(G 除外),不同页面的 B、R、P 互不干扰。它们既可以独立访问,也能在某个对象中调用另一个对象。页面脚本中均可通过 this 获取这些变量。
此外,当前组件的事件中还能访问两个特有属性:
| 名称 | 定义 | 说明 |
|---|---|---|
| describe | 当前组件视图配置 | 渲染该组件所需的所有配置 |
| scopeData | 渲染数据 | 当前作用域插槽的数据 |
数据对象
initData
主要用于存储初始化数据。其属性值通常不变,可通过寄连或请求设定,也可手动指定供后续比较使用。
虽然没有限制存储类型,但约定只存页面初始化数据或其他信息。页面加载时,它默认填充 formCode(页面编码)和 serviceTable(数据存储表)两个属性。
你可以在任意位置修改它。例如创建请求链接后,在回调函数中使用 this.B.setInitData(data) 将接口返回值存入。
// 请求链接回调示例
function callback(response) {
this.B.setInitData(response.data);
}
collectionData
视图中带有 model 字段的属性都会被收集到这里。你也可以给它赋值临时属性,方便其他地方访问。
requestData
如果请求链接配置了绑定字段,返回数据会存储在此。它包含两个特殊属性:
handle:保存所有设定了 code 的请求,以便手动触发。code:带有权限控制的 code 可由此访问,也可手动指定。
controlData
页面中的所有数据视图都以 code 为标识存储于此。手动设定的 DOM 和 View 也通过它访问。
设置方法
B 对象暴露了两个方法来直接设置数据:
// 设置初始化数据
this.B.setInitData(data);
// 设置集合数据
this.B.setCollectionData(data);
请求链接对象
管理页面中所有的请求链接。每个请求链接的回调函数中的 this 都指向这个对象。在任何地方都可以通过 this.R 获取它,并从中访问 G、P、collectionData 等公共对象。
常用方法包括:
doCallBack:执行请求返回后的回调getLists:实际发起接口请求prepare:发起请求前的准备trigger:根据请求编码发起请求
除 prepare 和 trigger 外,其他多为内部方法。
prepare
用于请求预处理,如设置参数。若请求链接具有 code 值,调用 prepare(code) 会进行初始化并返回一个 Promise。
Promise 解析后的对象包含 request 和 run:
request:代表当前请求,可修改参数。run:执行函数,发起真正请求。
trigger
根据传入的请求 code 发起请求,主要用于处理手动触发的场景。
寄连对象
用来管理页面中的执行寄连。
| 函数 | 说明 |
|---|---|
| bond | 执行策略为 before 的寄连 |
| doCallBack | 自动执行指定的寄连 |
| pitchBond | 拆分不同的寄连集合 |
| runIt | 手动执行指定的寄连 |
还有一个 handle 属性和 prepare 数组:
handle:存放需要手动执行的寄连prepare:存放执行策略为 before 的寄连
RunIt
通过它手动执行寄连。第一个参数是寄连 code,后续参数传入寄连函数需要的值。
假设有一个编码为 getAverage 的寄连,用于计算平均数:
// 按钮点击事件调用
this.P.runIt('getAverage', num1, num2, num3);
这样就能在界面交互中灵活调用业务逻辑。理解这些对象的访问权限与生命周期,是高效开发可视化应用的关键。

