Generowanie i uruchamianie kodu

Aplikacja może wygenerować kod w dowolnym momencie. Może na przykład generować kod, gdy użytkownik kliknie przycisk lub dokona zmiany.

Informacje ogólne na temat generowania kodu znajdziesz w artykule Generowanie kodu.

Importowanie generatora kodów językowych

Aby wygenerować kod, musisz użyć generatora kodów językowych. Generatory kodu językowego możesz importować na jeden z tych sposobów.

Moduły

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

Musisz uwzględnić generator po uwzględnieniu 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);

Skrypty lokalne

Musisz uwzględnić generator po uwzględnieniu 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);

Generowanie kodu

Aby wygenerować kod, użyj funkcji workspaceToCode generatora.

const code = javascriptGenerator.workspaceToCode(workspace);

Ciągłe aktualizacje

Ciągłe aktualizacje umożliwiają wyświetlanie lub uruchamianie kodu za każdym razem, gdy użytkownik wprowadzi zmianę. Generowanie kodu to szybka operacja, więc nie ma to większego wpływu na wydajność. Można to zrobić za pomocą detektora zdarzeń.

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

Dodawanie kodu w preambuli lub postscriptum

Po wygenerowaniu kodu możesz opcjonalnie dołączyć kod przed jego początkiem lub po jego zakończeniu.

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;

Kod w preambule jest zwykle używany do umieszczania definicji zewnętrznych na początku kodu. Kod końcowy służy zwykle do wywoływania funkcji, które uruchamiają działanie na końcu kodu.

Jeśli wygenerowany kod można uruchomić bez zmian, nie musisz dołączać wstępu ani postscriptum.

Wykonywanie kodu

Po wygenerowaniu kodu musisz ustalić, jak go uruchomić. Sposób wykonania zależy od aplikacji i nie jest objęty zakresem Blockly.

Jeśli chcesz wykonać kod JavaScript, zapoznaj się z artykułem Generowanie i wykonywanie kodu JavaScript. W tym artykule omawiamy niektóre specjalne funkcje generatora kodu JavaScript oraz JSInterpreter, który zespół Blockly zaleca jako sposób bezpiecznego wykonywania kodu JavaScript.

Inne języki wymagają innych narzędzi.