Optimal Asset Loading - HTML5 Game Development Insights - page 19

In this example, the shaders for 3D rendering are referenced by their source path, which maps to a processed
JSON formatted object representation of the shader. Since the resulting filename is unique, there is no need to
maintain a hierarchical directory structure to store files. This allows the server to apply the caching headers to all files
in a given directory, in this case a directory named staticmax , which contains all files that should be cached for the
longest time period; see Listing 2-2.
Listing 2-2. A Simplified Example of Loading a Static Asset Cached as Described Above
/**
* Assumed global values:
*
* console - The console to output error messages for failure to load/parse assets.
*/
/**
* The prefix appended to the mapping table name.
* This is effectively the location of the asset directory.
* This will eventually be the URL of the hosting server/CDN.
*/
var urlPrefix = 'staticmax/';
/**
* The mapping of the shader source path to the processed asset.
* If an asset is not yet loaded this mapping will be undefined.
*/
var shaderMapping = {};
/**
* The function that will make the asynchronous request for the asset.
* The callback will return with the status code and response it receives from the server.
*/
function requestStaticAssetFn(srcName, callback) {
// If there is no mapping, a URL request cannot be made.
var assetName = urlMapping[srcName];
if (!assetName) {
return false;
}
function httpRequestCallback() {
// When the readyState is 4 (DONE), call the callback
if (xhr.readyState === 4) {
var xhrResponseText = xhr.responseText;
var xhrStatus = xhr.status;
if (callback) {
callback(xhrResponseText, xhrStatus);
}
xhr.onreadystatechange = null;
xhr = null;
callback = null;
}
}