La generazione del codice è il processo di trasformazione dei blocchi di un'area di lavoro in un stringa di codice che può essere eseguita.
La generazione del codice è estremamente importante, perché è ciò che consente ai blocchi di fare cose, come valutare espressioni aritmetiche, spostare un carattere in un labirinto o configurare un negozio online.
Non puoi "correre" direttamente i blocchi. Vengono generate stringhe di codice e quindi eseguirli.
Generatori di codice
Per generare il codice, devi scegliere il linguaggio di testo generati.
Un generatore di codice è una classe che gestisce le regole per la generazione di codice specifici per una data lingua, ma non per un singolo blocco. Per ad esempio, gestisce vari aspetti come la formattazione dei commenti, il rientro delle stringhe.
// javascriptGenerator is a code generator that makes javascript strings.
import {javascriptGenerator} from 'blockly/javascript';
const code = javascriptGenerator.workspaceToCode(myWorkspace);
Blockly fornisce 5 generatori di codice integrati:
- JavaScript ES5
- Python 3
- Lua 5.1
- Freccette 2
- PHP 7
Puoi importare e utilizzare i generatori utilizzando uno dei seguenti metodi.
Moduli
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);
Annulla pacchetto
Devi includere il generatore dopo aver incluso 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.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);
Script locali
Devi includere il generatore dopo aver incluso 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.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);
Se questo elenco non include il linguaggio per cui vuoi generare il codice, puoi crea anche un generatore di codice personalizzato.
Generatori di codice a blocchi
La seconda parte della generazione del codice è la definizione dei singoli blocchi del codice generati. Questa operazione deve essere eseguita per ogni blocco, per ogni singola lingua che vuoi generare.
javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ }
Il funzionamento dei generatori di codice varia a seconda dei tipi di blocchi:
Ma tutti richiedono la raccolta di valori dai campi, raccogli blocchi interni" del codice e poi concatenando per le stringhe.
Generazione
La generazione può essere effettuata quando l'utente finale lo richiede (ad esempio, quando clic su un pulsante) oppure l'operazione può essere eseguita di continuo.
Gli aggiornamenti continui ti consentono di mostrare o eseguire il codice ogni volta che l'utente effettua una modifica. La generazione di codice è un'operazione veloce, quindi le prestazioni sono scarse l'impatto di questa azione. Per farlo, si utilizza un listener di eventi.
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);
Codice di preambolo o postscript
Dopo aver generato il codice, puoi includere (facoltativo) il preambolo del preambolo all'inizio o alla fine del codice generato.
let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
code = `const def = 'some value';\n${code}\nkickOffSomeFunction();\n`;
Il codice del preambolo di solito viene utilizzato per includere le definizioni esterne all'inizio del codice. Il codice postscript viene solitamente utilizzato per chiamare le funzioni di avvio il comportamento predefinito alla fine del codice.
Se il codice generato è eseguibile così com'è, non è necessario includere un'istruzione un preambolo o un postscript.
Esecuzione
Dopo aver generato il codice, devi capire come eseguirlo. La decisione su come eseguirla è molto specifica dell'applicazione e non rientra nell'ambito di Blockly.
Per il codice JavaScript il team di Blockly consiglia di utilizzare JSInterpreter. Per altre lingue sono necessari altri strumenti.