Question

我正在尝试构建HTML5游戏，但是遇到了问题。我正在尝试设计游戏，使其可以模块化。我的方法是让JSON文件加载不同的模块。

我尝试过的代码

var resources = {};

$.ajaxSetup({
  async: false
});

$.getJSON('res/gen/generators.json', function (data) {
  resources.generators = data;
});

for (let generator in resources.generators) {
  $.getScript("res/gen/" + resources.generators[generator].folder + "/script.js");
}

$.ajaxSetup({
  async: true
});

JSON文件

{
  "memoryless": {
    "folder": "memoryless",
    "name": "Memoryless",
    "description": "Generates a piece with no regard to the previous history."
  }
}

不幸的是，我收到一条错误消息，指出“ [不赞成使用主线程上的同步XMLHttpRequest，因为它对最终用户的使用产生不利影响。要获得更多帮助，请检查https://xhr.spec.whatwg.org/”。我不希望任何其他代码运行到这些负载。我该怎么办？

Answer 1

与JavaScript的异步特性作斗争将导致“不好的”开发体验。拥抱异步性。

在这里，我们开始嵌套promise和回调：

var resources = {};

$.getJSON('res/gen/generators.json', function (data) {
  resources.generators = data;

  $.when(Object.keys(resources.generators).map(function(generator) { 
    return $.getScript("res/gen/" + resources.generators[generator].folder + "/script.js");
  }).then(function() {
    ...do other stuff
  })
});

或者，您可以使用async/await：

(async () => {
  var resources = {}
  resources.generators = (await $.getJSON('res/gen/generators.json')).data;

  for (let generator in resources.generators) {
    await $.getScript("res/gen/" + resources.generators[generator].folder + "/script.js");
  }
  ...do other stuff
})()

作为另一种选择，您可以放弃自定义模块系统，而使用标准的JavaScript Modules：

import memoryless from "res/gen/memoryless/script.js"

如何在JavaScript中同步加载JSON？

1 个答案: