自訂構成要素:區塊典範

設計使用 Blockly 的應用程式時,有多種模式可供選擇。請盡早考量這些選擇,因為這會影響使用者需要的區塊。

設定

許多 Blockly 應用程式的用途是描述設定,而非可執行的程式。設定應用程式通常會先在工作區初始化一個根層級區塊。例如 Blockly 開發人員工具的「Block Factory」分頁:

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

這項操作會建立不可移除的可刪除區塊,其中包含使用者的所有設定。隨時都可以序列化工作區,判斷目前的設定。

這類應用程式可能會想要自動停用任何未連線至根區塊的區塊。此操作可以在同一行中完成:

workspace.addChangeListener(Blockly.Events.disableOrphans);

序列計畫

大多數 Blockly 應用程式都是專為建立序列程式而設計。使用者會堆疊一起各個區塊,並依序執行。

工作區的每個 (未停用) 區塊都會成為計畫的一部分。如果區塊有多個堆疊,系統會先執行較多的區塊。(如果兩個堆疊的高度大致相同,系統會優先考量左側堆疊 (在 RTL 模式中))。

您隨時可以將工作區匯出至可執行的程式碼。這段程式碼能以任何語言在 JavaScript 用戶端執行 (使用 eval 或 JS 解譯器),或是在伺服器端執行。

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

平行計畫

某些 Blockly 應用程式會選擇平行執行所有區塊堆疊,而非依序執行。例如音樂應用程式,其中打鼓迴圈與旋律同時執行。

實作平行處理的其中一種方式,是分別為每個區塊產生程式碼:

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

如果指定語言是 JavaScript,則系統可能會使用 allCode 陣列建立多個 JS 解譯器,以便同時執行。如果譯文語言與 Python 類似,則可將 allCode 陣列組合為使用執行緒模組的單一程式。

與任何平行程式一樣,針對任何共用資源 (例如變數和函式),必須謹慎做出決策。

活動導向計畫

事件處理常式只是由系統呼叫的函式,而非程式呼叫的函式。這些區塊可以圍住要執行的區塊堆疊,或者是位於區塊堆疊頂端的標頭。

有些開發人員偏好在事件區塊頂端加入「帽子」,以便與其他區塊區分。這並非 Blockly 的預設外觀,但可以透過將轉譯器常數 ADD_START_HATS 覆寫為 true 來新增 (自訂轉譯器程式碼研究室 - 覆寫常數),或是新增主題並設定區塊樣式的帽子選項。如要進一步瞭解如何將帽子設為主題的一部分,請參閱這篇文章

在事件導向模型中,建議您一併為程式啟動建立處理常式。在這個模型下,系統會忽略工作區中未連線至事件處理常式的任何區塊,並且不會執行這些區塊。

設計使用事件的系統時,請考量是否該支援相同事件處理常式的多個執行個體。