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 chuỗi mã có thể thực thi.

Việc tạo mã là vô cùng quan trọng vì đó là công cụ cho phép các khối của bạn thực sự làm nhiều việc, như đánh giá biểu thức số học, di chuyển một ký tự hoặc thiết lập một cửa hàng trực tuyến!

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

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 sử dụng 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 từng khối. Cho ví dụ: thư viện này xử lý những việc như định dạng nhận xét, thụt lề câu lệnh, 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 sẵn:

  • JavaScript ES5
  • Python
  • Lua 5.1
  • Phi tiêu 2
  • 7 PHP

Bạn có thể nhập và sử dụng trình tạo theo 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);

Bỏ chỉnh sửa

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

Chữ viết 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ữ mà bạn muốn tạo mã, bạn có thể bạn cũng có thể tạo một 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 những khối mã riêng lẻ tạo. Bạn phải tiến hành kiểm tra ở từng khối, từng ngôn ngữ riêng lẻ 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 tuỳ theo loại khối:

Tuy nhiên, tất cả các cột này đều yêu cầu thu thập giá trị từ các trường, thu thập các khối bên trong" rồi liên kết các chuỗi đó.

Thế hệ

Việc 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 thao tác có thể được thực hiện liên tục.

Việc 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 nên có ít hiệu suất ảnh hưởng nhất định đến việc này. Bạn có thể thực hiện việc này bằng cách sử dụ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ã mở đầu hoặc mã bưu chính

Sau khi tạo mã, bạn có thể bao gồm phần mở đầu (không bắt buộc) hoặc mã có ở đầ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 để bao gồm các định nghĩa bên ngoài ở phần đầu của mã. Mã Postscript thường dùng để gọi các hàm khởi động ở cuối mã.

Nếu mã đã tạo có thể chạy được theo nguyên trạng, thì bạn không cần thêm phần mở đầu hoặc phần kịch bản.

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 phương thức này còn tuỳ thuộc vào ứng dụng cụ thể 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. Những ngôn ngữ khác cần có công cụ khác.