程式碼生成

產生程式碼是將工作區區塊轉換成程式碼字串。

程式碼生成極為重要，因為這樣可讓區塊實際「操作」的方法，例如評估算術運算式、移動字元或是架設線上商店！

您無法「跑步」直接封鎖相反地，您可以產生程式碼字串或是執行這些 Pod

程式碼產生器

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

程式碼產生器是一種類別，可處理規則來產生而非針對特定語言，而不是針對特定語言。適用對象會處理註解格式、縮排語句引號中的字串。

// 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);

脫衣褲

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

前置碼程式碼通常用於在開頭加入外部定義程式碼區段PostScript 程式碼通常用於呼叫函式以啟動程式碼結尾的行為

如果產生的程式碼可以照原樣執行，就不需要加入開頭或事前文字

執行

產生程式碼後，您需要瞭解執行方式。決定執行方式的方法會因應用程式而異，而且不在範圍之內方塊

對於 JavaScript 程式碼， Blockly 團隊建議使用 JSInterpreter。其他語言需要其他工具才能使用。