什麼是區塊定義？

方塊定義是定義自訂方塊的物件。舉例來說，它會定義積木的外觀和風格 (文字、欄位、連線、顏色等)，以及行為 (積木層級事件處理常式等)。

舉例來說，這個區塊：

`string_length` 區塊。

可以透過 JSON 或 JavaScript 定義，如下所示：

JSON

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String"
    }
  ],
  "output": "Number",
  "colour": 160,
  "tooltip": "Returns number of letters in the provided text.",
  "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
}]);

defineBlocksWithJsonArray 會從 JSON 物件建立區塊定義。

JavaScript

Blockly.Blocks['string_length'] = {
   init: function() {
     this.appendValueInput('VALUE')
         .setCheck('String')
         .appendField('length of');
     this.setOutput(true, 'Number');
     this.setColour(160);
     this.setTooltip('Returns number of letters in the provided text.');
     this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
   }
};

使用 JavaScript 時，您可以直接建立區塊定義。

區塊定義的運作方式

區塊定義是包含函式值屬性的 mixin。當新區塊例項化時，這些屬性會複製到新建立的區塊物件。Blockly 會呼叫這些函式，叫用自訂行為。

因為定義函式會混入區塊物件：

  • 定義函式中的 this 關鍵字是指區塊物件。也就是說，可用於存取 Block (或 BlockSvg) 類別中的公開方法和屬性。

Blockly 定義了少數函式，可用於自訂積木。其中最常見的是 init，Blockly 會呼叫這個函式來初始化區塊，並用於定義區塊的外觀和風格。如需完整清單，請參閱 Block 和 BlockSvg 類別中的函式值屬性。這些屬性會有效形成區塊定義的實作介面，所有屬性都是選用屬性。

區塊定義也可以有自訂函式，但 Blockly 不會直接呼叫這些函式。而是用來實作其他函式。舉例來說，區塊層級的事件處理常式 (Block.onchange 屬性) 可以將不同事件委派給不同的自訂函式。

如何建立區塊定義

建立區塊定義的方法有很多種：

  • 使用 Blockly 開發人員工具定義方塊的外觀和風格。 將產生的 JSON 或 JavaScript 複製到程式碼中，並視需要新增自訂程式碼。詳情請參閱「Blockly 開發人員工具」。
  • 找出類似的區塊，複製其定義，然後視需要修改。詳情請參閱「修改現有定義」。
  • 手動撰寫區塊定義。詳情請參閱 JSON 和 JavaScript。