什么是块定义？

块定义是用于定义自定义块的对象。例如，它定义了块的外观和风格（文本、字段、连接、颜色等）以及行为（块级事件处理程序等）。

例如，以下代码块：

一个“string_length”块。

可以在 JSON 或 JavaScript 中定义，如下所示：

JSON

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String"
    }
  ],
  "output": "Number",
  "colour": 160,
  "tooltip": "Returns number of letters in the provided text.",
  "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
}]);

defineBlocksWithJsonArray 可根据 JSON 对象创建块定义。

JavaScript

Blockly.Blocks['string_length'] = {
   init: function() {
     this.appendValueInput('VALUE')
         .setCheck('String')
         .appendField('length of');
     this.setOutput(true, 'Number');
     this.setColour(160);
     this.setTooltip('Returns number of letters in the provided text.');
     this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
   }
};

使用 JavaScript 时，您可以直接创建块定义。

代码块定义的工作原理

块定义是包含函数值属性的 mixin。当实例化新块时，这些属性会被复制到新创建的块对象中。Blockly 会调用这些函数来调用自定义行为。

由于定义函数混合到块对象中：

  • 定义函数中的 this 关键字是指块对象。也就是说，它可用于访问 Block（或 BlockSvg）类中的公共方法和属性。

Blockly 定义了少量可用于自定义块的函数。其中最常见的是 init，Blockly 会调用此函数来初始化块，并使用此函数来定义块的外观和风格。如需查看完整列表，请参阅 Block 和 BlockSvg 类中的函数值属性。这些属性实际上构成了块定义要实现的接口；所有这些属性都是可选的。

块定义也可以包含自定义函数，但 Blockly 不会直接调用这些函数。不过，它们可用于实现其他功能。例如，块级事件处理程序（Block.onchange 属性）可以将不同的事件委托给不同的自定义函数。

如何创建块定义

您可以通过多种不同的方式创建块定义：

  • 使用 Blockly 开发者工具定义代码块的外观和风格。 将生成的 JSON 或 JavaScript 复制到您的代码中，并根据需要添加自定义代码。如需了解详情，请参阅 Blockly 开发者工具。
  • 找到类似的块，复制其定义，然后根据需要进行修改。如需了解详情，请参阅修改现有定义。
  • 手动编写块定义。如需了解详情，请参阅 JSON 和 JavaScript。