Question

我正在努力将javascript编译器集成到我的Web框架中，并且遇到了一些麻烦。

在开发模式下运行时，所有javascript模块都是由ajax单独加载的，但是当切换到生产模式时，它会将多个模块编译成一个文件以减少HTTP请求的数量。每个模块都可以调用一个函数来“需要”另一个模块。

我遇到的问题是如果moduleA需要moduleB，并且未加载moduleB，则会发出ajax请求。请考虑以下代码示例（极简化），其中moduleA和moduleB一起编译。 moduleA需要moduleB，并且脚本中的那一点尚未加载moduleB，因此它会发出ajax请求。几行之后运行moduleB，因此它已经运行了两次。

/* compiled script file (multiple files combined) */

util.require = function(moduleName) {
   if (moduleIsNotLoaded(moduleName)) {
      loadByAjax(moduleName);
   }
}

/* start module a */
util.require('moduleB');
moduleB.func();
/* end module a */
util.setModuleLoaded('moduleA');

/* start module b */
moduleB.func = function() {
   alert('hello world');
};
bind_some_event();
/* end module b */
util.setModuleLoaded('moduleB');

这是不可接受的，因为它违背了减少HTTP请求的初始目的，并且一些模块绑定了事件处理程序，不能绑定两次。有些模块不仅仅是函数定义，还有立即运行的代码。

有没有办法可以强制所有模块可用并注册为已加载，而不是在整个文件运行之前实际运行每个模块中的代码？我知道可能没有一个简单的解决方案，可能需要进行范式转换。

Answer 1

我们的网络应用程序也是由模块组成的。它的工作方式可能会给你一些想法：

最常见的模块，嵌入在初始HTML页面（HTML，JS，CSS，数据图像）中。应用程序从该页面开始（300-400kb，然后从缓存开始），以及单个HTTP调用数据。
这使应用程序启动非常快。

然后，如果用户选择了一个尚未加载的新模块。它通过iframe得到它。 HTML，CSS和Javascript对象由父页面导入。

然后，也会从父页面启动新模块。

防止js模块执行

1 个答案: