การสร้างโค้ด

การสร้างโค้ดคือขั้นตอนการเปลี่ยนบล็อกบนพื้นที่ทำงานให้เป็น สตริงโค้ดที่สามารถดำเนินการได้

การสร้างโค้ดมีความสำคัญอย่างยิ่ง เพราะเป็นสิ่งที่ทำให้คุณสามารถ ทำสิ่งต่างๆ เช่น ประเมินนิพจน์เลขคณิต ย้ายอักขระ ผ่านเขาวงกต หรือกำหนดค่าร้านค้าออนไลน์

ไม่สามารถ "เรียกใช้" บล็อกโดยตรง แต่คุณจะสร้างสตริงโค้ดขึ้นมาแทน ดำเนินการเหล่านั้น

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

หากต้องการสร้างโค้ด คุณต้องเลือกภาษาแบบข้อความที่ต้องการ สร้างได้

เครื่องมือสร้างโค้ดคือคลาสที่จัดการกฎในการสร้างโค้ดที่ เป็นภาษาใดภาษาหนึ่ง แต่ไม่ได้เจาะจงภาษาใดบล็อกหนึ่ง สำหรับ เช่น จัดการสิ่งต่างๆ เช่น การจัดรูปแบบความคิดเห็น การเยื้องข้อความ และ สตริงที่ยกมา

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

const code = javascriptGenerator.workspaceToCode(myWorkspace);

Blockly มีโปรแกรมสร้างโค้ดในตัว 5 รายการดังนี้

• JavaScript ES5
• งูหลาม 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);

หากรายการนี้ไม่มีภาษาที่คุณต้องการใช้สร้างโค้ด คุณสามารถ ก็สร้างโปรแกรมสร้างโค้ดที่กำหนดเองได้ด้วย

เครื่องมือสร้างบล็อกโค้ด

ส่วนที่ 2 ของการสร้างโค้ดคือการกำหนดโค้ดที่บล็อกแต่ละบล็อก สร้างได้ คุณต้องดำเนินการนี้สำหรับแต่ละบล็อก สำหรับแต่ละภาษา ที่ต้องการสร้าง

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

วิธีการทำงานของเครื่องมือสร้างโค้ดจะแตกต่างกันไปสำหรับบล็อกประเภทต่างๆ

• การบล็อกที่มีเอาต์พุต
• การบล็อกที่ไม่มีเอาต์พุต

แต่ทุกเมตริกต้องมีการรวบรวมค่าจากช่อง รวบรวมบล็อกภายใน จากนั้นเชื่อมต่อ สตริงเหล่านั้น

รุ่น

การสร้างอาจทำได้เมื่อผู้ใช้ปลายทางร้องขอ (ตัวอย่างเช่น คลิกปุ่มใดปุ่มหนึ่ง) มิเช่นนั้น สามารถสร้างได้อย่างต่อเนื่อง

การอัปเดตอย่างต่อเนื่องช่วยให้คุณสามารถแสดงหรือเรียกใช้โค้ดได้ทุกครั้งที่ผู้ใช้สร้าง เปลี่ยน การสร้างโค้ดเป็นการดำเนินการที่รวดเร็ว จึงมีประสิทธิภาพน้อย ผลกระทบสำหรับการดำเนินการนี้ ซึ่งทำได้โดยใช้ 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);

รหัส Preamble หรือ Postscript

หลังจากสร้างโค้ดแล้ว คุณสามารถใส่คำแนะนํา (ไม่บังคับ) หรือ โค้ดโฆษณาก่อนๆ ที่ส่วนต้นหรือส่วนท้ายของโค้ดที่สร้างขึ้น

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

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

หากโค้ดที่สร้างขึ้นสามารถเรียกใช้ได้ตามที่เป็นอยู่ ก็ไม่จำเป็นต้องใส่โค้ด คำปราศรัยหรือ Postscript

การลงมือปฏิบัติ

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

สำหรับโค้ด JavaScript ทีม Blockly แนะนำให้ใช้ JSInterpreter ส่วนภาษาอื่นๆ ต้องใช้เครื่องมืออื่น