Question

我使用requirejs并拥有一个app.js来framework.js并初始化它并使用自己的设置传入设置和模块。问题是$('[data-navigation]').navigation();在navigation模块（即jQuery插件）准备就绪之前触发。如果我添加大约500毫秒的延迟，它就可以工作。

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. */ });。我仍然在寻求一个更好的解决方案，但它开始似乎是动态加载模块的继承。

动态加载来自requirejs

1 个答案: