雄辩的Javascript第二版。第10章：对以下AMD实现的帮助

我是一个尝试学习javascript的新手。在雄辩的javascript的第10章中，讨论了AMD实现，并展示了define（）机制。首先定义一个函数getModule，它返回一个描述模块状态的对象；getModule中使用了未显式显示的backgroundReadFile函数。然后写出define函数

请允许我在理解此代码时寻求帮助。例如，如果我有一个函数需要两个模块，即define（[mod1，mod2]，function（mod1，mod2）…），那么getModule和define函数中的逐步过程是什么？多谢各位

以下代码也可以在他们的在线书籍中看到：

---

我在代码中添加了一堆注释。 我希望这是有帮助的

// module cache used in getModule
var defineCache = Object.create(null);
// Object.create(null) gives an empty object like {} but even *emptier*
// in that it doesn't inherit properties from a prototype
// which makes it better for using as a key-value map,
// although there's also a built-in Map type that could be used.

// This variable is actually shared between the two functions.
// (see explanation further on)
var currentMod = null;

// the getModule function
function getModule(name) {
  // If a module has already loaded *or has started* being loaded,
  // it should be in the cache and we can just return it.
  if (name in defineCache)
    return defineCache[name];

  var module = {exports: null,
                loaded: false,
                onLoad: []};

  // Put the module in the cache.
  defineCache[name] = module;

  // Asynchronously load file contents with a function such as
  // fs.readFile() in Node.js, or fetch() in the browser
  // (which both have different APIs; readFile would need
  // an err parameter in the callback, and fetch uses Promises)
  readFileAsync(name, function(code) {

    // We're going to execute the code, and the code should include a define() call,
    // but `define` will need access to the module object
    // corresponding to the code that's calling define().
    // So we set `currentMod` to the module object,
    // and share this state between the two functions.
    currentMod = module;

    // Then evaluate the the loaded code.
    new Function("", code)();
    // Creating a Function and executing it is like using eval()
    // but with less stuff considered 'in scope'.
    // The new function only has access to global scope,
    // which includes the `define` function,
    // but not other variables it doesn't need,
    // and doesn't need to be able to mess with!
    // eval() is more like dynamically including code in-line; it's messy.

    // I'm not sure why "" is passed there. According to the docs for Function,
    // any arguments before the last would be names of parameters of the function, 
    // which it's not using any of.
    // I suspect it would also work with just new Function(code)().

    // I think maybe there should be a `currentMod = undefined;` here
    // in case there are multiple top-level define() calls so it doesn't
    // overwrite the exports of a (sub-level) module from the first top-level define()
    // when doing the second top-level define()
  });

  // Return the module object even before the file is loaded.
  return module;
}

// the define function
function define(depNames, moduleFunction) {
  // If this was called from a module loaded from a file,
  // currentMod should be set by getModule just previously.
  // Otherwise, if this was called outside of a module (i.e. a main script),
  // currentMod should be undefined.
  var myMod = currentMod;

  // Call getModule for each dependency.
  // The naming seems a little inconsistent - shouldn't it be `var modules`?
  // I guess either works, but anyway deps is an array of the module objects.
  // This will also kick off reading the files for each of the modules,
  // but execution will continue on below before they're loaded. 
  var deps = depNames.map(getModule);

  // We want to know when all the dependencies are loaded,
  // so we need to know when any dependency loads.
  // Register callbacks to each dependency's onLoad event
  // (by adding it to an array of callbacks).
  deps.forEach(function(mod) {
    if (!mod.loaded)
      mod.onLoad.push(checkForWhenDepsLoaded);
  });
  // Check immediately in case there are no deps or they've already loaded.
  checkForWhenDepsLoaded();
  // (I moved this up here so both places that handle
  // calling checkForWhenDepsLoaded are next to each other.)
  // (They could also both be at the end.)


  // This was called whenDepsLoaded but that's not a great name
  // because it's not called *when* the deps are loaded,
  // it's called to check if they're loaded and then do some stuff if so.
  function checkForWhenDepsLoaded() {
    // Continue only if all the dependencies are marked as loaded.
    if (!deps.every(function(m) { return m.loaded; }))
      return;
    // Now from here, all deps should be loaded.
    // We should only get here once!
    // That's important when doing callbacks;
    // you need to know whether there's a possibility of calling back multiple times.
    // In some cases you do want to call back multiple times,
    // like when iterating over a collection (forEach and map etc.)
    // but then you still need to be careful not to call back multiple times *per item*.
    // You can try to look at code paths to make sure it shouldn't happen,
    // but you can also test the assumption!
    // You could make a flag variable like "calledBack"
    // with `var calledBack = false;` (at the top of `define` if doing it here),
    // set it to true when calling the callback, and before that
    // log a message in case it does actually get there a second time,
    // and if so return so the callback isn't called again.

    // Time to call back!
    // the caller of define() won't really care about the module *objects*,
    // just the exports of said modules,
    // so collect only the `exports` of each module in an array.
    var args = deps.map(function(m) { return m.exports; });
    // Then call back with them as arguments.
    // apply() lets you call a function with an array of values as arguments
    // essentially calling moduleFunction(args[0], args[1], ...)
    var exports = moduleFunction.apply(null, args);

    if (myMod) {
      myMod.exports = exports;
      // Mark as loaded and execute all onLoad handlers.
      myMod.loaded = true;
      myMod.onLoad.forEach(function(f) { f(); });
    }
  }
}

