了解何时以及如何使用 Require.JS答案

【问题标题】：Understanding when and how to use Require.JS了解何时以及如何使用 Require.JS
【发布时间】：2011-01-22 22:24:32
【问题描述】：

我刚刚开始使用 Require.JS，我有点不清楚应该在哪些适当的情况下使用它，以及在这些情况下使用它的正确方法。

这是我目前使用 Require.JS 进行设置的方式。我有两个函数，functionA() 和 functionB()。这两个函数都需要一个额外的函数 functionC() 才能正常工作。

我只想在必要时加载 functionC()，即当 functionA() 或 functionB() 将被调用时。所以我有以下文件：

functionC.js

functionC(){
  //do stuff
}

functionA.js

functionA(){  
  define(['functionC'],function(){
    //functionC() is loaded because it is listed as a dependency, so we can proceed
    //do some functionA() stuff
  });
}

functionB.js

functionB(){  
  define(['functionC'],function(){
    //functionC() is loaded because it is listed as a dependency, so we can proceed
    //do some functionB() stuff
  });
}

那么，这样设置正确吗？如果我最终在同一页面上同时调用 functionA() 和 functionB()，是否会因为它们都加载 functionC.js 文件而做额外的工作？如果是这样，那有问题吗？如果是这样，有没有办法设置它，以便他们首先检查 functionC.js 是否已加载，并且仅在尚未加载时才加载它？最后，这是对 Require.JS 的适当使用吗？

【问题讨论】：

标签： javascript requirejs

【解决方案1】：

define() 只能用于定义模块。对于上面的例子，应该动态加载一段代码，使用require()比较合适：

functionA.js

functionA(){
  require(['functionC'],function(functionC){
    //use funcC in here to call functionC
  });
}

一些注意事项：

require([]) 是异步的，因此如果 functionA 的调用者期望该函数的返回值，则可能会出现错误。最好 functionA 接受在 functionA 完成其工作时调用的回调。
上面的代码每次调用functionA都会调用require()；但是，在第一次调用之后，加载functionC.js 不会受到惩罚，它只加载一次。第一次调用require()，它会加载functionC.js，但其余时间，RequireJS 知道它已经加载，所以它会调用function(functionC){} 函数而不再次请求functionC.js。

【讨论】：

感谢您的回复——它有很大帮助。 define() vs. require() 是我需要澄清的，你的另外两个要点真的很有帮助。我认为第一个要点是我仍然需要更好地理解的东西——如何正确处理 RequireJS 的异步特性。

【解决方案2】：

您可以在此处找到有关 RequireJS 和 JavaScript 模块化的详细信息：JavaScript modularity with RequireJS (from spaghetti code to ravioli code)

【讨论】：

顶部链接 - 阅读了大量教程，这是迄今为止最好的。简洁明了。 +1
该链接理论上可以回答问题，但it would be preferable将答案的基本部分包含在此处，并提供链接以供参考。