跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptSaaS大前端

低代码可视化系统核心对象详解:数据、请求与寄连

低代码平台中 B、G、R、P 四大对象构成了页面交互的核心基础。initData 负责初始化状态,collectionData 收集视图模型数据,requestData 管理接口响应,controlData 标识组件视图。请求链接对象 R 提供 prepare 和 trigger 方法控制网络请求流程,寄连对象 P 则通过 RunIt 实现业务逻辑的灵活编排。理解这些对象的访问权限与生命周期,是高效开发可视化应用的关键。

接口猎人发布于 2026/4/10更新于 2026/10/2088 浏览
低代码可视化系统核心对象详解:数据、请求与寄连

低代码可视化系统核心对象详解

前端系统的构建通常结合在线代码编写与可视化操作两种方式。页面结构通过拖拽生成,而元素绑定及交互事件则通过属性面板配置。为了管理不同类型的数据,系统提供了多个对象进行分类。

从功能维度看,主要涉及属性值、预置函数、寄连、视图、元素及工具类。由于细分项繁多,我们通过特定的对象来访问这些值。

核心对象概览

名称定义说明
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);

这样就能在界面交互中灵活调用业务逻辑。理解这些对象的访问权限与生命周期,是高效开发可视化应用的关键。

目录

  1. 低代码可视化系统核心对象详解
  2. 核心对象概览
  3. 数据对象
  4. initData
  5. collectionData
  6. requestData
  7. controlData
  8. 设置方法
  9. 请求链接对象
  10. prepare
  11. trigger
  12. 寄连对象
  13. RunIt

更多推荐文章

查看全部
  • 2024 年常见 Redis 面试题:同步机制详解
  • Windows 下安装与配置本地 AI 机器人 ZeroClaw
  • 学 Vue3 前需要掌握哪些基础:HTML、CSS、JavaScript 与 ES6
  • Python Web 自动化测试实战:常用函数全解析与场景化应用指南
  • 基于 PaddleOCR-VL 的本地 OCR 工具搭建与公网访问指南
  • Docker Network 命令:容器网络管理的完整指南
  • 使用 Higress 将 REST API 转换为 MCP Server
  • 基于 VoxCPM-1.5 的红外相机智能语音驱赶系统实战
  • 2024-2025 主流开源 TTS 模型综合对比分析
  • OpenAkita:自我进化的开源 AI 助手框架
  • 贪心算法详解:从局部最优到全局最优
  • Trae CN IDE Python 开发流程与配置指南
  • AR 系列摄像头发展历程与参数规格分析
  • Python 入门指南:从安装到实战
  • 基于 cpolar 内网穿透实现 Open-Lovable 远程访问方案
  • 三款 AI 编程工具怎么选:Cursor、Kiro 和 Google Antigravity
  • Windows 系统下 PyCharm IDE 安装与配置指南
  • WSL 环境下 Git 安装与配置指南
  • Ubuntu 22.04 .deb 软件包安装方式详解
  • STC15 系列单片机:存储器与特殊功能寄存器

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online