4

ユーザーがレポートを作成できるシングルページアプリケーションを作成しました。ユーザーには、データソース、グラフの種類、テーマを選択できるフォームが表示され、確認すると、ページに必要なファイルが読み込まれ、グラフが描画されます。

パフォーマンスを向上させるために、コードモジュールとデータを並行してロードしたいと思います。たとえば、ユーザーが「円グラフ」、「青のテーマ」、「航空会社の統計」を選択した場合：

（jsモジュールの円グラフが読み込まれる）および（青いテーマのcssが読み込まれる）および（Airline Stats jsonが読み込まれる）

THEN（チャートを描く）

AMDを実装するライブラリと、Promiseを実装するライブラリをいくつか見つけましたが、上記の例のようにモジュールの読み込みとPromiseを組み合わせることができるライブラリはありません。これは可能ですか？すでにこれを実装しているライブラリはありますか？

私のニーズはクライアントサイドのJavaScriptです。

4

2 に答える 2

1

jQueryは実際にpromiseを介してこれを行うことができます。コードを変更するだけです。

あなたがコードを所有し、すべてが同じドメインに住んでいると仮定するか、クロスドメインの場合、サーバーはCORSを許可し、それぞれに。をロードし.ajax()ます。次に.when()、すべてのPromiseがロードされたことを検出し、.then()すべてのPromiseの解決を実行するためのコールバックを追加するために使用します。

//you can provide a detailed setting for each using .ajax()'s second parameter
//however, jQuery can "smart detect" the content's dataType

var chart = $.ajax(urlOfChart), //script
    theme = $.ajax(urlOfTheme), //css
    data  = $.ajax(urlOfData);  //JSON

//we use .when() to check when all three resolves
//the arguments will be the jqXHR objects for the requests
//in the order they were given in the argument list
$.when(chart,theme,data).then(function(chart,theme,data){

    //according to jQuery.ajax(), if a script is requested, it is evaluated
    //and we still get it's plain text content
    //so with respect to the script, we do no processing

    //with the css, we get it as plain text since no dataType value handles it
    //we embed it into the DOM by creating a style element 
    //and append the text in it for the styles to take effect on the page
    $('<style type="text/css" />').html(theme).appendTo('head');

    //as for the JSON, jQuery converts it into an object 
    //and is passed as an argument as the return data for that promise

    //...everything is now requested, retrieved and prepared...
    //everything else goes under here

});
于 2012-11-05T02:50:06.520 に答える
1

CommonJSモジュールは、要件が定義された後にのみ各ファクトリが呼び出されるため、それ自体が約束されています。

したがって、データをモジュールとして定義し、コードを「js」、「css」、「data」を必要とするモジュールとして定義すると、これは実際には箱から出してすぐに機能します。

または、CommonJS / AMDの上に抽象化としてpromiseを使用し、CSSをロードし（たとえばLABJS？を介して）、データをロードします（xhr / jsonpを介して）。

于 2012-11-06T07:53:00.060 に答える