Require.js 甚至在 IF 语句中加载模块

Question

我在通过 require.js 加载某些 .js 模块时发现了一些问题问题是：我只需要在某些页面加载某些模块，而不是整个网站。因此我以这种方式放置代码：

if($('.module-news').length > 0 + $('.module-ticket-euromillones-multiple').length + $('.module-news-page').length > 0) {
            require('_modules/news-grid').init();
        }

此代码在 HTML 中搜索是否存在 class="module-news"（新闻页面）。如果是这样，则使用 javascript.

加载模块

那是行不通的。 IF 正在正确评估，但是模块 news-grid 总是加载，无论 .module-news 是否存在。

我发现如果我更改变量的模块路径的字符串，那么 requires 的行为是正确的，但这没有任何意义。下面的代码是这样工作的：

var name = "_modules/news-grid";

if($('.module-news').length > 0 + $('.module-ticket-euromillones-multiple').length + $('.module-news-page').length > 0) {
                require(name).init();
            }

这是 require 的已知问题吗？我错过了什么吗？（也许在 requirejs.config 设置中？

感谢帮助

Answer 1

解决方案

您应该使用常规的 RequireJS 习惯用法来调用 require:

if (...) {
    require(['_modules/news-grid'], function (news_grid) {
        news_grid.init();
    });
}

为什么失败

您正在使用 RequireJS 的功能，该功能允许您以 CommonJS 格式 var module = require("module name") 编写 require 调用。 您不能使用它来有条件地加载模块。

调用require('module name')（将字符串作为第一个参数而不是依赖数组）很方便。它将 return 一个模块，但当且仅当该模块 已经加载 时。如果模块尚未加载，则调用将失败。在调用 require('module name') 之前你不必担心 pre-loading 模块的唯一原因是 RequireJS 为你做了。

define(function (require) {
    var foo = require('foo');
});

被 RequireJS 解释为：

define(['require', 'foo'], function (require) {
    var foo = require('foo');
});

它在 CommonJS 习惯用法中扫描对 require 的调用的函数，并生成一个模块列表，在执行模块之前加载这些模块。 条件对于这个过程是完全透明的。 任何以字符串作为第一个参数的 require 调用都将被检测到，并且它要加载的模块将被添加到之前加载的依赖项中define 的回调被调用...

RequireJS 不会检测那些将非字符串传递给 require 的情况。如果你写：

var name = "foo";
var foo = require(name);

RequireJS 不会知道你要加载 foo 并且不会将 foo 添加到依赖项列表中。这是一个解决方案吗？不，因为记住我之前说过 require('module name') 将 return 一个模块，并且不会失败，只有当模块 已经加载 .

如果你想让你的模块有条件地加载，那就放弃 CommonJS 的习惯用法。

Require.js 甚至在 IF 语句中加载模块

Require.js is loading modules even inside an IF statement

javascript

jquery

requirejs

amd

解决方案

为什么失败