问题 使用RequireJS从阵列动态加载模块


我正在使用RequireJS AMD加载方法处理应用程序。

我将我的模块动态地从配置文件中拾取到数组中

var amd_modules = ["module1", "module2","module3"]

现在我有了requireJS代码

require(amd_modules, function(result) {
console.log("All modules loaded");
}

现在,结果变量显示第一个模块“module1”。如何将其他模块也放入function()括号内的变量中。

例如,

require(amd_modules, function(module1, module2, module3) { //
}

我无法编写上述硬编码,因为直到运行时才知道动态变量的数量。请告诉我如何在函数内动态捕获对象。

谢谢


7569
2017-08-21 02:18


起源



答案:


简单地使用 arguments

require(amd_modules, function() {
    console.log("All modules loaded");
    // arguments should now be an array of your required modules
    // in the same order you required them
});

但是,除非您有充分的理由这样做,否则您可能需要重新考虑设计应用程序的方式 - 即使在最高级别,您的模块也应该简单且可测试。拥有大量不同的依赖关系表明您可能正在尝试在回调函数中做很多事情。将每个代码路径分解为自己的模块,然后仅切换到顶级依赖项。在代码中:

// Instead of this:
require(amd_modules, function() {
    console.log("All modules loaded");
    if (complex_condition_A) {
        var x = arguments[0],
                y = arguments[1],
                z = arguments[2];
        // Do things with x, y and z
    }
    else if (complex_condition_B) {
        var a = arguments[0],
                b = arguments[1];
        // Do things with a and b
    }
    else {
        // et cetera, et cetera, et cetera
    }
});


// Do this instead
var rootModule;
if (complex_condition_A) rootModule = "A";
else if (complex_condition_B) rootModule = "B";
else rootModule = "C";
require(rootModule, function(root) {
    // Root has the same API, regardless of which implementation it is
    // This might be as simple as an `init` method that does everything
    // or as complex as, say Facebook's API, but with different libraries
    // loaded depending on the platform the page is loaded on
    // (IE vs. Android for example).
});

13
2017-08-21 02:40



感谢您的投入。很好地了解依赖性。实际上,我正在以每个模块彼此独立的方式构建。为什么我写这个方法是 - 通过看这个场景。如果一个页面有三个模块模块A,B和C.每个模块进入三个div,一次只显示一个(通过选项卡)。因此,选项卡A显示模块A.选项卡B显示模块B等。现在我认为 - 由于用户在选项卡A中,我只能为模块A调用requireJS。然后一旦加载页面,调用其余模块。 - user1402539
所以模块A首先加载并执行,然后当DOM准备就绪时,我得到模块B和模块B文件的requireJS调用并执行它们。我认为这比用户必须等待所有模块A,B和C加载要好。我认为这样做的另一个原因是 - 我想如果以后其他开发人员添加更多模块,则init页面加载应该仅取决于该页面所需的模块。这是我计划的代码片段。 - user1402539
var initModules = ['ModuleA'],deferedModules = ['Module C','ModuleD']; require(initLoad,function(){console.log(“Initial components loaded。”); CORE.create_module(arguments [0]); //这里我为该模块组件创建一个模块.CORE.start_all(); //启动上面两个模块setTimeout(loadRestComponents,2000);}); - user1402539
loadRestComponents = function(){console.log(“现在我加载并初始化组件的其余部分”); require(deferedModules,function(){console.log(“Loaded rest of components”); CORE.create_module(arguments [0]); //这里我为该模块组件创建一个模块.CORE.create_module(arguments [1] ); //为其他模块组件创建模块CORE.start_all(); //启动上述两个模块}); } - user1402539
@ user1402539 - 延迟加载模块是一个很好的方法 - 我会使用这种模式: require([initModule, deferredModules], function(CORE, deferredModules) { CORE.create_module(); for (var i=0, l=deferredModules.length; i<l; i++) { CORE.create_module(deferredModules[i]); } }); - Sean Vieira


答案:


简单地使用 arguments

require(amd_modules, function() {
    console.log("All modules loaded");
    // arguments should now be an array of your required modules
    // in the same order you required them
});

但是,除非您有充分的理由这样做,否则您可能需要重新考虑设计应用程序的方式 - 即使在最高级别,您的模块也应该简单且可测试。拥有大量不同的依赖关系表明您可能正在尝试在回调函数中做很多事情。将每个代码路径分解为自己的模块,然后仅切换到顶级依赖项。在代码中:

// Instead of this:
require(amd_modules, function() {
    console.log("All modules loaded");
    if (complex_condition_A) {
        var x = arguments[0],
                y = arguments[1],
                z = arguments[2];
        // Do things with x, y and z
    }
    else if (complex_condition_B) {
        var a = arguments[0],
                b = arguments[1];
        // Do things with a and b
    }
    else {
        // et cetera, et cetera, et cetera
    }
});


// Do this instead
var rootModule;
if (complex_condition_A) rootModule = "A";
else if (complex_condition_B) rootModule = "B";
else rootModule = "C";
require(rootModule, function(root) {
    // Root has the same API, regardless of which implementation it is
    // This might be as simple as an `init` method that does everything
    // or as complex as, say Facebook's API, but with different libraries
    // loaded depending on the platform the page is loaded on
    // (IE vs. Android for example).
});

13
2017-08-21 02:40



感谢您的投入。很好地了解依赖性。实际上,我正在以每个模块彼此独立的方式构建。为什么我写这个方法是 - 通过看这个场景。如果一个页面有三个模块模块A,B和C.每个模块进入三个div,一次只显示一个(通过选项卡)。因此,选项卡A显示模块A.选项卡B显示模块B等。现在我认为 - 由于用户在选项卡A中,我只能为模块A调用requireJS。然后一旦加载页面,调用其余模块。 - user1402539
所以模块A首先加载并执行,然后当DOM准备就绪时,我得到模块B和模块B文件的requireJS调用并执行它们。我认为这比用户必须等待所有模块A,B和C加载要好。我认为这样做的另一个原因是 - 我想如果以后其他开发人员添加更多模块,则init页面加载应该仅取决于该页面所需的模块。这是我计划的代码片段。 - user1402539
var initModules = ['ModuleA'],deferedModules = ['Module C','ModuleD']; require(initLoad,function(){console.log(“Initial components loaded。”); CORE.create_module(arguments [0]); //这里我为该模块组件创建一个模块.CORE.start_all(); //启动上面两个模块setTimeout(loadRestComponents,2000);}); - user1402539
loadRestComponents = function(){console.log(“现在我加载并初始化组件的其余部分”); require(deferedModules,function(){console.log(“Loaded rest of components”); CORE.create_module(arguments [0]); //这里我为该模块组件创建一个模块.CORE.create_module(arguments [1] ); //为其他模块组件创建模块CORE.start_all(); //启动上述两个模块}); } - user1402539
@ user1402539 - 延迟加载模块是一个很好的方法 - 我会使用这种模式: require([initModule, deferredModules], function(CORE, deferredModules) { CORE.create_module(); for (var i=0, l=deferredModules.length; i<l; i++) { CORE.create_module(deferredModules[i]); } }); - Sean Vieira


尝试这样的事情:

define(function () {
var ClassLoader = function () {
    var _construct = function () {
            return _public;
        },
        _loadClass = function (className, callback) {
            //
            require([className],
                function (LoadedClass) {
                    callback(LoadedClass);
                });
        },

        _public = {
            loadClass: _loadClass
        };
    return _construct();
}
return ClassLoader;

});


0
2017-11-28 11:02



请添加更多详细信息。 - Syeda Zunairah