產生及執行程式碼

應用程式隨時可以產生代碼。舉例來說，當使用者點選按鈕或每次變更時，系統就可能會產生程式碼。

如要瞭解程式碼產生的概略說明，請參閱「程式碼產生」。

匯入語言代碼產生器

如要產生程式碼，您需要語言代碼產生器。您可以使用下列任一方法匯入語言程式碼產生器。

模組

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

// Generate code for all the blocks in the workspace.
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>

// Generate code for all the blocks in the workspace.
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>

// Generate code for all the blocks in the workspace.
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);

生成程式碼

如要產生程式碼，請使用產生器的 workspaceToCode 函式。

const code = javascriptGenerator.workspaceToCode(workspace);

持續更新

持續更新功能可讓您在使用者進行變更時顯示或執行程式碼。生成程式碼的作業速度很快，因此對效能影響不大。這項操作會使用事件監聽器。

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.
const preamble = 'import {MyLibrary} from \'/path/to/my/library\';\n'
const postscript = 'MyLibrary.myKickoffFunction();\n';
code = preamble + code + postscript;

序言程式碼通常用於在程式碼開頭加入外部定義。附錄程式碼通常用於呼叫函式，以便在程式碼結尾時啟動行為。

如果生成的程式碼可直接執行，則不需要加入前置或附錄。

執行程式碼

產生程式碼後，您需要瞭解如何執行程式碼。決定如何執行這項操作的做法非常特定於應用程式，且超出 Blockly 的範圍。

如要執行 JavaScript 程式碼，請參閱「產生及執行 JavaScript」。本節將討論 JavaScript 程式碼產生器的部分特殊功能，以及 Blockly 團隊建議用於安全執行 JavaScript 的 JSInterpreter。

其他語言則需要其他工具。