从requirejs中的模块动态加载模块

Question

我正在使用requirejs，并有一个app.js可以引入framework.js并对其进行初始化，并使用自己的设置传入设置和模块。 问题是$('[data-navigation]').navigation(); 是在navigation模块（它是一个jQuery插件）准备好之前触发的。 如果我增加500ms左右的延迟，它将起作用。

require(['jquery-private', 'framework', 'navigation'],
function($, framework, navigation) {

    //==========
    // Initialize the framework core.
    //==========
    var core = framework.init({
        // Core settings.
        namespace: '',

        // Initialize modules.
        modules: {
            navigation: {
                openClass: 'open',
            },
        },
    });

    //==========
    // App logic.
    //==========
    $('[data-navigation]').navigation();
});

这是初始化模块的方式。 我认为问题是在脚本继续运行的同时运行了require([moduleName], function(module) {} 。

define(['jquery', 'matchmedia'], function($) {

    //==========
    // Core initialization object.
    //==========
    var init = function(customOptions) {


        //==========
        // Logic
        //==========


        //==========
        // Load a module with it's custom options.
        //==========
        function initModule(module, customOptions, coreObject) {
            // Get the previously defined module or the path to load it.
            var moduleName = (require.defined(module)) ? module : config.modulesDir + '/' + module;

            // Initialize the module.
            require([moduleName], function(module) {
                var returnObject = module.init(customOptions, coreObject);

                // Add to the loaded modules if not already present.
                if (settings.modules.indexOf(moduleName) < 0) {
                    settings.modules.push(moduleName);
                    settings.m[moduleName] = returnObject;
                }
            });

            return settings.m[moduleName];
        }


        //==========
        // Logic
        //==========


        //==========
        // Build the core object.
        //==========
        var core = {
            // Properties.
            // Methods.
        }


        //==========
        // Load the defined modules.
        //==========
        $.each(config.modules, function(index, value) {
            initModule(index, value, core);
        });


        //==========
        // Return the core object.
        //==========
        return core;
    }


    //==========
    // Return the initialization object.
    //==========
    return {
        init: init
    }
});

我已经有一段时间了。 我很确定有解决方案，但似乎无法解决。 任何指导表示赞赏。

如果有帮助，下面是导航模块代码的一部分。

define(['jquery'], function($) {

    //==========
    // Module initialization object.
    //==========
    var init = function(customOptions, core) {
        // Ensure customOptions is an object.
        var customOptions = typeof customOptions !== 'undefined' ? customOptions : {};
        // Get the custom selector or the modules default.
        var selector = typeof customOptions.selector !== 'undefined' ? customOptions.selector : '[' + core.space('data-navigation') + ']';


        //==========
        // Build the jQuery plugin.
        //==========
        $.fn.navigation = function(options) {

            //==========
            // Plugin code.
            //==========

        }


        //==========
        // Initialize the plugin.
        //
        // RUNNING THE PLUGIN FROM HERE DOES WORK, BUT I NEED IT TO WORK FROM THE APP.JS TOO!
        //
        //==========
        $(function() {
            if ($(selector).length > 0) {
                $(selector).navigation(customOptions);
            }
        });


        //==========
        // Return object for core.m.[module]
        //==========
        return {};
    }


    //==========
    // Return the module initialization object.
    //==========
    return {
        init: init
    }
});

Answer 1

在上面的特定示例中，解决方案是使用module = require('moduleName'); 而不是require([moduleName], function(module) {} 。这是新的initModule函数；

function initModule(moduleName, customOptions) {
    // Do not initiate modules that aren't already loaded.
    if (!require.defined(moduleName)) {
        console.log('Module "' + moduleName + '" is not loaded. Add the module to the app dependency list or use require([moduleName], function(module) { /* Use module here. */ });');
        return false;
    }

    // Require the module.
    module = require(moduleName);

    // Ensure a path is no longer in the name.
    moduleName = moduleName.substr(moduleName.lastIndexOf('/') + 1);

    // Add the modules return to the core object.
    settings.m[moduleName] = module.init(customOptions, core);

    // Add to the loaded modules if not already present.
    if (settings.modules.indexOf(moduleName) < 0) {
        settings.modules.push(moduleName);
    }

    // Return the modules return.
    return settings.m[moduleName];
}

唯一的问题是，仅当我的app.js在require()语句中插入模块时，此方法才有效。 如果未将模块编译到主脚本文件中，而是动态加载该模块，它将仍然遇到相同的错误。 我的解决方案是只向控制台发送一条消息， require([moduleName], function(module) { /* Use module here. */ });使用require([moduleName], function(module) { /* Use module here. */ }); 如果模块未编译到主脚本中。 我仍在寻找更好的解决方案，但开始似乎是在动态加载模块中继承了它。