Wijmo UI for the Web
AMD と Require.js
| Wijmo ユーザーガイド > 概念 > ウィジェットを統合するフレームワーク > AMD と Require.js |
Wijmo のウィジェットは 40 個を超えるようになり、Wijmo JS ファイルが非常に大きくなっています。そこで、特にウィジェットを数個しか使用しないプロジェクトのパフォーマンスを向上させるために、AMD（Asynchronous Module Definition）のサポートを追加しました。
AMD は、Require.js といくつかのウィジェットモジュールを使用して、プロジェクトの依存ファイルをロードする方法です。これまで推奨されていたようにすべてのウィジェットを含む Wijmo JS ファイルの参照を追加するのではなく、Wijmo テーマ、CSS、RequireJs のみを参照すれば、後の処理は AMD ローダーが自動的に行い、クライアントにダウンロードされるファイルサイズを削減できます。
Wijmo と共に Samples フォルダにインストールされるウィジェットエクスプローラは、AMD を使用するように移植されました。これを使用して、すべてのウィジェットを確認できます。新しい Using AMD サンプルでウィジェットエクスプローラを試すこともできます。このユーザーガイドのクイックスタートトピックは、AMD を使用するように徐々に移植される予定です。
ドロップダウンして、Wijmo で AMD と RequireJs を使用するために必要なすべての参照を表示します
| レファレンス |
コードのコピー |
|---|---|
<!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> | |
AMD はファイル名とモジュール名が同じであると仮定するので、異なる場合は、そのパスを変更する必要があります。それには、Wijmo の baseUrl とパスを使用して RequireJs を構成するスクリプトを追加します。 さらに、ドキュメントの ready 関数を含むスクリプト内に次のようなコードを追加して、Wijmo のどの部分が必要かをページに通知する必要があります。
require(["wijmo.wijgrid"], function () { });
以下は、ドキュメントの ready 関数で Wijmo Grid を使用するスクリプトとその他のコードです。これらのスクリプトは、HTML ファイルの <head> セクションにあるすべての参照の下に追加できます。
 |
注意：ドキュメントの ready 関数の閉じ </script> タグの直前の閉じ }); を忘れないでください。 |
ドロップダウンして、AMD と RequireJs を使用するグリッドの jQuery Script を参照します
| スクリプト |
コードのコピー |
|---|---|
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min", "bootstrap": "bootstrap.min", //Needed if you use Bootstrap. "knockout": "knockout-3.1.0" //Needed if you use Knockout. } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ allowSorting: true, allowPaging: true, pageSize: 3, data: [ [27, 'Canada', 'Adams, Craig', 'RW'], [43, 'Canada', 'Boucher, Philippe', 'D', 'R'], [24, 'Canada', 'Cooke, Matt', 'LW', 'L'], [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'], [1, 'United States', 'Curry, John', 'G', 'L'], ], columns: [ {headerText: "Number"}, {headerText: "Nationality"}, {headerText: "Player"}, {headerText: "Position"} ] }); }); }); </script> | |
以下は、AMD と RequireJs を使用したグリッドを実際のウィジェットで表示したところです。