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

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

define()只能用来定义一个模块。 对于上面的例子,应该dynamic加载一段代码,使用require()更合适:

functionA.js

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

一些说明:

  • require([])是asynchronous的,所以如果functionA的调用者期望从该函数返回值,那么可能会有错误。 如果functionA接受一个在functionA完成其工作时调用的callbackfunctionA ,那么最好。
  • 上面的代码会调用require()来调用每个functionA ; 但是,在第一次调用之后,加载functionC.js不会受到任何惩罚,只会加载一次。 第一次require()被调用,它将加载functionC.js c.js,但是剩下的时间,RequireJS知道它已经被加载了,所以它会调用function(functionC){}函数,而不再要求functionC.js

您可以在这里find有关RequireJS和JavaScript模块化的详细信息: 带有RequireJS的JavaScript模块化(从意大利面代码到馄饨代码)