Javascript requireJS模块加载

我需要一些关于仅在需要使用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。如何仅在需要时加载它？

只要应用程序的其他元素将其指定为依赖项，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（）调用它们。这将确保只使用您需要的文件。希望这有帮助

当您使用标准的define（）语法从module1请求module2时，module1将在module2完全加载之前不会加载/运行。看起来是这样的：

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

// 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
});

惰性加载模块2的替代方案如下所示：

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

// 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()
            })
        });
    }
})

---

它正在加载所有页面，因为。。。目前所有页面都需要它

main.js

需要

path/somemodule

，而

somemodule.js

需要

path/someothermodule

。因此，任何时候你包括

main.js

，它也将包括

somemodule.js

和

someothermodule.js

。你只需要在需要模块的时候启动它，所以它不需要出现在所有页面上，除非你加载到那里。你能给我解释一下吗。如果我只想在存在特定元素时使用somemodule.init（）加载somemodule.js。这将帮助我更好地理解，我现在就得到它。你帮了我很多