เครื่องมือสร้างโค้ด

แอปพลิเคชันส่วนใหญ่ของ Blockly กำหนดให้โปรแกรมของผู้ใช้ต้องแปลเป็นภาษาโปรแกรม Blockly จะดําเนินการนี้ในฝั่งไคลเอ็นต์

กำลังสร้างโค้ด

ขั้นตอนแรกคือการใส่เครื่องมือสร้างสำหรับภาษาที่เป็นปัญหา Blockly รวมโปรแกรมสร้างต่อไปนี้

• JavaScript
• Python
• PHP
• Lua
• Dart

คุณสามารถนำเข้าและใช้เครื่องมือสร้างโดยใช้วิธีใดวิธีหนึ่งต่อไปนี้

โมดูล

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.workspaceToCode(workspace);
const pythonCode = python.workspaceToCode(workspace);
const phpCode = php.workspaceToCode(workspace);
const luaCode = luna.workspaceToCode(workspace);
const dartCode = dart.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.workspaceToCode(workspace);
const pythonCode = python.workspaceToCode(workspace);
const phpCode = php.workspaceToCode(workspace);
const luaCode = lua.workspaceToCode(workspace);
const dartCode = dart.workspaceToCode(workspace);

การสร้างแบบเรียลไทม์

การสร้างโค้ดเป็นการดำเนินการที่รวดเร็วมาก ดังนั้นการเรียกฟังก์ชันนี้บ่อยๆ จึงไม่เสียหาย กลยุทธ์ที่ใช้กันโดยทั่วไปคือการสร้างและแสดงโค้ดแบบเรียลไทม์โดยการเพิ่ม Listener ลงในเหตุการณ์การเปลี่ยนแปลงของ Blockly ดังนี้

import {javascriptGenerator} from 'blockly/javascript';
function updateCode(event) {
  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}
workspace.addChangeListener(updateCode);

ดูเหตุการณ์สำหรับข้อมูลเพิ่มเติม