코드 생성

코드 생성은 작업공간의 블록을 실행할 수 있는 코드 문자열입니다.

코드 생성은 블록이 실제로 작업을 수행하는 경우(예: 산술 평가) 온라인 상점을 구성할 수 있습니다

"달릴" 수 없습니다 차단 규칙을 직접 적용할 수 있습니다. 대신 코드 문자열을 생성한 다음 실행할 수 있습니다

코드 생성기

코드를 생성하려면 원하는 텍스트 기반 언어를 선택해야 합니다. 생성합니다.

코드 생성기는 코드를 생성하는 데 필요한 규칙을 처리하는 개별 블록에 국한되는 것은 아닙니다. 대상 예를 들어 주석 서식 지정, 들여쓰기 구문, 따옴표를 사용합니다.

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

const code = javascriptGenerator.workspaceToCode(myWorkspace);

Blockly는 다음과 같은 5가지 내장 코드 생성기를 제공합니다.

자바스크립트 ES5
Python 3
Lua 5.1
다트 2
PHP 7

다음 방법 중 하나를 사용하여 생성기를 가져와 사용할 수 있습니다.

모듈

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

로컬 스크립트

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

코드를 생성하려는 언어가 목록에 없는 경우 커스텀 코드 생성기도 만들어 봅니다.

블록 코드 생성기

코드 생성의 두 번째 부분은 개별 사용자가 어떤 코드를 생성합니다. 이 작업은 블록이나 추가하는 언어별로 지정할 수 있습니다.

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

코드 생성기의 작동 방식은 블록 유형에 따라 다릅니다.

하지만 모두 필드에서 값을 수집해야 합니다. 내부 블록 수집' 코드를 선택한 다음 확인할 수 있습니다.

생성

최종 사용자가 요청할 때 (예: 버튼을 클릭) 또는 계속 수행할 수 있습니다.

지속적 업데이트를 사용하면 사용자가 작업을 실행할 때마다 코드를 표시하거나 실행할 수 있습니다. 있습니다. 코드 생성은 빠른 작업이므로 성능이 거의 없습니다. 영향을 미칠 수 있습니다 이 작업은 이벤트 리스너를 사용하여 실행됩니다.

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

서문 또는 PostScript 코드

코드를 생성한 후에는 (선택사항) 프리앰블 또는 프리앰블 코드가 있는지 확인합니다.

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

프리앰블 코드는 일반적으로 시작 부분에 외부 정의를 포함하는 데 사용됩니다. 있습니다. Postscript 코드는 일반적으로 함수를 호출하여 코드 끝부분에서 코드를 실행합니다.

생성된 코드를 있는 그대로 실행할 수 있는 경우에는 포스트스크립트로 작성할 수 있죠

실행

코드를 생성한 후에는 실행 방법을 찾아야 합니다. 실행 방법을 결정하는 것은 매우 애플리케이션에 따라 다르고 범위를 벗어납니다. 블로킹을 선보였습니다.

JavaScript 코드의 경우 Blockly 팀은 JSInterpreter의 인스턴스를 가져옵니다. 다른 언어는 다른 도구가 필요합니다.