Variables

變數是重要的程式設計概念。Blockly 支援動態型別語言 (例如 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);
    ...
  }
};

這會建立下列兩個區塊：

變數 `foo` 的 getter 和 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 Panda 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 Panda 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 陣列中的其中一個值。提供 variableTypes 陣列時，如果未設定 defaultType，系統會擲回錯誤。

根據預設，系統不會提供視覺指標，讓使用者瞭解目前使用的類型。區分變數類型最簡單的方法就是使用顏色。

將變數新增至工具箱

如要讓使用者能善用這類新變數，您必須新增建立及使用新變數的方法。

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

名為「變數」的開啟類別，內含「建立變數」按鈕。

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

建立 `foo` 和 `bar` 變數後，類別相同。其中包含「建立變數」按鈕、set-variable-to 和 change-variable-by 區塊，以及 getter 區塊。

「建立變數」按鈕

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

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

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

系統就會建立型別變數！"Panda"

如要讓使用者輕鬆建立多種型別的變數，最簡單的方法是為每種型別提供一個「建立」按鈕 (例如「建立字串變數」、「建立數字變數」、「建立熊貓變數」)。

如果變數類型超過兩三種，按鈕數量很快就會過多。在這種情況下，建議使用 @blockly/plugin-typed-variable-modal 顯示彈出式視窗，讓使用者選取所需的變數類型。

定義產生器

最後，您需要為新的變數方塊定義程式碼產生器。您也可以使用 Workspace.getVariableMap().getAllVariables() 直接存取變數清單，取得所有類型的所有變數，或使用 Workspace.getVariableMap().getVariablesOfType() 取得特定類型的所有變數。