使用Require.js按依赖项顺序加载JavaScript

我正在深入研究Require.js，以使用和作为指南构建一个Google地图应用程序我的目标是构建一个模块化应用程序，首先加载“基本”功能，然后我可以“插入”特定于客户端的功能，而无需重复代码。因此，每个项目都将使用“基本”JS，但每个项目的特定于客户端的JS将有所不同。下面是我的加载依赖项列表。这是我需要加载的顺序，列表中的前一项在进入下一项之前需要完全加载：

加载jQuery和GoogleMapsAPI（我让这一个正常工作）

加载JavaScript以使用基本应用程序功能在页面上初始化我的地图

加载其他/特定于客户端的JavaScript

我可以使用以下方法使1和2正常工作：

main.js:

require.config({
    paths:{
        jquery: "jquery-1.7.1.min",
        jqueryui: "jquery-ui-1.8.22.custom.min",
        async: "async",
        requiremap: "requiremap"
    }
});

require(
    [ "jquery", "jqueryui", "requiremap" ],
    function( $, jqueryui, requiremap ) {

    }
);

define(
    [ "async!http://maps.google.com/maps/api/js?sensor=false" ],
    function() {
        require(['js/basemapfunctionality.js'], function() {

        });
    }
);

requiremap.js:

require.config({
    paths:{
        jquery: "jquery-1.7.1.min",
        jqueryui: "jquery-ui-1.8.22.custom.min",
        async: "async",
        requiremap: "requiremap"
    }
});

require(
    [ "jquery", "jqueryui", "requiremap" ],
    function( $, jqueryui, requiremap ) {

    }
);

define(
    [ "async!http://maps.google.com/maps/api/js?sensor=false" ],
    function() {
        require(['js/basemapfunctionality.js'], function() {

        });
    }
);

但是现在我需要等到#2完全加载后再加载#3。Require.js是否可以实现这一点，如果可以，如何实现？（如果没有，是否有其他框架可以做到这一点）我尝试添加另一个嵌套的require方法来加载附加功能（如下所示），但它的行为就像#2还没有加载一样

define(
    [ "async!http://maps.google.com/maps/api/js?sensor=false" ],
    function() {
        require(['js/basemapfunctionality.js'], function() {
            require(['js/additionalfunctionality.js'], function() {
                // now everything should be loaded, but it ain't
            });
        });
    }
);

---

我对RequireJS不太感兴趣，但是评论暗示了一种解决你问题的方法

链接中的相关引用：

这是由于

$.extend

的交互作用和模块的执行顺序造成的

在生成文件中，“other/config”模块在内部调用之前进行求值

require（['other/controller']

，因为

$.extend

只混合了属性，所以会导致问题。 您可以通过使用

Object.create（）

类型的方法来避免这种情况，在这种方法中，您可以创建一个 原型是

BaseConfig

，因此稍后，您添加到

BaseConfig

的任何属性都将显示出来 在新对象上自动执行

---

请参阅。有一个回调参数，您可以在其中指示API完全加载时将调用的回调函数。

实现了这一点。只需将Google Maps API、基本功能和附加功能加载到不同的模块中，并在main.js中分别声明

main.js

require.config({
    paths:{
        jquery: "jquery-1.7.1.min",
        jqueryui: "jquery-ui-1.8.22.custom.min",
        async: "async",
        requiremap: "requiremap",
        basemapfunctionality: "basemapfunctionality",
        additionalfunctionality: "additionalfunctionality"
    }
});

require(
    [ "jquery", "jqueryui", "requiremap", "basemapfunctionality", "additionalfunctionality" ],
    function( $, jqueryui, requiremap, basemapfunctionality, additionalfunctionality ) {

    }
);

define([ "async!https://maps.google.com/maps/api/js?sensor=false" ], function() {});

define(['requiremap'], function(requiremap) {
    // basemap functionality here
}

define(['requiremap', 'basemapfunctionality'], function(requiremap, basemapfunctionality) {
    // additional functionality here
}

requiremap.js

require.config({
    paths:{
        jquery: "jquery-1.7.1.min",
        jqueryui: "jquery-ui-1.8.22.custom.min",
        async: "async",
        requiremap: "requiremap",
        basemapfunctionality: "basemapfunctionality",
        additionalfunctionality: "additionalfunctionality"
    }
});

require(
    [ "jquery", "jqueryui", "requiremap", "basemapfunctionality", "additionalfunctionality" ],
    function( $, jqueryui, requiremap, basemapfunctionality, additionalfunctionality ) {

    }
);

define([ "async!https://maps.google.com/maps/api/js?sensor=false" ], function() {});

define(['requiremap'], function(requiremap) {
    // basemap functionality here
}

define(['requiremap', 'basemapfunctionality'], function(requiremap, basemapfunctionality) {
    // additional functionality here
}

baseMapFunctional.js

require.config({
    paths:{
        jquery: "jquery-1.7.1.min",
        jqueryui: "jquery-ui-1.8.22.custom.min",
        async: "async",
        requiremap: "requiremap",
        basemapfunctionality: "basemapfunctionality",
        additionalfunctionality: "additionalfunctionality"
    }
});

require(
    [ "jquery", "jqueryui", "requiremap", "basemapfunctionality", "additionalfunctionality" ],
    function( $, jqueryui, requiremap, basemapfunctionality, additionalfunctionality ) {

    }
);

define([ "async!https://maps.google.com/maps/api/js?sensor=false" ], function() {});

define(['requiremap'], function(requiremap) {
    // basemap functionality here
}

define(['requiremap', 'basemapfunctionality'], function(requiremap, basemapfunctionality) {
    // additional functionality here
}

附加功能.js

require.config({
    paths:{
        jquery: "jquery-1.7.1.min",
        jqueryui: "jquery-ui-1.8.22.custom.min",
        async: "async",
        requiremap: "requiremap",
        basemapfunctionality: "basemapfunctionality",
        additionalfunctionality: "additionalfunctionality"
    }
});

require(
    [ "jquery", "jqueryui", "requiremap", "basemapfunctionality", "additionalfunctionality" ],
    function( $, jqueryui, requiremap, basemapfunctionality, additionalfunctionality ) {

    }
);

define([ "async!https://maps.google.com/maps/api/js?sensor=false" ], function() {});

define(['requiremap'], function(requiremap) {
    // basemap functionality here
}

define(['requiremap', 'basemapfunctionality'], function(requiremap, basemapfunctionality) {
    // additional functionality here
}

---

你试过Order.js插件吗？

正如我在问题中所说的，我可以加载地图API和我的“基本”在Maps API之后加载的功能没有任何问题。问题是我需要等到基本功能JS完全加载后再加载另一个JS模块。如果使用回调函数，可以在回调函数中先执行loadBase（）操作，然后执行loadClientStuff（）我不知道Require.js是做什么的，是按顺序加载还是异步加载。你应该将自己的答案标记为已接受（打勾）！很高兴听到你的答案。在这里分享你的解决方案的代码示例也不会有什么坏处。我想是的。