A-Frames 组件架构属性类型

Created: November-22, 2018

属性类型主要定义模式如何从 DOM 中为每个属性解析传入数据。然后，解析的数据将通过组件原型上的 data 属性提供。以下是 A-Frame 的内置属性类型：

属性类型	描述	默认值
排列	将逗号分隔的值解析为数组（即 `"1, 2, 3" to ['1', '2', '3'])`。	[]
财富	对于指向常规资产的 URL。可以以 `url(<url>)` 的形式解析字符串中的 URL。如果值是元素 ID 选择器（例如，`#texture`），则此属性类型将调用 `getElementById` 和 `getAttribute('src')` 以返回 URL。`asset` 属性类型可能会也可能不会更改以处理 XHR 或直接返回 MediaElements（例如，`<img>` 元素）。	“”
音频	与 `asset` 属性类型相同的解析。A-Frame Inspector 可能会使用它来呈现音频资产。	“”
布尔	将字符串解析为布尔值（即，`false` 为 false，其他一切都是真实的）。	假
颜色	目前不做任何解析。主要由 A-Frame Inspector 用于呈现颜色选择器。此外，还需要使用颜色类型来实现颜色动画。	#FFF
INT	拨打 `parseInt`（例如，`124.5` 到 `124`）。	0
地图	与 `asset` 属性类型相同的解析。可能会在 A-Frame Inspector 中用于呈现纹理资源。	“”
模型	与 `asset` 属性类型相同的解析。可能会使用 A-Frame Inspector 来呈现模型资产。	“”
数	拨打 `parseFloat`（例如，`'124.5'`到`'124.5'`）。	0
选择	拨打 `querySelector`（例如，`#box` 到 `<a-entity id="box">`）。	空值
selectorAll	调用 `querySelectorAll` 并将 `NodeList` 转换为 `Array`（例如，`.boxes` 到[<a-entity class =`boxes`，…]），	空值
字符串	不进行任何解析。	“”
VEC 2	将两个数字解析为一个 `{x, y}` 对象（例如，`1 -2` 到 `{x: 1, y: -2}`。	{x：0，y：0}
VEC3	将三个数字解析成一个 `{x, y, z}` 对象（例如，`1 -2 3` 到 `{x: 1, y: -2, z: 3}`。	{x：0，y：0，z：0}
vec4	将四个数字解析成一个 `{x, y, z, w}` 对象（例如，`1 -2 3 -4.5` 到 `{x: 1, y: -2, z: 3, w: -4.5}`。	{x：0，y：0，z：0，w：0}

属性类型推断

架构将尝试推断仅给定默认值的属性类型：

schema: {default: 10}  // type: "number"
schema: {default: "foo"}  // type: "string"
schema: {default: [1, 2, 3]}  // type: "array"

如果未提供，架构将设置默认值，给定属性类型：

schema: {type: 'number'}  // default: 0
schema: {type: 'string'}  // default: ''
schema: {type: 'vec3'}  // default: {x: 0, y: 0, z: 0}

自定义属性类型

我们还可以通过提供 parse 函数来代替 type 来定义我们自己的属性类型或解析器：

schema: {
  // Parse slash-delimited string to an array 
  // (e.g., `foo="myProperty: a/b"` to `['a', 'b']`).
  myProperty: {
    default: [],
    parse: function (value) {
      return value.split('/');
    }
  }
}