程式碼產生

程式碼產生是指將工作區上的區塊轉換為可執行的程式碼字串。

產生程式碼極為重要，因為區塊可以「執行」特定作業，例如評估算術運算式、透過迷宮移動角色，或設定網路商店！

您無法直接「執行」區塊。而是要產生程式碼字串，然後執行這些字串。

程式碼產生器

如要產生程式碼，您必須選擇要產生的文字語言。

程式碼產生器是一種類別，用於處理特定語言 (而非個別區塊) 專屬的程式碼產生規則。例如處理註解格式、縮排陳述式和引用字串等。

// 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
  • 飛鏢 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);

Unpkg

加入 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) { /* ... */ }

程式碼產生器的運作方式會因區塊類型而異：

不過，這些類型都要求從欄位收集值，並收集內部區塊的程式碼，然後串連這些字串。

產生

可以在使用者提出要求 (例如點選按鈕時) 產生，或者持續完成。

持續更新可讓您在使用者做出變更時顯示或執行程式碼。產生程式碼是一項快速作業，因此這樣做幾乎不會影響效能。這時請使用事件監聽器。

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`;

前置程式碼通常用於在程式碼開頭加入外部定義。指令碼程式碼通常用於呼叫函式，以在程式碼結尾啟動行為。

如果產生的程式碼可依原樣執行，則不需要加入前置碼或郵遞區號。

執行

產生程式碼後，您需要決定如何執行程式碼。決定如何執行的方式只有特定應用程式，而且不在 Blockly 範圍內。

如為 JavaScript 程式碼，Blockly 團隊建議使用 JSInterpreter。其他語言需要其他工具。