Javascript 了解何时以及如何使用 Require.JS
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4771025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Understanding when and how to use Require.JS
提问by maxedison
I've just begun to work with Require.JS and I'm a bit unclear on the appropriate cases in which it should be used, as well as the correct way to use it in those cases.
我刚刚开始使用 Require.JS,我不太清楚应该在哪些情况下使用它,以及在这些情况下使用它的正确方法。
Here's how I currently have things set up with Require.JS. I have two functions, functionA()
and functionB()
. Both of these functions require an additional function, functionC()
to work properly.
这是我目前使用 Require.JS 进行设置的方式。我有两个功能,functionA()
和functionB()
. 这两个功能都需要附加功能functionC()
才能正常工作。
I only want to load functionC() when necessary, i.e. when functionA() or functionB() is going to be called. So I have the following files:
我只想在必要时加载 functionC(),即当要调用 functionA() 或 functionB() 时。所以我有以下文件:
functionC.js
函数C.js
functionC(){
//do stuff
}
functionA.js
函数A.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
函数B.js
functionB(){
define(['functionC'],function(){
//functionC() is loaded because it is listed as a dependency, so we can proceed
//do some functionB() stuff
});
}
So, is this set up correctly? And if I end up calling both functionA() and functionB() on the same page, is extra work being done since they both load the functionC.js file? If so, is that a problem? And if so, is there a way to set it up so that they first check to see if functionC.js has been loaded yet, and only load it if it hasn't been? Finally, is this an appropriate use of Require.JS?
那么,这个设置正确吗?如果我最终在同一页面上同时调用 functionA() 和 functionB(),是否有额外的工作因为它们都加载了 functionC.js 文件?如果是这样,这是一个问题吗?如果是这样,有没有办法设置它,以便他们首先检查 functionC.js 是否已加载,如果尚未加载,则仅加载它?最后,这是对 Require.JS 的适当使用吗?
采纳答案by jrburke
define()
should only be used to define a module. For the above example, where a piece of code should be dynamically loaded, using require()
is more appropriate:
define()
应该只用于定义一个模块。对于上面的例子,在一段代码应该动态加载的地方,使用require()
更合适:
functionA.js
函数A.js
functionA(){
require(['functionC'],function(functionC){
//use funcC in here to call functionC
});
}
Some notes:
一些注意事项:
require([])
is asynchronous, so if the caller offunctionA
is expecting a return value from that function, there will likely be errors. It is best iffunctionA
accepts a callback that is called whenfunctionA
is done with its work.- The above code will call
require()
for every call tofunctionA
; however, after the first call, there is no penalty taken to loadfunctionC.js
, it is only loaded once. The first timerequire()
gets called, it will loadfunctionC.js
, but the rest of the time, RequireJS knows it is already loaded, so it will call thefunction(functionC){}
function without requestingfunctionC.js
again.
require([])
是异步的,因此如果 的调用者functionA
期望该函数的返回值,则可能会出现错误。最好functionA
接受一个在functionA
完成工作时调用的回调。- 上面的代码会
require()
在每次调用时调用functionA
;然而,在第一次调用之后,加载没有任何惩罚functionC.js
,它只加载一次。第一次require()
被调用时,它会加载functionC.js
,但其余时间,RequireJS 知道它已经加载,所以它会调用该function(functionC){}
函数而不functionC.js
再次请求。
回答by Malkov
You can find details about RequireJS and JavaScript modularity here: JavaScript modularity with RequireJS (from spaghetti code to ravioli code)
您可以在此处找到有关 RequireJS 和 JavaScript 模块化的详细信息:JavaScript 模块化与 RequireJS(从意大利面条代码到馄饨代码)