可视化编程编辑器 Blockly 一文拆解：拖块如何生成五门语言代码-云帆数科

可视化编程编辑器 Blockly 一文拆解拖块如何生成五门语言代码【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blockly在网页里嵌一个编程界面自己从零做光处理积木吸附、撤销重做就要耗掉一个团队几周。Blockly 把这套可视化编程编辑器做成了开源库你拖一个积木它能产出 JavaScript、Python 等五种语言的代码。本文从注入工作区讲起拆它的数据流、渲染与代码生成最后给一条能跑的最小集成路径。从 inject 到可交互工作区可视化编程编辑器的初始化一切从Blockly.inject(container, options)开始它把一个普通div变成能拖拽的主工作区。入口函数在 core/inject.ts接收一个容器和一个可配置对象返回WorkspaceSvg。它先建一个带 class 的子div再画 SVG 画布最后初始化主工作区。options里能控制rtl、grid、toolbox等仓库自带的tests/playground.html里就有一份完整配置可抄。这一段值得看的是分工inject 只负责把东西摆上屏幕积木的增删和状态全交给工作区对象。这样 UI 初始化和业务逻辑不耦合换容器不用改逻辑。工作区数据模型顶层积木与撤销栈工作区不直接存所有积木只维护一份顶层积木列表其余靠父子连接关系向下递归。顶层管理就三行addTopBlock入栈、removeTopBlock出栈、getTopBlocks取列表都在 core/workspace.ts。真正的积木树由每个 block 的nextConnection与previousConnection串起来递归即可遍历。undo/redo 的底层是两条事件数组undoStack_和redoStack_而不是存整块快照。这决定了它省内存也决定了回滚必须靠重放。undo 的分组回滚下面这段是撤销的核心逻辑来自同一文件core/workspace.ts的undo(redo)方法展示撤销时如何按group把一批事件当成整体回滚。const inputEvent inputStack.pop(); if (!inputEvent) { return; } let events [inputEvent]; // Do another undo/redo if the next one is of the same group. while ( inputStack.length inputEvent.group inputEvent.group inputStack[inputStack.length - 1].group ) { const event inputStack.pop();这段在做什么弹出顶部事件后顺着同group的事件一路弹空攒成events数组。为什么值得看一次粘贴或多块拖拽会拆成多条事件靠 group 才能一键整体撤销这是操作原子性的来源。事件批处理fire 队列为何延迟到下一帧事件不是同步派发的而是先入队等浏览器画完当前帧再统一发出去。核心在 core/events/utils.ts 的fireInternal入队前会判断队列是否为空core/events/utils.ts的fireInternal展示事件如何进FIRE_QUEUE并延迟触发。if (!FIRE_QUEUE.length) { // First event added; schedule a firing of the event queue. try { requestAnimationFrame(() { setTimeout(fireNow, 0); }); } catch (e) { setTimeout(fireNow, 0); } } FIRE_QUEUE.push(event);这段在做什么只有第一条事件会调requestAnimationFrame预约一次fireNow后续事件只往队列里堆。为什么值得看同一帧内拖多个块会产生大量事件延迟到渲染后再合并派发既省掉重复渲染又保证监听器拿到的坐标是最新的。撤销、协作同步也因此能复用同一条事件流。三套渲染器geras、thrasos 与 zelos 的注册渲染被抽成可替换的策略仓库里就有三套geras、thrasos、zelos注册点统一在core/renderers/下。三套各用一个Renderer子类实现测量与画布最后都调用blockRendering.register(name, Renderer)挂进注册表。你在inject的options里写renderer: geras就能切换业务代码一行不用改。默认geras是为兼容旧版做的源码注释也点明它 backwards compatible with pre-2019。想换视觉风格改一个字符串即可数据模型不动。代码生成器 workspaceToCode把积木树变成五种语言图形到代码靠递归workspaceToCode从顶层积木出发逐块查对应类型的生成函数并拼字符串。生成器实例与函数表在generators/javascript.ts每种语言一个目录。真正干活的函数按类型分发例如 if 积木generators/javascript/logic.ts的controls_if展示一个积木如何递归拼出带 else if 的分支代码。export function controls_if(block: Block, generator: JavascriptGenerator) { let n 0; let code ; do { const conditionCode generator.valueToCode(block, IF n, Order.NONE) || false; let branchCode generator.statementToCode(block, DO n); code (n 0 ? else : ) if ( conditionCode ) {\n branchCode }; n; } while (block.getInput(IF n));这段在做什么用do...while顺次吃IF0、IF1直到没有输入每层把条件码与分支码拼成if/else if。为什么值得看valueToCode和statementToCode是递归钩子子积木就这样一层层展开成子串这正是拖块生成代码的全部秘密。一段可运行的最小集成搭一个可视化编程界面看完实现最短的验证路径是跑仓库自带 playground不用自己拼环境。先克隆仓库执行npm install再执行npm start它会在本地起服务并直接打开 tests/playground.html。你在里面拖积木、点代码生成按钮就能实时看到五门语言输出。想接进自己的项目核心就三步import的Blockly与某个生成器调用inject建工作区最后用generator.workspaceToCode(workspace)取代码。设计取舍它牺牲了什么适合谁它把通用当第一优先级代价是包体和 API 面都不小按需拆分是它exports分./core、./blocks、各语言子路径的原因。事件走异步队列、撤销靠重放而非快照让大场景更省但实时性要求极高的场景要自己补时序。三套渲染并存也说明它在兼容与现代表现间做了取舍。适合谁要给 web 或移动应用内嵌可视化编程界面、又要能产出真实代码的团队。不适合谁想要完全自绘图形、或只做纯文本代码编辑的场景用它偏重了。上手建议克隆后直接npm start打开 playground从core/inject.ts与generators/javascript/两个文件顺读一遍比看文档更快建立直觉。仓库地址https://gitcode.com/gh_mirrors/bloc/blockly【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blockly创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业数字化 ERP 产品动态

