web-dev-qa-db-ja.com

RequireJSは複数のページと部分ビューでどのように機能しますか？

私はRequireJSを探していますが、いくつかのことについては不確かです。

main.jsを使用してすべての依存関係を読み込む方法を理解しています。しかし、main.jsの依存関係を処理するためのロジックを追加する必要がありますか？

私にとって、main.jsはdocument.ready状態のようで、ドキュメントがロードされたときにそこにロジックを入力しますよね？

また、他のページと部分ビューについて、複数のmain.jsを作成する必要がありますか、たとえば<script>のビューから依存関係のロードされた関数を参照するだけですか？

asp.net-mvcrequirejs
41
Johan Alkstål

Update-RequireJSをモジュラーHTMLコンポーネントで使用する例を追加しました。ビルドツールのサンプルが含まれています- https://github.com/simonsmith/modular-html-requirejs

これについてのブログ記事も書いています- http://simonsmith.io/modular-html-components-with-requirejs/

すべてにmain.jsを使用するアプローチは、 おそらく単一ページのアプリケーションにより適しています です。

この状況を処理した方法は、main.jsファイルにサイト全体の一般的なJSのみを含めることです。

すべてのページで：

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

main.js

require.config({
// config options
});

require(['jquery', 'common/ajaxLoader', 'common/someOtherModule'], function($, ajax, otherModule) {
    // Modules that do stuff on every page are instantiated here 
});

page1.html

<script>
    require(['scripts/page1']);
</script>

page1.js

require(['jquery', 'page1Module'], function($, module){
    // page1 specific stuff here
});

上記の例は、それを処理するいくつかの方法のうちの1つにすぎません。注 プレーンなJavaScriptファイルとモジュールの読み込みの違い 。

私が従う経験則は、すべての再利用可能なモジュール（または概念化を容易にする場合はクラス）をdefine内に独自の依存関係などで保持し、requireを使用してそれらのモジュールを取得することです。それらのメソッドを使用するか、何らかの方法でそれらと対話します。

このパターンを使用するには、ほぼ確実にdomReadyモジュールを使用する必要があります RequireJSの別のプラグインです 。これは jQueryの準備完了関数の代わりに を使用します。これにより、DOMの準備が整う前にモジュールのダウンロードを開始でき、コードの実行待機時間が短縮されます。

Edit必要に応じて マルチページアプリケーションの別の例を参照 RequireJSリポジトリで

93
Simon Smith

最近、ASP.NET MVCアプリケーションで自動ビルド最適化を使用してRequrieJSをセットアップする演習を行いました。 Simonのような参考になる多くの役立つブログ記事があります。 ASP.NETの観点から見ると、マルチページASP.NETアプリケーション用にRequireJSオプティマイザーを構成する上で見つけた最も便利なものの1つは、 RequireJSをASP.NET MVCでナイスにする です。

すでにそこにある素晴らしい情報を使用して、私は自分で GitHubのASP.NET MVC RequireJSの例 を作成しました。含まれているものの多くは、すでに存在する例に似ていますが、部分ビューの問題に対処するため、複数ページの依存関係が必要なため、少し異なるアプローチを取りました。

_ Layout.cshtml

既存の例との最も顕著な違いは、カスタム RequireViewPage を作成することです。これは、構成データをRequrieJSに渡すためのメソッドと、参照ページ固有のrequire依存関係を公開します。

したがって、_Layout.cshtmlは次のようになります。

<head>
    ...
    @RenderModuleConfig()
    <script type="text/javascript" src="@Url.Script("vendor/require.js")" data-main="main"></script>
</head>
<body>
    ...

ビューとパーシャル

ビュー（および私の場合はノックアウトビューモデル）を接続するために、次のように_Layout.cshtmlの下部に 追加のスクリプトフラグメント が追加されました

    ...
    @RenderSection("scripts", required: false)
    <script type="text/javascript">require(['main'], function () { require(['lib/knockout/knockout.require']); });</script>
</body>

これにより、ビューの依存関係について、メインモジュールがロードされていることが保証されます（mainの依存関係がmain.jsその後、データ属性を介してビュー固有の依存関係を関連付けることができます。

<div data-require="@MainModule"> ... </div>
<div data-require="@Module("address")"> ... </div>
<div data-require="view\home\index\model"> ... </div>

設計と選択の完全な説明については、 GitHubのREADME を参照してください。

3
Chris Baxter