สร้างและเรียกใช้โค้ด

แอปพลิเคชันจะสร้างรหัสได้ทุกเมื่อ เช่น อาจสร้างโค้ดเมื่อผู้ใช้ปลายทางคลิกปุ่มหรือทุกครั้งที่ผู้ใช้ทําการเปลี่ยนแปลง

ดูภาพรวมของการสร้างโค้ดได้ที่การสร้างโค้ด

นําเข้าเครื่องมือสร้างรหัสภาษา

คุณต้องมีเครื่องมือสร้างรหัสภาษาจึงจะสร้างโค้ดได้ คุณสามารถนําเข้าเครื่องมือสร้างโค้ดภาษาด้วยวิธีใดวิธีหนึ่งต่อไปนี้

โมดูล

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

// Generate code for all the blocks in the workspace.
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);

Unpkg

คุณต้องใส่เครื่องมือสร้างหลังจากใส่ 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>

// Generate code for all the blocks in the workspace.
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>

// Generate code for all the blocks in the workspace.
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);

สร้างโค้ด

หากต้องการสร้างโค้ด ให้ใช้ฟังก์ชัน workspaceToCode ของเครื่องมือสร้าง

const code = javascriptGenerator.workspaceToCode(workspace);

การอัปเดตอย่างต่อเนื่อง

การอัปเดตอย่างต่อเนื่องช่วยให้คุณแสดงหรือเรียกใช้โค้ดได้ทุกครั้งที่มีการเปลี่ยนแปลง การสร้างโค้ดเป็นการดำเนินการที่รวดเร็ว จึงส่งผลต่อประสิทธิภาพเพียงเล็กน้อย ซึ่งทําได้โดยใช้ Event Listener

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

เพิ่มโค้ดส่วนนำหรือโค้ดส่วนท้าย

หลังจากสร้างโค้ดแล้ว คุณอาจใส่โค้ดไว้ก่อนหรือหลังโค้ดที่สร้างขึ้นก็ได้

let code = javascriptGenerator.workspaceToCode(workspace);
// Add a preamble and a postscript to the code.
const preamble = 'import {MyLibrary} from \'/path/to/my/library\';\n'
const postscript = 'MyLibrary.myKickoffFunction();\n';
code = preamble + code + postscript;

โดยทั่วไปแล้ว โค้ดส่วนนำหน้าจะใช้เพื่อใส่คำจำกัดความภายนอกไว้ที่ตอนต้นของโค้ด โดยปกติแล้ว โค้ด Postscript จะใช้เพื่อเรียกฟังก์ชันเพื่อเริ่มการทำงานที่ส่วนท้ายของโค้ด

หากโค้ดที่สร้างขึ้นสามารถทํางานได้โดยไม่ต้องแก้ไข ก็ไม่จำเป็นต้องใส่ส่วนนําหน้าหรือส่วนท้าย

เรียกใช้โค้ด

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

หากต้องการเรียกใช้โค้ด JavaScript โปรดดูหัวข้อสร้างและเรียกใช้ JavaScript บทความนี้จะกล่าวถึงฟีเจอร์พิเศษบางอย่างของเครื่องมือสร้างโค้ด JavaScript รวมถึง JSInterpreter ซึ่งทีม Blockly แนะนำให้ใช้เพื่อเรียกใช้ JavaScript อย่างปลอดภัย

ภาษาอื่นๆ ต้องใช้เครื่องมืออื่นๆ