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

การสร้างโค้ดเป็นกระบวนการเปลี่ยนบล็อกบนพื้นที่ทำงานเป็นสตริงของโค้ดที่ดำเนินการได้

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

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

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

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

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

// 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
• เปโซฟิลิปปินส์

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

โมดูล

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

รหัสเกริ่นนำหรือรหัสไปรษณีย์

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

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 มักใช้ในการเรียกใช้ฟังก์ชันเพื่อเริ่มต้นการทำงานที่ส่วนท้ายของโค้ด

หากโค้ดที่คุณสร้างขึ้นสามารถเรียกใช้ได้ตามที่เป็นอยู่ ก็ไม่จำเป็นต้องใส่คำย่อหรือโพสต์สคริปต์

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

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

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