我有一个模块，它返回一个由 JSON 数据和图像对象组成的数组。由于加载 JSON（从其他文件）和图像对象都需要时间，我需要我的模块只在两者都完成后才返回数组。
目前，该模块总是在其他模块中返回“未定义”，我相信这是因为该模块没有像我期望的那样等待返回（但我不确定）。或者，因为使用此 Atlas 模块的其他模块在返回任何内容之前将其声明为变量。
编辑以显示我如何定义/需要模块 *再次编辑以显示更多代码*
这是我的 tile-atlas 模块：
define( function() {
var tilesheetPaths = [
"tilesheets/ground.json",
"tilesheets/ground-collision.json",
"tilesheets/objects-collision.json"
];
var tileAtlas = [ ];
function loadAtlasJSON() {
for (var i = 0; i < tilesheetPaths.length; i++) {
loadJSON(
{
fileName: tilesheetPaths[ i ],
success: function( atlas ) {
addToTileAtlas( atlas );
}
}
);
}
};
function addToTileAtlas( atlas ) {
atlas.loaded = false;
var img = new Image();
img.onload = function() {
atlas.loaded = true;
};
img.src = atlas.src;
// Store the image object as an "object" property
atlas.object = img;
tileAtlas[ atlas.id ] = atlas;
}
// Returns tileAtlas[ ] once everything is loaded and ready
function tileAtlasReady() {
if ( allJSONloaded() && allImagesLoaded() ) {
console.log("TileAtlas ready");
return tileAtlas;
}
console.log("TileAtlas not ready");
setTimeout(tileAtlasReady, 10);
};
// Checks to make sure all XMLHttpRequests are finished and response is added to tileAtlas
function allJSONloaded() {
// If the tilesheet count in tileAtlas !== the total amount of tilesheets
if ( Object.size(tileAtlas) !== tilesheetPaths.length ) {
// All tilesheets have not been loaded into tileAtlas
console.log("JSON still loading");
return false;
}
console.log("All JSON loaded");
return true;
};
// Checks that all img objects have been loaded for the tilesheets
function allImagesLoaded() {
for ( var tilesheet in tileAtlas ) {
if (tileAtlas[tilesheet].loaded !== true) {
console.log("Images still loading");
return false;
}
}
console.log("All images loaded");
return true;
};
// Loads the JSON/images
loadAtlasJSON();
// Module should only return when tileAtlasReady() returns
return tileAtlasReady();
} );
这是我的库中的 loadJSON 函数：
window.loadJSON = function( args ) {
var xhr = new XMLHttpRequest();
xhr.overrideMimeType( "application/json" );
xhr.open( "GET", args.fileName, true );
xhr.onreadystatechange = function () {
if ( xhr.readyState == 4 ) {
if ( xhr.status == "200" ) {
// Check that response is valid JSON
try {
JSON.parse( xhr.responseText );
} catch ( e ) {
console.log( args.fileName + ": " + e );
return false;
}
args.success( JSON.parse(xhr.responseText) );
// xhr.status === "404", file not found
} else {
console.log("File: " + args.fileName + " was not found!");
}
}
}
xhr.send();
}
以及加载我的 tile-atlas 模块的模块：
define( ['data/tile-atlas'], function( tileAtlas ) {
function displayImages() {
// Code
};
// Returns undefined
console.log(tileAtlas);
displayKey();
} );
这是输出的样子：
[12:14:45.407] "JSON still loading"
[12:14:45.407] "TileAtlas not ready"
[12:14:45.408] undefined
[12:14:45.428] "JSON still loading"
[12:14:45.428] "TileAtlas not ready"
[12:14:45.469] "All JSON loaded"
[12:14:45.470] "Images still loading"
[12:14:45.470] "TileAtlas not ready"
[12:14:45.481] "All JSON loaded"
[12:14:45.481] "Images still loading"
[12:14:45.481] "TileAtlas not ready"
[12:14:45.492] "All JSON loaded"
[12:14:45.492] "All images loaded"
[12:14:45.492] "TileAtlas ready"
“未定义”来自当我从另一个模块控制台.log 我的 Atlas 模块时，这取决于 Atlas 模块。
我不确定是 Atlas 模块提前返回了某些东西，还是其他模块在返回某些东西之前将 Atlas 模块声明为变量。
但是如果是后者，有没有办法让模块在它们的依赖项完成返回某些东西之前不会运行？
我对 Require.js 和 AMD 完全陌生：这种方法是否存在固有缺陷？我认为将 AMD 与加载敏感模块一起使用是很常见的。
谢谢你的帮助。
编辑 查看另一个游戏的源代码，我意识到我可以使用 require.js 文本插件加载我的 JSON 文件，而不是在我的模块中实现 XHR。这要简单得多，因为我不需要处理在模块中等待 XHR 的复杂性。 以下是 BrowserQuest 的做法。