程式碼產生器

Blockly 的大多數應用程式都需要將使用者的程式翻譯成程式設計語言。這個動作會由 Blockly 在用戶端執行，

正在產生程式碼

第一步是加入相關語言的產生器。 Blockly 包含以下產生器：

  • JavaScript
  • Python
  • PHP
  • Lua
  • Dart

您可以透過下列任一方法匯入及使用產生器。

模組

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.workspaceToCode(workspace);
const pythonCode = python.workspaceToCode(workspace);
const phpCode = php.workspaceToCode(workspace);
const luaCode = luna.workspaceToCode(workspace);
const dartCode = dart.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.workspaceToCode(workspace);
const pythonCode = python.workspaceToCode(workspace);
const phpCode = php.workspaceToCode(workspace);
const luaCode = lua.workspaceToCode(workspace);
const dartCode = dart.workspaceToCode(workspace);

即時產生

產生程式碼是非常快速的作業，因此頻繁呼叫這個函式不會造成任何影響。常見的策略是將事件監聽器新增至 Blockly 的變更事件，以即時產生並顯示程式碼：

import {javascriptGenerator} from 'blockly/javascript';
function updateCode(event) {
  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}
workspace.addChangeListener(updateCode);

詳情請參閱事件。