41

RequireJSを調べていますが、いくつかのことがわかりません。

ですべての依存関係をロードする方法を理解していmain.jsます。しかし、これらの依存関係を処理するためにロジックを追加する必要がありmain.jsますか？

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

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

4

2 に答える 2

93

更新-モジュラーHTMLコンポーネントでRequireJSを使用する例を追加しました。ビルドツールの例が含まれています-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それらのモジュールを取得したり、メソッドを使用したり、何らかの方法で相互作用したりするために使用することです。

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

編集RequireJSリポジトリでマルチページアプリケーションの別の例を見たいと思うかもしれません

于 2012-05-30T13:10:02.873 に答える
3

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

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

_Layout.cshtml

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

したがって、_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.jsと、ビュー固有の依存関係をデータ属性を介して接続できます。

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

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

于 2014-02-19T14:25:03.333 に答える