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

Question

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

1. 加载 jQuery 和 Google Maps API（我得到了这个）
2. 加载 JavaScript 以使用基本应用程序功能在页面上初始化我的地图
3. 加载其他/特定于客户端的 JavaScript。

使用这个我可以让 1 和 2 正常工作：

ma​​in.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 ) {

    }
);

requiremap.js：

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

Answer 1

让这个工作。只需将 Google Maps API、基本功能和附加功能的加载分解到不同的模块中，并在 main.js 中声明。

ma​​in.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 ) {

    }
);

requiremap.js

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

basemapfunctionality.js

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

additionalfunctionality.js

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

Answer 2

我不太喜欢 RequireJS，但 this issue 和评论暗示了一种解决您问题的方法。

链接中的相关引用：

这是由于$.extend的交互和模块的执行顺序造成的。

在构建的文件中，“其他/配置”模块在内部调用之前被评估 require(['other/controller']，因为$.extend 只混合属性，所以会导致问题。 您可以通过使用 Object.create() 类型的方法来避免它，您可以在其中创建一个新对象，其 原型是BaseConfig，这样以后，您添加到BaseConfig 的任何属性都会显示出来 自动在那个新对象上。

Answer 3

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

Answer 4

您尝试过使用 Order.js 插件吗？