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

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

污染全局命名空间(窗口)可能会导致问题 - 有一天您可能会覆盖重要的变量并且很难追踪到，因为它不会是 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);
    }
  }
}