我刚刚开始使用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?
答案 0 :(得分:47)
define()
应仅用于定义模块。对于上面的示例,应该动态加载一段代码,使用require()
更合适:
<强> functionA.js 强>
functionA(){
require(['functionC'],function(functionC){
//use funcC in here to call functionC
});
}
一些注意事项:
require([])
是异步的,因此如果functionA
的调用者期望该函数返回值,则可能会出现错误。最好是functionA
接受在functionA
完成其工作时调用的回调。require()
时致电functionA
;但是,在第一次调用之后,加载functionC.js
不会受到惩罚,它只加载一次。第一次调用require()
时,它将加载functionC.js
,但其余时间,RequireJS知道它已经加载,因此它将调用function(functionC){}
函数而不请求{{1}再次。答案 1 :(得分:22)
您可以在此处找到有关RequireJS和JavaScript模块化的详细信息:JavaScript modularity with RequireJS (from spaghetti code to ravioli code)