如何从块中的代码生成块？答案

【问题标题】：How to generate blocks from code in blockly?如何从块中的代码生成块？
【发布时间】：2022-02-25 03:15:08
【问题描述】：

我有一个生成一些输出代码的块状应用程序。现在，是否可以编写一些函数来获取我的输出代码并将相应的块放在工作区中。例如，在这个页面上，https://developers.google.com/blockly/

blocks被连接生成javascript代码，但是有什么办法，我会给javascript代码，blocks会出现在workspace上。

【问题讨论】：

虽然有可能（做一些有效的事情，但有限制），但一般解决它绝对不是一个微不足道的问题。在这种情况下，blockly 可以看作是 JavaScript 的一个子集，具有基于简化的受限语法的替代表示。因此，从 blockly 到 JavaScript 是可靠的（并且到 XML 和返回是可靠的），但反过来不是，因为有太多的可能性要考虑。为了实现可靠的实现，您需要找到并创建 JavaScript 的受限子集的实现，以用作将“JS”转换为块状的输入。
或者您可能可以将其视为将源代码转换为可执行格式。然后尝试将可执行二进制文件转换回源代码（在编辑二进制文件之后）。例如：您希望它如何转换解构或迭代器之类的东西，甚至是包装函数闭包之类的简单东西？

【解决方案1】：

您只能从块中创建 javascript，而不能从 javascript 中创建块。但是，您可以将块导出到 xml，然后将 xml 导入回块。因此，您始终可以将块以 xml 格式保存在您希望的任何位置，并将这些块从 xml 加载回您的块状工作区。

function saveBlocks() {
    var xmlDom = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
    var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
    // do whatever you want to this xml
}
function loadBlock(xml) { // xml is the same block xml you stored
    if (typeof xml != "string" || xml.length < 5) {
        return false;
    }
    try {
        var dom = Blockly.Xml.textToDom(xml);
        Blockly.mainWorkspace.clear();
        Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, dom);
        return true;
    } catch (e) {
        return false;
    }
}

【讨论】：

【解决方案2】：

可以做到 - 见https://makecode.microbit.org/。如果您创建一个块然后编辑为 Javascript，您可以编辑并且（如果它是有效代码）然后当您切换回块视图时它将显示正确的块。它生成的 javascript 有点奇怪 - 所以不要指望它会将任何 javascript 变成块......

这不是 Blockly 的一部分 - 我不确定它是如何完成的 - 只是它存在 - 希望这会有所帮助。

【讨论】：

另一个用于 JavaScript 的非官方 Blockly 应用是 BlocksIDE：jc-orozco.github.io/BlocksIDE/build/index.html (src github.com/JC-Orozco/BlocksIDE)

【解决方案3】：

我不记得在 blockly 中看到过这个功能，但这绝对是可能的。您必须为您的语言代码编写自定义解析器，然后相应地构建块。

answer 对此进行了一些探索。

基本上，当您解析代码时，您需要以编程方式创建块并将它们附加在一起以以块方式创建程序。

【讨论】：

【解决方案4】：

我们正在开发一个 python 来阻止系统在这里 https://github.com/pi-top/pi-top-blockly/ 它供我们的教育/制造商网站内部使用此外，但可能有用的位在此处的图书馆中 https://github.com/pi-top/pi-top-blockly/tree/main/src/utils/piBlocks 它需要一个 python 字符串并返回 XML 以供 blockly 使用。它使用 skulpt.js 作为 python 编译器前端，然后库来自 ast->xml

【讨论】：