Biến

Biến là một khái niệm quan trọng trong lập trình. Chặn hỗ trợ các ngôn ngữ được nhập động như Python và JavaScript. Bạn có thể thêm thông tin để hỗ trợ các ngôn ngữ nhập mạnh (hoặc các ngôn ngữ nhập tĩnh) như Java hoặc C.

Đây là thông tin khác về ngôn ngữ dyamic so với ngôn ngữ nhập tĩnh.

Cung cấp các trường biến theo cách khối. Đây là các hộp thả xuống động cho biết tên của các biến mà người dùng đã cung cấp. Dưới đây là một ví dụ.

Theo mặc định, Blockly cho phép gán bất kỳ kiểu nào cho một biến và mọi trình tạo do Blockly cung cấp đều dành cho các ngôn ngữ được nhập động. Nếu đang sử dụng ngôn ngữ đã nhập, bạn có thể định cấu hình Blockly để hỗ trợ ngôn ngữ đó bằng cách thực hiện như sau:

Khối biến chưa được nhập

Các khối cơ bản nhất để truy cập và thao tác với một biến là khối getter và setter. Hãy cùng tìm hiểu các khối getter và setter mà Blockly cung cấp.

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

Thao tác này sẽ tạo 2 khối sau:

Một chi tiết quan trọng cần lưu ý là khi đặt "đầu ra" của biến getter của biến thành rỗng, giá trị trả về có thể thuộc bất kỳ kiểu nào. Ngoài ra, hãy lưu ý rằng dữ liệu đầu vào của phương thức setter không chỉ định bất kỳ lượt kiểm tra nào. Do đó, bạn có thể đặt biến thành bất kỳ loại giá trị nào.

Khối biến đã nhập

Bạn có thể thêm phương thức getter và phương thức setter thực thi việc kiểm tra loại. Ví dụ: nếu bạn đã tạo một biến thuộc kiểu "Panda", thì các định nghĩa sau đây sẽ tạo phương thức getter và setter với các kiểu thích hợp.

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

Thao tác này sẽ tạo ra 2 loại khối là phương thức getter và phương thức setter. Trình đơn thả xuống của họ chỉ hiển thị các biến thuộc kiểu Panda. Dữ liệu đầu vào và đầu ra của chúng chỉ chấp nhận các kết nối có kiểu Panda. Bạn phải đặt defaultType của trường thành một trong các giá trị thuộc mảng variableTypes. Việc không thiết lập defaultType trong khi cung cấp một mảng variableTypes sẽ gây ra lỗi.

Theo mặc định, không có chỉ báo trực quan nào để cho người dùng biết loại nào đang được sử dụng. Một cách dễ dàng để phân biệt các loại biến là dựa trên màu sắc.

Thêm biến vào Hộp công cụ

Để làm cho loại biến mới này hữu ích cho người dùng, bạn cần thêm cách tạo và sử dụng các biến mới.

Tạo một danh mục động mới cho các biến nếu bạn chưa có.

Thêm phương thức getter và phương thức setter mới vào danh mục.

Nút Tạo biến

Tiếp theo, người dùng của bạn cần có cách để tạo các biến. Cách đơn giản nhất là sử dụng nút "Tạo biến".

Khi tạo nút, hãy thực hiện lệnh gọi lại

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

và một biến Panda đã nhập sẽ được tạo!

Cách dễ nhất để cho phép người dùng tạo các biến thuộc nhiều loại là dùng một nút "tạo" cho mỗi loại (ví dụ: Tạo biến chuỗi, Tạo biến số, Tạo biến gấu trúc).

Nếu có nhiều hơn 2 hoặc 3 kiểu biến, bạn có thể nhanh chóng kết thúc bằng quá nhiều nút. Trong trường hợp đó, hãy cân nhắc sử dụng @blockly/plugin-typed-variable-modal để hiển thị một cửa sổ bật lên mà người dùng có thể chọn loại biến mong muốn.

Xác định trình tạo

Cuối cùng, bạn cần xác định trình tạo mã khối cho các khối biến mới. Bạn cũng có thể truy cập trực tiếp vào danh sách biến bằng Blockly.Workspace.getAllVariables() để lấy tất cả các biến thuộc mọi loại hoặc Blockly.Workspace.getVariablesOfType() để lấy tất cả các biến thuộc một loại cụ thể.