Question

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

加载jQuery和Google Maps API（我使用了这个）
加载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 ) {

    }
);

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中声明每个模块。

<强> 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 ) {

    }
);

<强> 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与模块执行顺序的相互作用。

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

Answer 3

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

Answer 4

您是否尝试使用Order.js插件？

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

4 个答案: