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

Question

我刚开始使用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吗？

- maxedison

Answer 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。

- jrburke

---

谢谢您的回复，这对我帮助很大。define()和require()之间的区别是我需要澄清的问题，而您提到的其他两个要点也非常有帮助。我认为第一个要点是我仍然需要更好地理解的内容——如何正确处理RequireJS的异步特性。 - maxedison

Answer 2

你可以在这里找到有关RequireJS和JavaScript模块化的详细信息：使用RequireJS实现JavaScript模块化（从意大利面条式代码到意大利卷面包片式代码）。

- Malkov

---

顶部链接 - 经过阅读多篇教程，这绝对是最好的。清晰简明。+1 - Gwyn Howell

这个链接理论上能回答这个问题，但最好在这里包含关键部分的答案，并提供链接作为参考。 - JJJ