Генераторы кода

Большинство приложений Blockly требуют перевода программы пользователя на язык программирования. Это действие выполняется Blockly на стороне клиента.

Генерация кода

Первым шагом является подключение генератора для рассматриваемого языка. Blockly включает в себя следующие генераторы:

  • JavaScript
  • Питон
  • PHP
  • Луа
  • Дарт

Вы можете импортировать и использовать генераторы одним из следующих методов.

Модули

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

См. «События» для получения дополнительной информации.