我们在开发过程中喜欢 RequireJS 和 AMD,我们可以在其中编辑模块,在浏览器中点击重新加载,并立即看到结果。但是当需要将我们的模块连接到一个文件中以进行生产部署时,显然必须仍然存在 AMD 加载器,无论该加载器是 RequireJS 本身还是它的较小伙伴“almond”,如下所述:
http://requirejs.org/docs/faq-optimization.html#wrap
我的困惑是:为什么需要加载程序?除非您有非常特殊的情况需要在模块内部调用 require()
,否则一系列 AMD 模块似乎可以在根本没有加载程序的情况下连接起来。最简单的示例是一对模块,如下所示。
ModA.js:
define([], function() {
return {a: 1};
});
ModB.js:
define(['ModA'], function(A) {
return {b : 2};
});
鉴于这两个模块,连接器似乎可以简单地生成以下文本,而不会给生产服务器或浏览器带来 RequireJS 或 Almond 所需的额外带宽或计算负担。
我想象一个连接器产生(我使用人字形引号 «,» 来显示上面两个模块的片段被插入的位置):
(function() {
var ModA = «function() {
return {a: 1};
}»();
var ModB = «function(A) {
return {b : 2};
}»(ModA);
return ModB;
})();
据我所知,这将正确地重现 AMD 的语义,同时使用最少的无关粘附 JavaScript。有这样的连接器吗?如果不是,我会不会认为我应该写一个傻瓜——真的很少有代码库由用 define()
编写的简单干净的模块组成,并且永远不需要进一步的 require()
内部的调用会启动以后的异步代码获取吗?
最佳答案
AMD 优化器不仅可以优化要下载的文件数量,还可以优化内存中加载的模块数量。
例如,如果您有 10 个模块并且可以将它们优化为 1 个文件,那么您就可以节省 9 次下载。
如果 Page1 使用所有 10 个模块,那就太好了。但是如果 Page2 只使用 1 呢? AMD 加载器可以延迟“工厂函数”的执行,直到模块被require
。因此,Page2 只触发一个“工厂函数”来执行。
如果每个模块在被require
时消耗 100kb 的内存,那么具有运行时优化的 AMD 框架也将为我们在 Page2 上节省 900kb 的内存。
这方面的一个例子可以是“关于框”样式的对话框。它的执行被延迟到最后一秒,因为在 99% 的情况下它不会被访问。例如。 (松散的 jQuery 语法):
aboutBoxBtn.click(function () {
require(['aboutBox'], function (aboutBox) {
aboutBox.show();
}
});
在您确定有必要之前,您可以节省创建与“关于框”关联的 JS 对象和 DOM 的费用。
有关详细信息,请参阅 Delay executing defines until first require对于 requirejs 对此的看法。
关于javascript - 为什么串联的 RequireJS AMD 模块需要加载程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10987674/