AI + 低代码 技术揭秘(七):设计器和渲染器

本文档介绍了支持 VTJ 低代码体验的可视化设计环境 (@vtj/designer) 和运行时渲染系统 (@vtj/renderer)。Designer 提供了交互式可视化编辑环境,用户可以在其中拖放和配置组件,而 Renderer 在设计时预览和运行时环境中执行生成的 DSL 架构。

有关这些系统运行的核心引擎和数据模型的信息,请参阅引擎、提供程序和服务层 。有关提供实际小组件的 UI 组件库的详细信息,请参阅 UI 组件库

Designer 架构

Designer 系统通过以 Designer 类及其与仿真环境的集成为中心的复杂事件驱动架构提供交互式可视化编辑功能。

Core Designer 类

Designer 类充当所有设计时交互的中心编排器,管理鼠标事件、拖放作、元素选择和视觉反馈系统。

Designer 通过对具有特殊属性 (__vtj____context__) 的 DOM 元素进行检测来运行,这些属性使其能够在可视元素及其相应的数据模型之间进行映射。

事件处理系统

Designer 实现了一个全面的事件处理系统,该系统可以捕获用户交互并将其转换为设计作:

视觉反馈组件

Designer 系统通过突出显示交互式元素的叠加组件提供实时视觉反馈:

渲染器架构

Renderer 系统为 VTJ DSL 模式提供运行时执行环境,支持多种执行模式和上下文。

上下文系统

Context 类充当运行时执行环境,为组件实例提供对状态、props、生命周期方法和实用程序函数的访问:

Context 系统支持三种不同的执行模式:

  • 设计模式 :用于设计时交互的 Instruments 元素
  • 运行模式 :提供生产执行环境
  • VNode 模式 :支持无 refs 的虚拟节点渲染

多模式渲染

Renderer 支持通过 Context 系统在设计时和运行时模式之间无缝切换:

设计时集成

Designer 和 Renderer 系统通过基于 iframe 的共享模拟环境进行集成,该环境支持实时预览和交互。

模拟器架构

元件检测

在设计模式下,Renderer 使用特殊属性检测 DOM 元素,使 Designer 能够跟踪和作它们:

视口和响应式设计

Designer 提供了一个复杂的视口系统,该系统支持多种设备模式和自定义大小调整,以便进行响应式设计测试。

视口模式

运行时性能优化

Renderer 系统包括针对运行时性能的多项优化,用于区分设计时插桩和生产执行。

Context 系统会自动管理 Vue 实例生命周期、引用跟踪和清理,以确保在不同执行模式下的最佳性能,同时保持设计时插桩所需的灵活性。

源码仓库

gitee.com/newgateway/...

相关推荐
qinyia3 小时前
Wisdom SSH 是一款创新性工具,通过集成 AI 助手,为服务器性能优化带来极大便利。
服务器·人工智能·ssh
昨日之日20065 小时前
Wan2.2-S2V - 音频驱动图像生成电影级质量的数字人视频 ComfyUI工作流 支持50系显卡 一键整合包下载
人工智能·音视频
SEO_juper8 小时前
大型语言模型SEO(LLM SEO)完全手册:驾驭搜索新范式
人工智能·语言模型·自然语言处理·chatgpt·llm·seo·数字营销
攻城狮7号9 小时前
腾讯混元翻译模型Hunyuan-MT-7B开源,先前拿了30个冠军
人工智能·hunyuan-mt-7b·腾讯混元翻译模型·30个冠军
zezexihaha9 小时前
从“帮写文案”到“管生活”:个人AI工具的边界在哪?
人工智能
算家云9 小时前
nano banana官方最强Prompt模板来了!六大场景模板详解
人工智能·谷歌·ai大模型·算家云·ai生图·租算力,到算家云·nano banana 提示词
暴躁的大熊9 小时前
AI助力决策:告别生活与工作中的纠结,明析抉择引领明智选择
人工智能
Gyoku Mint9 小时前
提示词工程(Prompt Engineering)的崛起——为什么“会写Prompt”成了新技能?
人工智能·pytorch·深度学习·神经网络·语言模型·自然语言处理·nlp
梁小憨憨9 小时前
zotero扩容
人工智能·笔记
大数据张老师9 小时前
AI架构师的思维方式与架构设计原则
人工智能·架构师·ai架构·后端架构