Variables

變數是重要的程式設計概念。區塊式支援 Python 和 JavaScript 等動態類型語言，且只要額外完成一些工作，您就能新增資訊，支援 Java 或 C 等強類型語言 (或靜態類型語言)。

如要進一步瞭解動態輸入語言與靜態輸入語言，請參閱這篇文章。

Blockly 提供的變數欄位是動態下拉式選單方塊，會顯示使用者提供的變數名稱。以下其中一個範例。

根據預設，Blockly 允許將任何類型指派給變數，而 Blockly 提供的所有產生器都是動態類型語言。如果您改用輸入語言，您可以按照下列步驟進行設定，讓 Blockly 支援該語言：

未輸入類型的變數區塊

存取及操控變數最基本的區塊是 getter 和 setter 區塊。現在就來看看 Blockly 提供的 getter 和 setter 區塊。

JSON

// Block for variable getter.
{
  "type": "variables_get",
  "message0": "%1",
  "args0": [
    {    // Beginning of the field variable dropdown
      "type": "field_variable",
      "name": "VAR",    // Static name of the field
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}"    // Given at runtime
    }    // End of the field variable dropdown
  ],
  "output": null,    // Null means the return value can be of any type
  ...
},

// Block for variable setter.
{
  "type": "variables_set",
  "message0": "%{BKY_VARIABLES_SET}",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}"
    },
    {
      "type": "input_value",    // This expects an input of any type
      "name": "VALUE"
    }
  ],
  ...
}

JavaScript

// Block for variable getter.
Blockly.Blocks['variables_get'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME");
    this.setOutput(true, null);
    ...
  }
};

// Block for variable setter.
Blockly.Blocks['variables_set'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck(null)
        .appendField("set")
        .appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME")
        .appendField("to");
    this.setOutput(true, null);
    ...
  }
};

這會建立下列兩個區塊：

請特別注意，只要將變數 getter 的「output」設為空值，就可以將傳回值設為任何類型。另請注意，變數 setter 的輸入內容不會指定任何檢查。因此，變數可以設為任何類型的值。

具類型的變數區塊

您可以新增可強制執行類型檢查的 getter 和 setter。舉例來說，如果您已建立「Panda」類型的變數，下列定義會使用適當類型建立 getter 和 setter。

JSON

 // Block for Panda variable getter.
 {
  "type": "variables_get_panda",
  "message0": "%1",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
      "variableTypes": ["Panda"],    // Specifies what types to put in the dropdown
      "defaultType": "Panda"
    }
  ],
  "output": "Panda",    // Returns a value of "Panda"
  ...
},

 // Block for Panda variable setter.
{
  "type": "variables_set_panda",
  "message0": "%{BKY_VARIABLES_SET}",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
      "variableTypes": ["Panda"],
      "defaultType": "Panda"
    },
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "Panda"    // Checks that the input value is of type "Panda"
    }
  ],
  "previousStatement": null,
  "nextStatement": null,
  ...
}

JavaScript

// Block for variable getter.
Blockly.Blocks['variables_get_panda'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldVariable(
          "VAR_NAME", ['Panda'], 'Panda'), "FIELD_NAME");
    this.setOutput(true, 'Panda');
    ...
  }
};

// Block for variable setter.
Blockly.Blocks['variables_set_panda'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck('Panda')
        .appendField("set")
        .appendField(new Blockly.FieldVariable(
            "VAR_NAME", null, ['Panda'], 'Panda'), "FIELD_NAME")
        .appendField("to");
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    ...
  }
};

這會建立兩種區塊：getter 和 setter。下拉式選單只會顯示 Panda 類型的變數。這些類型的輸入和輸出只接受 Panda 類型的連線。欄位的 defaultType 必須設為 variableTypes 陣列中的其中一個值。如未提供 defaultType 且提供 variableTypes 陣列，系統將擲回錯誤。

根據預設，不會顯示視覺指標，向使用者說明目前使用的類型。區分變數類型的其中一個簡單方法就是使用「色彩」。

在 Toolbox 中新增變數

如要讓這個新類型的變數實用，您必須新增建立和使用新變數的方法。

如果還沒有變數，請替變數建立新的動態類別。

將新的 getter 和 setter 新增至類別。

建立變數按鈕

接下來，使用者需要建立變數的方法。最簡單的方法是使用「建立變數」按鈕。

建立按鈕時，請發出回呼呼叫

Blockly.Variables.createVariableButtonHandler(button.getTargetWorkspace(), null, 'panda');

就會建立 Panda 輸入變數！

如要允許使用者建立多種類型的變數，最簡單的方法是為每種類型提供一個「建立」按鈕 (例如建立字串變數、建立數字變數、建立 Panda 變數)。

如果您有超過兩個或三個變數類型，則快速最終可能會產生過多按鈕。在這種情況下，請考慮使用 @blockly/plugin-typed-variable-modal，顯示可供使用者選取所需變數類型的彈出式視窗。

定義產生器

最後，您必須為新的變數區塊定義區塊程式碼產生器。您也可以使用 Blockly.Workspace.getAllVariables() 直接存取變數清單，藉此取得所有類型的所有變數，或使用 Blockly.Workspace.getVariablesOfType()，則可取得特定類型的所有變數。