javascript - 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 正在正确评估，但是无论 .module-news 是否存在，模块 news-grid 总是在加载。

我发现如果我更改变量的模块路径的字符串，则 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 格式编写 require 调用 var module = require("module name")。 您不能使用它来有条件地加载模块。

调用 require('module name')(将字符串作为第一个参数而不是依赖项数组)是一种便利。它将返回一个模块，但当且仅当该模块已经加载。如果模块尚未加载，则调用将失败。您不必担心在调用 require('module name') 之前预加载模块的唯一原因是 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') 将返回一个模块，并且不会失败，只有当模块已经加载时。

如果您希望有条件地加载您的模块，请放弃 CommonJS 习惯用法。