MS製Ajaxライブラリが2つ同時リリース! 強化点と性能を早速チェック

Hello, Microsoft Ajax Library!
- クライアントスクリプトローダで必要なファイルだけをロード

Microsoft Ajaxクライアントのライブラリは、複数のJavaScriptファイルに分割された。これにより、実装する処理に必要なJavaScriptファイルだけを個別にダウンロードして使用できるようになった。今回の更新であたらしく用意されたクライアントスクリプトローダを利用すれば、分割されたJavaScriptファイルを手動で順番通りにロードするように記述することなく、簡単な記述で処理に必要なファイルだけをただしい順番でロードできるようになる。

Webブラウザで成果物にふくまれているサンプル、/Preview6Samples/WebSite/0_LoadingFrameworkScripts/3_UsingScriptLoader.htmにアクセスする。

3_UsingScriptLoader.htm内の「スクリプト部分」を抜き出す。

3_UsingScriptLoader.htm スクリプト部分

    <script src="../Scripts/MicrosoftAjax/start.debug.js" type="text/javascript"></script>
    <script src="../Scripts/ACT/ACTRegisterExtended.js" type="text/javascript"></script>

    <script type="text/javascript">
        // Set Sys.loader.debug to true if you want the loader to load debug versions
        // Sys.loader.debug = true;

        // Data
        var gallery = [
            { Name: "Morro Rock"          },
            { Name: "Seagull reflections" },
            { Name: "Pier"                },
            { Name: "Giraffe Zoom"        },
            { Name: "Oryx"                }
        ]

        // Specify what scripts or components are required (using Sys.components or Sys.scripts).
        Sys.require([Sys.components.dataView, Sys.components.watermark]);

        // The onReady callback will be called when the DOMReady event has fired,
        // and when any dynamically loaded scripts have loaded - as a result of
        // Sys.require(...).
        Sys.onReady(function() {

            // Create the DataView control and attach to imagesListView ul element
            Sys.create.dataView("#imagesListView",
                {data:gallery}
            );

            // Create the Watermark and attach to the images galleryTitle input element
            Sys.create.watermark(".galleryTitle",
                {
                    WatermarkText: "Add title here...",
                    WatermarkCssClass: "watermarked"
                }
            );
        });

   </script>

実際に<script>タグでJavaScriptファイルをロードするように明示しているのは「start.debug.js」「ACTRegisterExtended.js」の2ファイルのみだ。この<script>タグでロードするファイルを指定している以外に、Sys.require()で「Sys.components.dataView()」「Sys.components.watermark()」の動作に必要なコンポーネントファイルをロードするように記述している。実際にWebインスペクタを使って、どのファイルをインクルードしているかを確認してみよう。

分割されたJavaScriptファイルを手動でロードする場合、記述が面倒なだけでなくロードする順番も考慮しなければならず、ミスが起きやすい。クライアントスクリプトローダを使えば、安全で手軽に必要なJavaScriptファイルだけをロードできるようになる。独自ライブラリも登録でき、活用方法はさまざまだ。

このほかMicrosoft Ajax Libraryの使い方についてはScott Guthrie氏のブログ記事や成果物にふくまれているサンプルファイル・マニュアル(CHM形式)を参照されたい。