javascript - Require.jsを使用して依存関係の順にJavaScriptをロードする

Question

このリンクとこのリンクをガイドとして使用して、Require.jsに飛び込んでGoogleマップアプリケーションを構築しています。私の目標は、最初に「基本」機能をロードするモジュラーアプリケーションを構築することです。次に、コードを複製することなく、クライアント固有の機能を「プラグイン」できます。したがって、すべてのプロジェクトは「ベース」JSを使用しますが、クライアント固有のJSはプロジェクトごとに異なります。以下は私の読み込みの依存関係のリストです。これは、ロードする必要がある順序です。リスト内の前のアイテムは、次のアイテムに移動する前に完全にロードする必要があります。

1. jQueryとGoogleMapsAPIをロードします（これを機能させました）
2. JavaScriptをロードして、ベースアプリケーション機能を使用してページ上のマップを初期化します
3. 追加の/クライアント固有の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() {

        });
    }
);

しかし今、私は＃3をロードする前に＃2が完全にロードされるまで待つ必要があります。これは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

APIの非同期ロードを参照してください。APIが完全にロードされたときに呼び出されるコールバック関数を指定できるコールバックパラメーターがあります。

Answer 3

私はRequireJSにはあまり興味がありませんが、この問題と解説はあなたの質問を解決する方法を暗示しています。

リンクからの関連する引用：

これは$.extend、モジュールの相互作用と実行の順序によるものです。

ビルドされたファイルでは、'other / config'モジュールは、への内部呼び出しの前に評価さ れます。これは、プロパティが混在しているだけrequire(['other/controller']なので$.extend、問題が発生します。Object.create()プロトタイプがである新しいオブジェクトを作成するアプローチのタイプを使用することで、これを回避できます。これによりBaseConfig、後で、に追加したプロパティがBaseConfigその新しいオブジェクトに自動的に表示されます。

Answer 4

Order.jsプラグインを試してみましたか？