JavaScript 中的块结构

本文档将讨论如何使用 JavaScript 定义代码块中的输入和字段（包括标签）。如果您不熟悉这些术语，请先参阅块的结构，然后再继续。

您还可以以 JSON 格式定义输入、字段和连接。

附加输入

JavaScript API 针对每种输入类型都包含一个 append 方法：

JavaScript

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  this.appendValueInput('LIST')
      .setCheck('Array')
      .setAlign(Blockly.inputs.Align.RIGHT)
      .appendField('in list');
  this.appendStatementInput('DO')
      .appendField('do');
  this.appendDummyInput()
      .appendField('end');
}

每个 appendInput 方法都可以接受一个标识符字符串，代码生成器使用该字符串来检索与输入连接的块的代码。代码生成器很少引用虚拟输入和行尾输入，因此通常没有理由为其分配标识符。

JavaScript API 还包含一个用于附加自定义输入的通用 appendInput 方法。请注意，在这种情况下，标识符应直接传递给自定义输入的构造函数。

JavaScript

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

所有 appendInput 方法（包括泛型和非泛型）都会返回输入对象，以便可以使用方法链进一步配置这些对象。有三种用于配置输入的内置方法。

附加字段

创建输入并使用 appendInput 将其附加到块后，可以选择性地将任意数量的字段附加到输入。这些字段通常用作标签，用于描述每个输入的用途。

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

最简单的字段是标签。Blockly 的惯例是使用全小写文本，专有名词（例如 Google、SQL）除外。

输入行可以包含任意数量的字段。多个 appendField 调用可以链接在一起，以便高效地向同一输入行添加多个字段。

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

appendField('hello') 调用实际上是使用显式 FieldLabel 构造函数（即 appendField(new Blockly.FieldLabel('hello'))）的快捷方式。只有在指定类名时，才需要使用构造函数，这样才能使用 CSS 规则设置标签的样式。

连接检查

JavaScript

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

setCheck 方法用于检查连接的类型。如果给定实参为 null（默认值），则此输入可连接到任何块。如需了解详情，请参阅连接检查。

对齐字段

JavaScript

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

setAlign 方法用于对齐输入中的字段。有三个自描述值可作为实参传递给此函数：Blockly.inputs.Align.LEFT、Blockly.inputs.Align.RIGHT 和 Blockly.inputs.Align.CENTER。

当块以从右到左的模式（例如阿拉伯语和希伯来语）呈现时，左侧和右侧会反转。因此，Blockly.inputs.Align.RIGHT 会将字段向左对齐。