このリンクとこのリンクをガイドとして使用して、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 ) {
}
);
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
});
});
}
);