javascript - 使用糖语法动态加载 requirejs 模块

Question

您好，我正在尝试通过获取过滤器列表并遍历数组以像这样加载这些模块，以动态方式加载一些 requireJs 模块

define(function(require){
var runFilters = function(filters){
    var _ = require('underscore');
    var computedFilters  = getFilters(filters);
    var result = _.every(computedFilters,function(filter){
        return filter();
    });
    return result;
};

var getFilters = function(filters){
    var _ = require('underscore');
    return _.map(filters,function(filter){
        return require('filters/' + filter);
    },this);
}


var register = function(filters,fn){
    return function(){
        var args = Array.prototype.slice.apply(arguments);
        if(runFilters(filters))
            fn.apply(this,args);
    }
}
return{
    register: register
}
});

这给我错误: Uncaught Error :尚未为上下文加载模块名称“filters/isAuth”:_

但是当将其替换为静态方式(只是为了测试)时，它会完美加载

define(function(require){
    var runFilters = function(computedFilters){
        var result = _.every(computedFilters,function(filter){
            return filter();
        });
        return result;
    };

    var getFilters = function(filters){
        var _ = require('underscore');
        return _.map(filters,function(filter){
            console.log(filter);
            return require('filters/' + filter);
        },this);
    }


    var register = function(filters,fn){
        var cachedFilters = [];
        cachedFilters.push(require('filters/isAuth'));
        return function(){
            var args = Array.prototype.slice.apply(arguments);
            if(runFilters(cachedFilters))
                fn.apply(this,args);
        }
    }
    return{
        register: register
    }
});

这也给我错误

cachedFilters.push(require('filters'+'/isAdmin'));

Answer 1

您遇到了 RequireJS 对 CommonJS 语法支持的限制。这是交易。当 RequireJS 定义一个模块时，它会查看您提供给 define 的工厂函数(回调)。它寻找这种模式:

/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g

这匹配 require 调用，例如 var foo = require('foo'); 对于每个这样的调用，它将所需的模块添加到模块的依赖项列表中.所以，例如，像这样的东西:

// The `require` parameter must be present and is filled with something useful
// by RequireJS.
define(function (require) {
    var foo = require('foo');
    var bar = require('bar');
    ...
});

被这样对待:

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

如果仔细查看上面的正则表达式，您会发现它只会匹配具有单个参数的require 调用，该参数是一个文字字符串。所以像 require("something"+ somevar) 这样的东西是行不通的。 RequireJS 在进行这种转换时完全忽略了它们。

这个问题不能通过改变正则表达式来解决。 RequireJS 的核心是一个异步加载模块的系统。带有单个字符串文字的 require 调用的形式是一种糖，允许更轻松地移 Root 据 CommonJS 模式设计的模块，并且适合那些喜欢这种风格的人(即使他们没有移植任何东西)。这种类型的调用看起来是同步的，实际上并不是同步的。为了支持计算传递给它的名称的情况，RequireJS 必须预测值是什么。

如果你想完全自由地在代码中加载你想要的任何模块而无需提前知道名称可能是什么，那么你必须使用异步 require 调用( require([computed_value], function(mod) {...})) 这意味着您的代码必须是异步的。如果您要加载的模块集有限，并且总是全部加载它们是可以接受的，那么您可以使用文字字符串来要求它们:

define(function (require) {
    require("filters/isAdmin");
    require("filters/b");
    require("filters/c");
    require("filters/d");
    ...
});

RequireJS 将执行上述转换，并使用计算值进一步调用 require，这些计算值解析为您在模块早期所需的名称之一，不会失败。