加载包含 JavaScript 网页中代码使用的参数的 JSON 文件

Question

我正在用javascript开发一个Web UI。数据存储在远程数据库中，由 API 访问。 我需要未存储在数据库中的额外数据，并且无法在其中创建任何表或存储任何结构化数据。

我从在代码中创建数组开始，但它很快就会变得不可读和不堪重负，导致我的 JS 文件中的代码和数据混合得很糟糕。

所以我创建了一个 JSON 文件来存储它们，看起来像这样。

{
"version": "1.0",
"encoding": "UTF-8",
"arrays": {
"array1": [
["key1","value1",0],
["key2","value2",1]
],
"array2": [
["key1","value1",0],
["key2","value2",1]
]
},
"templates": {
"template1": {
"property1": 2,
"property2": "value2",
"property3": true
},
"template2": {
"property1": 3,
"property2": "value3",
"property3": false
}
}
}

我编写了一个简单的解析器，在代码开头将数据加载到全局 JSON 对象中，并使用同步XMLHttpRequest因为我需要在执行期间随时从多个函数获得数据。

var jsonDB = JSON.parse(getXML('https://example.com/data.json'));
// Where getXML is a function using a sync XMLHttpRequest to get and return the file.

然后我可以按如下方式使用这些数据：

function X (param0, param1, param2) {
if ( param0 == jsonDB[param1][param2].property1 ) {
return jsonDB[param1][param2].property2;
}
}

JSON 文件大约 90 KB，加载速度非常快。从我的坚持来看，架构很好：代码很干净，与这些数据分开;数据结构化，易于维护。从用户的角度来看，加载时间微不足道。

但是，我收到一个烦人的警告：

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

然后，我创建了一个异步 xhr函数来加载文件。但是它被调用的次数是如此之大，以至于它最终出现在呈现的 HTML 中的未解析请求和空字段中。我不知道异步 xhr 如何缓存 JSON 文件，但结果是响应丢失了。

我最终尝试使用 await/sync 和 Promises，但我没有在不重写整个代码的情况下让某些东西按预期工作，这不是一个选项。

我需要从代码执行开始加载一次且仅一次 JSON 文件，以使它从任何地方可用，而不会收到浏览器的警告。就像它是一个.js库或 css 文件一样。块执行几毫秒是可以的，但有警告是不行的。

任何人都可以帮我解决这个问题吗？

注意：我已经看到很多问题在网站上以JS加载JSON，但没有一个可以解决这个确切的问题(JSON作为变量(，并且我使用await/sync所做的所有测试都失败了。

Answer 1

答案太简单了，我很惭愧。

1. 在 JSON 数据文件的开头添加变量声明。

jsonDB = {"version": "1.0", "encoding": "UTF-8", "arrays": {...

2. 将文件扩展名更改为.js以便在IDE中正确解释(我使用的是Visual Studio Code(。尽管 IDE 仍在正确检查 JSON 数据(作为 Javascript 变量(，但存在 2 个缺点：JSON 语法突出显示不再适用;Visual Studio Code的"Outline"面板不再可用，因为JSON没有被解释，这使得数据中的导航变得困难。

3. 加载 JSON 文件就像任何其他 JavaScript 文件一样。

<script src="dataJSON.js" ...