1

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

4 に答える 4

3

これが機能するようになりました。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
}
于 2012-08-23T01:19:59.337 に答える
0

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

于 2012-08-22T16:57:07.173 に答える
0

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

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

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

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

于 2012-08-22T16:50:28.557 に答える
-1

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

于 2012-10-26T10:39:44.347 に答える