1

RequireJSの例では、次のようにスクリプトタグからapp.js（またはスターターファイルを呼び出したいもの）を参照できることを示しています。

<script data-main="js/app.js" src="js/require.js"></script>

私のコントロールが及ばない理由で、私はこれを行うことができません。テンプレートレイヤーで生成された、保存する必要のある動的変数がいくつかあります。そこで、他のモジュールが読み取れるインラインの「config」モジュールを作成しました。

<script type="text/javascript">
        define('config', function() { 
            return {
                markup_id: {
                    "content": "search",
                    "page": "index",
                    "media": "mobile"
                },
                page_context: {
                    "siteconfig": {
                        "mobile_video_player_id": /* */,
                        "mobile_video_player_key": /* */,
                        "mobile_ad_site": /* */,
                        "omniture_mobile_env": /* */,
                        "searchserver": /* */,              
                    },
                    "omniture": {
                        "gn": /* */,

                    }
                }
            }
        });
    </script>

テンプレートごとに、インラインのrequire.configを配置しました。例として（特定のパス情報が削除されました）：

<script type="text/javascript">
/* This code is on a template page inside a script tag. */
require.config({
            baseUrl: /* */,
            paths: {
                'jquery': /* */,
                'jquery-mobilead': /* */,
                'jquery-photogalleryswipe': /* */
            },
            /* Enforce ordering of jQuery plugins - which require jquery */
            shim: {
                'jquery-mobilead': {
                    deps: ['jquery'],
                    exports: 'jQuery.fn.mobileAd'
                },
                'jquery-photogalleryswipe': {
                    deps: ['jquery'],
                    exports: 'jQuery.fn.photoGallerySwipe'
                },
                'gallery': {
                    deps: ['jquery-photogalleryswipe', 'jquery-mobilead']
                }
            },
            urlArgs: 'buildlife=@buildlife@'
        });

        require( ['jquery', 'site', 'gallery', 'jquery-photogalleryswipe', 'jquery-mobilead'], function($, site, gallery) {
                //This function will be called when all the dependencies
                //listed above are loaded. Note that this function could
                //be called before the page is loaded.
                //This callback is optional.

                /* Initialize code */
                $(document).ready(function() {
                    /* sitewide code - call the constructor to initialize */
                    site.init();
                    /* homepage contains a reference to a function - execute the function */
                    gallery.initGallery();
                });
            }
        );
</script>

オプティマイザーには、テンプレート内のコードを最適化する方法がないと思います。

ただし、RequireJSAPIドキュメントに準拠したモジュールJSファイルはあります。
/modules/gallery.js /modules/channel.js /modules/site.js/*など*/

これらのモジュールには他のモジュールへの依存関係がありますが、これらのモジュールは、テンプレートとインラインで定義されている「config」モジュールに依存しています。これらのファイルに対してオプティマイザーを実行した場合、モジュールの1つであるconfigがテンプレートであるため、オプティマイザーは正しく機能しますか？

4

1 に答える 1

0

AMD（require.js）を使用しながらBackbone.jsでブートストラップされたモデルをロードする方法を読んで自分の問題を解決したと思います

テンプレート変数をrequireグローバルオブジェクトに再構築し、require.jsの前に宣言しました。これで、テンプレートは引き続きこれらの値を生成できますが、require.configおよびrequireコードを外部JSファイルに配置できるため、オプティマイザーはこれらのファイルを認識できるようになります。オプティマイザーの実行はまだ試していません。

<script>
        /* This script block is in the template */
        var require = {
            config: {
                markup_id: {
                "content": "search",
                "page": "index",
                "media": "mobile"
                },
                page_context: {
                   "siteconfig": {
                    "mobile_video_player_id": /* */,
                    "mobile_video_player_key": /* */,
                    "mobile_ad_site": /* */,
                    "omniture_mobile_env": /* */,
                    "searchserver": /* */,              
                  },
                "omniture": {
                    "gn": /* */,

                }
            }
        };
    </script>
 <script data-main="/m/j/main-search" src="/m/j/require.js"></script>
于 2013-02-07T17:02:12.530 に答える