來自requirejs模塊的模塊動態加載

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. */ });。我仍然在尋求更好的解決方案，但它似乎開始似乎是在動態加載模塊中繼承的。