Javascript 以角度存储大型静态阵列的最佳做法是什么？

嗨，我想在我的angular应用程序中存储大量的国家，因为有些大型表单有时需要国家选择。我有以下想法，但不知道什么是最佳实践：

将阵列存储在数据服务中，并在需要时抓取 将数组存储为组件上的属性 将数组存储在静态变量文件中，并在需要时抓取

---

编辑：我只想补充一点，这个数组将用于可重用的select组件中，该组件可以在构建表单时多次使用。

您可以将数据存储在外部json文件中，然后在控制器中检索数据。只要确保在实例化控制器时插入$http服务即可

$http.get('./data/countries.json').then(function(ret){
    $scope.countries = ret.data;
});

将阵列存储在数据服务中，并在需要时抓取 这是最好的一个，因为Angular中的服务的行为基本上类似于单例。它将贯穿整个程序生命周期

您甚至可以通过实现一个getter-setter类型的接口来改进它

get countries(): Country[] {
  // If present in Local Storage, return that
  // Else return whatever is there in memory
  // Else fetch from network, i.e. httpClient.get()
}

set countries(countries: Country[]) {
  // Store the countries in memory
  // Store the countries in the Local Storage
}

将数组存储为组件上的属性

非常糟糕的想法，数组需要从一个组件传递到另一个组件。服务被用来共享代码

将数组存储在静态变量文件中，并在需要时抓取

该文件将不断增长，直到您无法维护它为止。考虑一下关注点的分离

判决：

---

Angular是一个固执己见的框架，如果您不想遭受决策疲劳，请遵循《风格指南》中提到的任何最佳实践

其他可行的选择：存储在数据服务中，在需要时抓取，并缓存在本地/会话存储器中。我将它存储在数据服务中，然后从那里抓取。这使您可以在需要时轻松地在多个组件中使用它。如果不涉及状态，3似乎是最简单的解决方案。如果只有约200个国家，则此阵列远远不够大：我会将其存储在dataservice中。大型国家阵列：从性能角度来看，即使是地球上每一个国家的阵列也不算大。我们的应用程序定期生成数千个元素的丰富列表。虽然这是事实，但考虑到将其存储为组件属性所涉及的内存仅为几百字节，网络请求所涉及的相对巨大的开销值得吗？@msinfo如果数据是静态的，正如OP所说，然后，它将被客户端缓存，因此它实际上会表现得更好，因为它只下载一次，而不是每次用户访问该站点时都下载一次。@Archer只下载了一次，那么为什么还要为它进行额外的往返呢，与其将其内联到组件中？@msanford不会神奇地出现-如果它在组件中，它仍然需要下载，而且组件被缓存的可能性要小得多，我不相信它会被缓存。因此，每当用户重新访问该站点时，我都会发表评论。@Archer我不同意这样的假设，即如果缓存配置良好，组件比任何其他静态资源都更不可能被缓存，但我想这也是我将此问题标记为POB的原因直到决策疲劳：我喜欢。谢谢，非常有用的回答：@ShaneWatson不客气：