代码生成

代码生成是将工作区中的块转换为可以执行的代码字符串。

代码生成极其重要，因为代码生成的作用是执行一些操作，例如对算术表达式求值、移动字符或者配置网店！

您不能“运行”屏蔽规则而是生成代码字符串，然后执行这些命令

代码生成器

要生成代码，你必须选择要生成。

代码生成器是一个类，负责处理而不是针对某个代码块。对于例如，它会处理注释格式、缩进语句以及引用字符串。

// javascriptGenerator is a code generator that makes javascript strings.
import {javascriptGenerator} from 'blockly/javascript';

const code = javascriptGenerator.workspaceToCode(myWorkspace);

Blockly 提供了 5 个内置的代码生成器：

JavaScript ES5
Python 3
Lua 5.1
Dart 2
PHP 7

您可以通过以下任一方法导入和使用生成器。

模块

import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
import {phpGenerator} from 'blockly/php';
import {luaGenerator} from 'blockly/lua';
import {dartGenerator} from 'blockly/dart';

const jsCode = javascriptGenerator.workspaceToCode(workspace);
const pythonCode = pythonGenerator.workspaceToCode(workspace);
const phpCode = phpGenerator.workspaceToCode(workspace);
const luaCode = luaGenerator.workspaceToCode(workspace);
const dartCode = dartGenerator.workspaceToCode(workspace);

无包装

添加 Blockly 后，必须添加生成器。

<script src="https://unpkg.com/blockly"></script>
<script src="https://unpkg.com/blockly/javascript_compressed"></script>
<script src="https://unpkg.com/blockly/python_compressed"></script>
<script src="https://unpkg.com/blockly/php_compressed"></script>
<script src="https://unpkg.com/blockly/lua_compressed"></script>
<script src="https://unpkg.com/blockly/dart_compressed"></script>

const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

本地脚本

添加 Blockly 后，必须添加生成器。

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="python_compressed.js"></script>
<script src="php_compressed.js"></script>
<script src="lua_compressed.js"></script>
<script src="dart_compressed.js"></script>

const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);
const pythonCode = python.pythonGenerator.workspaceToCode(workspace);
const phpCode = php.phpGenerator.workspaceToCode(workspace);
const luaCode = lua.luaGenerator.workspaceToCode(workspace);
const dartCode = dart.dartGenerator.workspaceToCode(workspace);

如果此列表不包含您要为其生成代码的语言，您可以也可以创建自定义代码生成器。

块代码生成器

生成代码的第二部分是定义各个块的生成。您必须针对每个语言块、每种语言生成内容。

javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ }

对于不同类型的代码块，代码生成器的运作方式有所不同：

但它们都需要从字段中收集值，收集内部块code，然后将这些字符串。

生成

可以在最终用户要求时（例如，当他们也可以连续进行。

通过持续更新，您可以在用户每次提交代码时展示或运行代码，更改。生成代码是一项速度很快的操作，因此性能可能带来的影响这可通过事件监听器来实现。

const supportedEvents = new Set([
  Blockly.Events.BLOCK_CHANGE,
  Blockly.Events.BLOCK_CREATE,
  Blockly.Events.BLOCK_DELETE,
  Blockly.Events.BLOCK_MOVE,
]);

function updateCode(event) {
  if (workspace.isDragging()) return; // Don't update while changes are happening.
  if (!supportedEvents.has(event.type)) return;

  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}

workspace.addChangeListener(updateCode);

序言或邮政编码

生成代码后，您可以加入（可选）前导码。

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
code = `const def = 'some value';\n${code}\nkickOffSomeFunction();\n`;

序言代码通常用于在开头添加外部定义代码部分。Postscript 代码通常用于调用函数来启动行为

如果生成的代码可按原样运行，则无需添加序言或下标。

执行

生成代码后，您需要确定如何执行代码。执行方式因应用而异，不在范围内是 Blockly 的

对于 JavaScript 代码，Blockly 团队建议使用 JSInterpreter。如果要使用其他语言，则需要使用其他工具。