相关推荐

XHS-Downloader 小红书下载器使用教程:一条链接保存图文与视频到本地

XHS-Downloader 小红书下载器使用教程:一条链接保存图文与视频到本地【免费下载链接】XHS-Downloader 小红书（XiaoHongShu、RedNote）链接提取/作品采集工具项目地址: https://gitcode.com/gh_mirrors/xh/XHS-Downloader XHS-Downloader 是一个开… · 2026/11/4 19:10:32

Listen 1 多平台音乐聚合播放器快速上手指南

Listen 1 多平台音乐聚合播放器快速上手指南【免费下载链接】listen1_chrome_extension one for all free music in china (chrome extension, also works for firefox) 项目地址: https://gitcode.com/gh_mirrors/li/listen1_chrome_extension 当你想找一首歌&#xf… · 2026/11/4 19:10:32

MoviePilot v2.3.6 阿里云盘 API 与飞牛影视接入完整指南

MoviePilot v2.3.6 阿里云盘 API 与飞牛影视接入完整指南【免费下载链接】MoviePilot NAS媒体库自动化管理工具项目地址: https://gitcode.com/gh_mirrors/mo/MoviePilot MoviePilot v2.3.6 这次把阿里云盘从第三方脚本切换到官方开放接口，同时新增飞牛影视… · 2026/11/4 19:10:32

Detect-It-Easy 文件类型识别与加壳检测指南

Detect-It-Easy 文件类型识别与加壳检测指南【免费下载链接】Detect-It-Easy Program for determining types of files for Windows, Linux and MacOS. 项目地址: https://gitcode.com/gh_mirrors/de/Detect-It-Easy 拿到一个来路不明的样本时，你通常最先想… · 2026/11/4 19:47:03

如何在Python中使用UltraData-Code-L2-Classifier：新手必学的代码Embedding打分完整教程

人工智能大模型机器学习数据清洗【免费下载链接】UltraData-Code-L2-Classifier 项目地址： https://ai.gitcode.com/OpenBMB/UltraData-Code-L2-Classifier 点击查看免费下载 UltraData-Code-L2-Classifier 是面向 11 种编程语言的文件级打分工具，能对… · 2026/11/4 19:47:03

8. bert实战

在本次实战中，我们要完成的是下游的文字分类任务，不做预训练输入是语句，输出是它的情感类别一句话在输入的时候首先要经过分词处理1. 训练前的知识储备1.1 分词器(tokenizer)一句话进入分词器就会被拆开，变成一个字一个字的会产生… · 2026/11/4 19:47:03

Rufus‑Air: An Open LLM Post‑Training Recipe（arXiv:2609.29421）文献总结与翻译

# Rufus‑Air: An Open LLM Post‑Training Recipe（arXiv:2609.29421）文献总结与翻译> 论文链接：[https://arxiv.org/abs/2609.29421](https://arxiv.org/abs/2609.29421) ## 一、文章主要内容Rufus‑Air是一套**开源、可复现的大模型后处理完整训练流水线方案**，基于G… · 2026/11/4 19:47:03

Unity UGUI布局组件（LayoutGroup、ContentSizeFitter、LayoutElement）详解

UGUI 自动布局是一套基于接口、分两轮四阶段、脏标记延迟批量执行的 C# 排版系统，和 Transform 原生锚点完全隔离； 所有布局组件都围绕两个接口：ILayoutElement：提供尺寸信息（min/preferred/flexible）&… · 2026/11/4 19:47:03

第 07 篇：数据面双雄：kubelet 管生命周期，kube-proxy 管网络转发（底座认知 07）

kubelet 与 kube-proxy节点上的两大执行者底座认知第 07 篇kubelet 管生命周期，kube-proxy 管网络转发目录一、kubelet：节点的「主代理」1.1 核心职责1.2 与运行时协作二、kube-proxy：Service 的实现者2.1 两种模式2.2 Service 类型三、数… · 2026/11/4 19:45:01

双极步进电机控制实战：DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 3:16:49