将数据传递给框架中的组件时有哪些最佳实践？

Question

我对 a-frame 很陌生，但我真的很喜欢创建组件并将它们用作 HTML 中的基元。在我当前的项目中，我正在创建一个框架组件，它在给定一组顶点的情况下创建几何体。我正在以通用方式创建组件，以便我可以将不同的顶点集传递给它并创建不同的形状。

尽管这是一个具体问题，但它涉及一个更普遍的问题，即建议将可能相当大的数据集（对象、数组）传递到组件中的方法是什么。理想情况下，我希望能够通过原语从 html 层传递它们。数据量会有所不同，因此我无法在每个数据项的模式中硬编码不同的属性。

我目前的解决方案是将数据作为全局变量提供。然后，我将变量名称作为字符串传递给组件，并使用 window[variablename] 将其转换为变量名称。需要明确的是，这工作正常，但我很想知道是否有更好的方法（或者我可能会尝试的替代方法）。

请在下面找到我正在做的事情的例子；

这是我在这个例子中使用的数据位；

var exampleArraydata = [
    {
        "x":3,
        "y":3,
        "z":5
    },
    {
        "x":0,
        "y":15,
        "z":0
    },
    {
        "x":15,
        "y":0,
        "z":0
    }
]

var exampleObjectdata = {
    "x":3,
    "y":3,
    "z":5
}

这是示例组件；

AFRAME.registerComponent('examplecomponent', {

    schema: {        
        exampleArray: {type: 'string', default: 'foo'},
        exampleObject: {type: 'string', default: 'bar'},
    },

    init: function (){
       this.testArray = window[this.data.exampleArray]
       this.testObject = window[this.data.exampleObject]
       //logging just to check that it works
       console.log(this.testArray)
       console.log(this.testObject)
       //make geometry with these vec3s...
    }

});

这是我用那个组件创建的原语；

AFRAME.registerPrimitive('a-example', {
  defaultComponents: {
    examplecomponent: {}
  },
  mappings: {
    array: 'examplecomponent.exampleArray',
    object: 'examplecomponent.exampleObject'
  }

});

这里是自定义 html 标签，我在其中将变量名作为属性传递；

<a-example
    array="exampleArraydata"
    object="exampleObjectdata">
</a-example>

同样，这确实有效，所以如果人们认为这是一个好方法，那就太好了，但我对此并不陌生，如果对此有任何问题，我真的很感激理解问题是什么，最好是一些替代建议.例如，如果对象托管在 URL 而不是我自己代码中的 var 会怎么样？

Answer 1

您也可以使用自己的自定义解析函数从 HTML 属性的特殊方式。

这是文档中的示例： https://aframe.io/docs/0.7.0/core/component.html#custom-property-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('/');
    }
  }
}

Answer 2

污染全局命名空间 (window) 可能会导致问题 - 有一天您可能会覆盖重要的变量并且很难追踪到，因为它不会 undefined。建议的方法是通过 HTML 属性传递数据 - 正如您自己想的那样。

Noam Almosnino 为您指明了正确的方向。你可以随心所欲地解析数据，如果你想将一个对象传递给组件，只需解析它的 strigied 版本：

<a-example objectData="{\"x\":3,\"y\":3,\"z\":5}"></a-example>

schema: {
  objectData: {
    default: {},
    parse: function (str) {
      return JSON.parse(str);
    }
  }
}

将数据传递给框架中的组件时有哪些最佳实践？

What are some best practices when passing data to a component in a-frame?

javascript

webvr

aframe