requireJS模块加载

Question

我需要一些帮助，只加载模块的概念，需要使用requireJS

这是我main.js

require(['jquery', 'path/somemodule'], 
function($, somemodule) { 
$(document).ready(function() { 
    somemodule.init() 
}) 

}) 

，并在somemodule.js当他们

define(['jquery', 'path/someothermodule'], function ($, someothermodule) { 
"use strict"; 
var somemodule; 

somemodule = { 
init: function() { 
    someothermodule.init() 
} 
} 
return somemodule; 
)} 

现在somemodule.js和someothermodule.js加载到所有页面上。如何在需要时加载它？

Answer 1

当您需要使用标准define（）语法的module1的module2时，module1将不会加载/运行，直到module2完全加载完毕。这看起来是这样的：

// inside module1 
define(['module2'], function(mod2) { 
    // we don't get here until AFTER module2 has already been loaded 
}); 

懒加载模块2另一种看起来像这样：

// inside module1 
define([], function() { 
    require(['module2'], function(mod2) { 
     // we don't get here until AFTER module2 has already been loaded 
    }); 
    // but we DO get here without having loaded module2 
}); 

现在你要小心有些程序，以确保你不会遇到与异步的任何问题。

在你的情况，你可以修改你的main.js文件

require(['jquery'], 
function($) { 
    // jquery is loaded, but somemodule has not 

    if(thisPageNeedsSomeModule) { 
     require(['path/somemodule'], 
     function(somemodule) { 
      // now somemodule has loaded 
      $(document).ready(function() { 
       somemodule.init() 
      }) 
     }); 
    } 
}) 

Answer 2

您的main.js文件将加载提供给它的任何文件路径，只要应用程序的其他元素将它们指定为依赖项。见我的例子main.js文件：

require.config({ 

    paths: { 
     'app': 'app', 
     'underscore':'bower_components/underscore/underscore-min', 
     'backbone':'bower_components/backbone/backbone-min', 
     'marionette':'bower_components/backbone.marionette/lib/backbone.marionette.min', 
     'jquery': 'bower_components/jquery/jquery.min', 
     'tpl':'bower_components/requirejs-tpl/tpl', 
     'bootstrap':'bower_components/bootstrap/dist/js/bootstrap.min', 
     'leaflet':'bower_components/leaflet/leaflet', 
     'leaflet.markercluster':'bower_components/leaflet/leaflet.markercluster', 
    }, 
    shim: { 
     'underscore': { 
      exports: '_' 
     }, 
     'leaflet': { 
      exports: 'L' 
     }, 
     'leaflet.markercluster': { 
      deps: ['leaflet'] 
     }, 
     'backbone': { 
      deps: ['underscore'] 
     }, 
     'marionette': { 
      deps: ['backbone'] 
     }, 
     'jquery': { 
      exports: '$' 
     }, 
     'bootstrap': { 
      deps: ['jquery'] 
     }, 
     'app': { 
      deps: ['jquery', 'leaflet','bootstrap', 'leaflet.markercluster', 'marionette', 'tpl'] 
     }, 
     'app.elem': { 
      deps:['app'] 
     }, 
     'app.api': { 
      deps:['app'] 
     } 
    } 
}) 

require(['app','app.api','app.elem'], function() { 
    App.start(); 
}) 

，就连最初的应用程序文件：

define(['router', 'collections/moments'], function(router, momentCollection) { 

    // Boot the app! 

    App = new Marionette.Application(); 

    App.LocResolve = false; // Have we resolved the user's location? 
    App.Locating = true; // Are we actively tracking the user's location? 

    App.FileReader = window.FileReader ? new FileReader : null; 

    App.Position = null; // Instant access to Lat & Lng of user. 

    App.MomentsRaw = null; // Keep cached copy of returned data for comparison. 

    App.Moments = new momentCollection; // Current collection of moments. 
    App.Markers = new L.MarkerClusterGroup(); // Create Marker Cluster Group 

    App.View = null; // Current view. 

    // Marionette Regions 

    App.addRegions({ 
     header: '#header', 
     map: '#map', 
     list: '#list', 
     modal: '#modal', 
    }); 

    return App 
}) 

我注意到，你是不是在传递一个配置对象 - 这是故意的吗？如果您使用生成优化器R.js，它会自动为您删除未使用的供应商文件。

简而言之，在require.js配置文件中设置供应商文件的路径，然后在需要特定资产时通过define（）调用它们。这将确保只使用您需要的文件。希望这可以帮助！