代码块剖析

本文档将探讨代码块的不同部分。

连接

连接用于定义块可以连接的位置以及可以连接的块类型。

关键术语： 连接一词通常是指两个事物之间的关系。在 Blockly 中，它通常表示连接器，例如插头或插座。因此，当您连接两个块时，需要将它们的连接对齐。

连接分为四种类型：

连接类型	图片
输出连接
输入连接
之前的连接
下次联系

输出连接和输入连接可以相互连接，后续连接和之前连接也可以相互连接。您还可以通过连接检查进一步限制连接。

您可以使用自定义渲染器自定义连接的形状。

顶级连接

模块有三个连接，您可以选择是否使用。

一个块可以有一个输出连接，在块的前沿表示为凸形拼图连接器。输出连接将一个块的值（表达式）传递给另一个块。具有输出连接的块称为值块。

一个块的顶部可能有一个上一个连接（表示为凹口），底部可能有一个下一个连接（表示为凸片）。这些块可以垂直堆叠，表示一系列语句。没有输出连接的块称为语句块，通常既有上一个连接，也有下一个连接。

如需了解详情，请参阅顶级连接。

字段

字段定义了块中的大多数界面元素。这些元素包括字符串标签、下拉菜单、复选框、图片以及用于字面数据（例如字符串和数字）的输入。例如，此循环块使用标签字段、下拉字段和数字字段。

Blockly 提供多种内置字段，包括文本输入、颜色选择器和图片。您还可以创建自己的字段。

如需了解详情，请参阅字段。

输入

输入是字段和连接的容器。块是通过以砖块的形式在一行或多行中呈现其输入来构建的。

关键术语： “输入”一词在 Blockly 中有多种含义。其最常见的含义是此处所述的含义：字段和连接的容器。不太常见的是，它表示输入一个值，或指已输入的值。

输入共有四种不同的类型，所有类型都可以包含字段（包括标签），其中两种类型包含单个连接。您还可以创建自定义输入源，该输入源支持自定义渲染。

输入类型	连接类型	图片
虚拟输入	无
行尾输入	无
值输入	输入连接
陈述输入	下次联系

我们将通过一系列示例来介绍这些输入。如需了解如何定义构成块的输入、连接和字段，请参阅 JSON 中的块结构和 JavaScript 中的块结构。

虚拟输入源

虚拟输入只是字段的容器，没有连接。例如，以下数字块具有一个包含单个数字字段的虚拟输入。

再举一个更复杂的例子，假设有一个将两个数字相加的块。这可以从具有三个字段（数字、标签、数字）的单个虚拟输入构建：

或三个虚拟输入源，每个输入源都包含一个字段：

行尾输入

Blockly 使用启发式方法来决定是将所有输入渲染在同一行中，还是将每个输入渲染在单独的行中。如果您想确保输入内容另起一行，请使用行尾输入作为上一个输入。

与虚拟输入类似，行尾输入可以包含字段，但没有连接。例如，以下是根据包含两个字段的行尾输入和包含一个字段的虚拟输入构建的加法块。行尾输入会强制将虚拟输入渲染到新行中。

值输入

字段可接受的内容有限。例如，数字字段仅接受数字。但如果您想将两个变量相加，该怎么办？或者，将过程调用的结果添加到其他计算的结果中？如需解决此问题，请使用输入连接，而不是字段。这样一来，用户就可以使用值块作为输入值。

值输入包含零个或多个字段，并以输入连接结束。以下代码块将加法代码块中的数字字段替换为输入连接。它由两个值输入构建而成，其中第一个不包含任何字段，第二个包含标签字段。两者都以输入连接结束。

对账单输入

最后一种输入是语句输入，其中包含零个或多个字段，并以下一个连接结束。下一个连接可让您在代码块中嵌套一系列语句块。例如，请考虑以下重复块。此块的第二行包含一个带有单个标签字段和下一个连接的语句输入。

陈述输入始终显示在自己的行中。您可以在以下 if-then-else 块中看到这一点，该块的第一行包含一个值输入，接下来的两行包含语句输入。

内嵌输入源与外部输入源

输入可以内嵌呈现，也可以外部呈现。此属性用于控制值输入的连接器是在块内（内嵌）还是在块外边缘（外部）呈现，以及输入是在同一行还是不同行中呈现。

创建自定义块时，您可以指定要使用的类型，也可以让 Blockly 为您决定。如需了解详情，请参阅内嵌输入与外部输入。

开始玩吧！

了解输入、字段和连接的最佳方式是在 Blockly 开发者工具中构建代码块，并为 inputs 下拉菜单选择不同的设置（automatic、external、inline）。

图标

除了输入、连接和字段之外，代码块还可以包含一个或多个图标。这些标记有多种用途，例如显示警告、输入块级注释或显示 mutator 界面。例如，以下是一个包含评论图标及其关联编辑器的块。

如需了解详情，请参阅Icons。

块和 JavaScript 对象

块、输入、连接、字段和图标都是 JavaScript 对象。

Blockly 组件	基类	子类
屏蔽	Block	BlockSvg
输入	Input	DummyInput
		EndRowInput
		ValueInput
		StatementInput
		自定义输入
连接	Connection	RenderedConnection
字段	Field	FieldTextInput
		FieldNumber
		FieldLabel
		自定义字段
		等等
图标	Icon	CommentIcon
		MutatorIcon
		WarningIcon
		自定义图标

块中的对象会形成树形对象。了解块的图形表示形式如何与此树对应，有助于您编写代码以通过编程方式操纵块。例如，一个 controls_for 块：

对应于以下 JavaScript 对象树。

// <Object> means an instance of an Object.
{                                   // Block
  nextConnection: <Connection>,     // ConnectionType NEXT_STATEMENT
  outputConnection: null,
  previousConnection: <Connection>, // ConnectionType PREVIOUS_STATEMENT
  inputList: [                      // Array of Inputs in block
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [                   // Array of fields in Input
        <FieldLabel>,               // 'count with'
        <FieldVariable>,            // i
        <FieldLabel>,               // 'from'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'to'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'by'
      ],
    },
    {                               // StatementInput
      connection: <Connection>,     // ConnectionType NEXT_STATEMENT
      fieldRow: [
        <FieldLabel>,               // 'do'
      ],
    },
  ]
}