// module cache used in getModule
var defineCache = Object.create(null);
// Object.create(null) gives an empty object like {} but even *emptier*
// in that it doesn't inherit properties from a prototype
// which makes it better for using as a key-value map,
// although there's also a built-in Map type that could be used.

// This variable is actually shared between the two functions.
// (see explanation further on)
var currentMod = null;

// the getModule function
function getModule(name) {
  // If a module has already loaded *or has started* being loaded,
  // it should be in the cache and we can just return it.
  if (name in defineCache)
    return defineCache[name];

  var module = {exports: null,
                loaded: false,
                onLoad: []};

  // Put the module in the cache.
  defineCache[name] = module;

  // Asynchronously load file contents with a function such as
  // fs.readFile() in Node.js, or fetch() in the browser
  // (which both have different APIs; readFile would need
  // an err parameter in the callback, and fetch uses Promises)
  readFileAsync(name, function(code) {

    // We're going to execute the code, and the code should include a define() call,
    // but `define` will need access to the module object
    // corresponding to the code that's calling define().
    // So we set `currentMod` to the module object,
    // and share this state between the two functions.
    currentMod = module;

    // Then evaluate the the loaded code.
    new Function("", code)();
    // Creating a Function and executing it is like using eval()
    // but with less stuff considered 'in scope'.
    // The new function only has access to global scope,
    // which includes the `define` function,
    // but not other variables it doesn't need,
    // and doesn't need to be able to mess with!
    // eval() is more like dynamically including code in-line; it's messy.

    // I'm not sure why "" is passed there. According to the docs for Function,
    // any arguments before the last would be names of parameters of the function, 
    // which it's not using any of.
    // I suspect it would also work with just new Function(code)().

    // I think maybe there should be a `currentMod = undefined;` here
    // in case there are multiple top-level define() calls so it doesn't
    // overwrite the exports of a (sub-level) module from the first top-level define()
    // when doing the second top-level define()
  });

  // Return the module object even before the file is loaded.
  return module;
}

// the define function
function define(depNames, moduleFunction) {
  // If this was called from a module loaded from a file,
  // currentMod should be set by getModule just previously.
  // Otherwise, if this was called outside of a module (i.e. a main script),
  // currentMod should be undefined.
  var myMod = currentMod;

  // Call getModule for each dependency.
  // The naming seems a little inconsistent - shouldn't it be `var modules`?
  // I guess either works, but anyway deps is an array of the module objects.
  // This will also kick off reading the files for each of the modules,
  // but execution will continue on below before they're loaded. 
  var deps = depNames.map(getModule);

  // We want to know when all the dependencies are loaded,
  // so we need to know when any dependency loads.
  // Register callbacks to each dependency's onLoad event
  // (by adding it to an array of callbacks).
  deps.forEach(function(mod) {
    if (!mod.loaded)
      mod.onLoad.push(checkForWhenDepsLoaded);
  });
  // Check immediately in case there are no deps or they've already loaded.
  checkForWhenDepsLoaded();
  // (I moved this up here so both places that handle
  // calling checkForWhenDepsLoaded are next to each other.)
  // (They could also both be at the end.)


  // This was called whenDepsLoaded but that's not a great name
  // because it's not called *when* the deps are loaded,
  // it's called to check if they're loaded and then do some stuff if so.
  function checkForWhenDepsLoaded() {
    // Continue only if all the dependencies are marked as loaded.
    if (!deps.every(function(m) { return m.loaded; }))
      return;
    // Now from here, all deps should be loaded.
    // We should only get here once!
    // That's important when doing callbacks;
    // you need to know whether there's a possibility of calling back multiple times.
    // In some cases you do want to call back multiple times,
    // like when iterating over a collection (forEach and map etc.)
    // but then you still need to be careful not to call back multiple times *per item*.
    // You can try to look at code paths to make sure it shouldn't happen,
    // but you can also test the assumption!
    // You could make a flag variable like "calledBack"
    // with `var calledBack = false;` (at the top of `define` if doing it here),
    // set it to true when calling the callback, and before that
    // log a message in case it does actually get there a second time,
    // and if so return so the callback isn't called again.

    // Time to call back!
    // the caller of define() won't really care about the module *objects*,
    // just the exports of said modules,
    // so collect only the `exports` of each module in an array.
    var args = deps.map(function(m) { return m.exports; });
    // Then call back with them as arguments.
    // apply() lets you call a function with an array of values as arguments
    // essentially calling moduleFunction(args[0], args[1], ...)
    var exports = moduleFunction.apply(null, args);

    if (myMod) {
      myMod.exports = exports;
      // Mark as loaded and execute all onLoad handlers.
      myMod.loaded = true;
      myMod.onLoad.forEach(function(f) { f(); });
    }
  }
}