Codegenerierung

Bei der Codegenerierung werden die Blöcke in einem Arbeitsbereich in einen Code-String, der ausgeführt werden kann.

Die Codegenerierung ist äußerst wichtig, da sie es Ihren Blöcken ermöglicht, Aufgaben ausführen, z. B. arithmetische Ausdrücke auswerten, Zeichen verschieben durch ein Labyrinth gehen oder einen Onlineshop einrichten.

Du kannst nicht „laufen“ direkt blockieren. Stattdessen generieren Sie Code-Strings und um sie auszuführen.

Codegeneratoren

Um Code zu generieren, müssen Sie die textbasierte Sprache auswählen, die Sie verwenden möchten. generieren.

Ein Codegenerator ist eine Klasse, die die Regeln zum Generieren von Code behandelt, der die für eine bestimmte Sprache spezifisch sind, aber nicht für einen einzelnen Block. Für zum Beispiel das Formatieren von Kommentaren, das Einrücken von Anweisungen mit Anführungszeichen.

// javascriptGenerator is a code generator that makes javascript strings.
import {javascriptGenerator} from 'blockly/javascript';

const code = javascriptGenerator.workspaceToCode(myWorkspace);

Blockly bietet fünf integrierte Codegeneratoren:

• JavaScript ES5
• Python 3
• Lua 5.1
• Dart 2
• PHP 7

Sie können die Generatoren mit einer der folgenden Methoden importieren und verwenden.

Module

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

Entfernen

Du musst den Generator angeben, nachdem du Blockly eingebunden hast.

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

Lokale Skripts

Du musst den Generator angeben, nachdem du Blockly eingebunden hast.

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

Wenn die Liste nicht die Sprache enthält, für die Sie Code generieren möchten, können Sie einen benutzerdefinierten Codegenerator erstellen.

Blockcode-Generatoren

Im zweiten Teil der Codegenerierung wird definiert, welcher Code generieren. Dieser Schritt ist für jeden Block und für jede Sprache, die Sie generieren möchten.

javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ }

Die Funktionsweise von Codegeneratoren variiert je nach Blocktyp:

• Blöcke mit Ausgaben
• Blöcke ohne Ausgaben

Allerdings müssen die Werte aus Feldern erfasst werden, innere Blöcke zu sammeln“ Code und verketten Sie dann für diese Zeichenfolgen.

Generierung

Die Generierung kann erfolgen, wenn der Endnutzer sie anfordert (z. B. wenn er auf eine Schaltfläche klicken) oder dies ist ununterbrochen möglich.

Dank kontinuierlicher Updates können Sie den Code jedes Mal anzeigen oder ausführen, wenn der Nutzer eine ändern können. Das Generieren von Code erfolgt schnell, daher ist die Leistung gering. welche Auswirkungen dies hat. Dazu wird ein Event-Listener verwendet.

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

Präambel- oder PostScript-Code

Nachdem Sie Ihren Code generiert haben, können Sie die (optionale) Präambel oder Präambelcode am Anfang oder Ende des generierten Codes ein.

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
code = `const def = 'some value';\n${code}\nkickOffSomeFunction();\n`;

Präambelcode wird normalerweise verwendet, um externe Definitionen am Anfang einzufügen des Codes. PostScript-Code wird in der Regel verwendet, um Funktionen zum Start am Ende des Codes.

Wenn der generierte Code unverändert ausgeführt werden kann, ist keine Präambel oder Postscript.

Ausführung

Nachdem Sie den Code generiert haben, müssen Sie herausfinden, wie er ausgeführt wird. Die Entscheidung, wie sie ausgeführt werden soll, ist sehr anwendungsspezifisch von Blockly.

Für JavaScript-Code empfiehlt das Blockly-Team die Verwendung des JSInterpreter verwenden. Für andere Sprachen sind andere Tools erforderlich.