Tạo mã

Tạo mã là quá trình chuyển các khối trên không gian làm việc thành một chuỗi mã có thể thực thi.

Việc tạo mã vô cùng quan trọng vì công cụ này cho phép các khối của bạn thực sự làm những việc như đánh giá biểu thức số học, di chuyển một nhân vật qua mê cung hoặc định cấu hình một cửa hàng trực tuyến!

Bạn không thể "chạy" khối trực tiếp. Thay vào đó, bạn sẽ tạo các chuỗi mã rồi thực thi các chuỗi đó.

Trình tạo mã

Để tạo mã, bạn phải chọn ngôn ngữ dựa trên văn bản mà bạn muốn tạo.

Trình tạo mã là một lớp xử lý các quy tắc tạo mã dành riêng cho một ngôn ngữ nhất định, nhưng không dành riêng cho một khối riêng lẻ. Ví dụ: API này xử lý những nội dung như nhận xét định dạng, thụt lề và trích dẫn chuỗi.

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

const code = javascriptGenerator.workspaceToCode(myWorkspace);

Blockly cung cấp 5 trình tạo mã tích hợp:

  • JavaScript ES5
  • Python 3
  • Lua 5.1
  • Phi tiêu 2
  • 7 peso Philippines

Bạn có thể nhập và sử dụng trình tạo bằng một trong các phương thức sau.

Mô-đun

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

Hủy

Bạn phải thêm trình tạo sau khi thêm 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);

Tập lệnh cục bộ

Bạn phải thêm trình tạo sau khi thêm 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);

Nếu danh sách này không bao gồm ngôn ngữ bạn muốn tạo mã, thì bạn cũng có thể tạo trình tạo mã tuỳ chỉnh.

Trình tạo mã khối

Phần thứ hai của quá trình tạo mã là xác định mã mà từng khối mã sẽ tạo. Bạn phải thực hiện việc này cho từng khối, cho từng ngôn ngữ riêng lẻ mà bạn muốn tạo.

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

Cách hoạt động của trình tạo mã sẽ khác nhau đối với các loại khối khác nhau:

Tuy nhiên, tất cả đều yêu cầu thu thập giá trị từ các trường, thu thập mã của khối bên trong, sau đó nối các chuỗi đó.

Thế hệ

Quá trình tạo có thể được thực hiện khi người dùng cuối yêu cầu (ví dụ: khi họ nhấp vào một nút) hoặc có thể thực hiện liên tục.

Tính năng cập nhật liên tục cho phép bạn hiển thị hoặc chạy mã bất cứ khi nào người dùng thực hiện thay đổi. Tạo mã là một thao tác nhanh chóng, nên có rất ít ảnh hưởng về hiệu suất khi thực hiện việc này. Bạn có thể thực hiện việc này bằng trình nghe sự kiện.

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

Mã ở phần đầu hoặc mã bưu chính

Sau khi đã tạo mã, bạn có thể thêm mã mở đầu hoặc mở đầu (không bắt buộc) vào đầu hoặc cuối mã được tạo.

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

Mã mở đầu thường được dùng để đưa các định nghĩa bên ngoài vào đầu mã. Mã Postscript thường được dùng để gọi các hàm để bắt đầu hành vi ở cuối mã.

Nếu mã được tạo của bạn có thể chạy nguyên trạng, thì bạn không cần thêm phần mở đầu hoặc tập lệnh hậu kỳ.

Thực thi

Sau khi đã tạo mã, bạn cần tìm hiểu cách thực thi mã. Việc quyết định cách thực thi lệnh này rất tuỳ thuộc vào ứng dụng và nằm ngoài phạm vi của Blockly.

Đối với mã JavaScript, nhóm Blockly khuyên bạn nên sử dụng JSInterpreter. Các ngôn ngữ khác cần có các công cụ khác.