34

require.jsを使用して、プロジェクトを「古い」ブラウザ スタイルのモジュール構造から「新しい」ブラウザまたはサーバー側のJavaScriptモジュール構造に変更しています。

クライアントでは、オフサイトでホストされている jQuery を使用しているため、READMEの「use priority config」テクニックで提供されている例から始めました。

<title>My Page</title>
<script src="scripts/require.js"></script>
<script>
require({
    baseUrl: 'scripts',
    paths: {
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
        jqueryui: ...,
        ...
        ... // bunch more paths here
    },
    priority: ['jquery']
}, [ 'main' ]);
</script>

これは実際に問題なく動作しています。しかし、メインの機能を HTML Web ページ自体にエクスポートしたいと考えています。例えば：

<a class="button" href="#" onclick="MyApi.foo();">
    <img src="foo.png" alt="foo" />Click for: <b>Foo!</b>
</a>

AMD モジュール パターンに適合する前に、グローバル スペースにディクショナリ オブジェクトを作成して、さまざまなファイルから機能を公開しました。

// main.js

var MyApi = {};

jQuery(document).ready(function($) {
    // ...unexported code goes here...

    // export function via MyApi
    MyApi.foo = function() {
        alert("Foo!");
    };
});

しかし、require.js での正しいアプローチが何であるかはわかりません。タグ内にHTMLrequireステートメントを追加<script>して、Web ページ内から使用できるようにモジュールに名前を付けてもよろしいですか? または、これは常に main.js 内で動的に行う必要があり$('#foobutton').click(...)ますか?

4

4 に答える 4

32

AMD を使用する利点の 1 つは、名前空間が不要になることです。RequireJS でそれらを再度作成しようとすると、AMD が推奨するパターンに反することになります。

の使用に関してmain.jsは、単一ページのアプリがあり、すべてのコードが 1 つの場所から参照される場合にのみ、これは適切です。必要に応じて、他のモジュールをrequireおよびロードするための追加の呼び出しを自由に行うことができます。

上記の例を使用すると、次のようにアプローチできます。

foo.js

define(['jquery'], function($) {

    // Some set up 
    // code here

    // Return module with methods
    return {
        bar: function() {

        }
    }


});

page.js

require(['foo'], function(foo) {

    // jQuery loaded by foo module so free to use it
    $('.button').on('click', function(e) {
        foo.bar();
        e.preventDefault();
    });

});

次に、ページで、require を使用して page.js ファイルを要求します。

上記の例を使用すると：

require({
    // config stuff here
}, [ 'page' ]);

または、さらに下のページにロードします。

<script>
    require(['page']);
</script>

いくつかの追加ポイント

  • 上記のパターンを使用すると、page.js は、他のページ関連機能をロードするために他の多くのモジュールを簡単に要求できます。

  • メンバーをグローバル名前空間にアタッチする前に、そのコードを任意のページで再利用できる個別のモジュールに分割します。グローバル オブジェクトに依存する必要はありません。

  • この方法で require を使用してイベントを DOM 要素にアタッチするには、RequireJS が提供するDOM Ready モジュールに依存する可能性が高くなります。

于 2012-04-29T22:44:04.213 に答える
16

javascript のウィンドウ クラスに参照を設定することもできます。

アプリケーションモジュールの下部window.MyApi = MyApi;

<a class="button" href="#" onclick="MyApi.foo();"></a>

于 2012-06-11T00:16:20.207 に答える
3

マークアップの中に入れるonclick=""と汚く感じます-プレゼンテーションとコンテンツを混ぜ合わせます。<script>ブロックを追加してその中に入れrequire、コールバック内に入れ、必要に応じて別の内部に入れて$(document).ready()から、通常の方法でイベントハンドラーを接続することをお勧めします$('#node').click(...)。これを複数のページに適用できるほど一般的に実行できる場合は、縮小、結合、およびキャッシュされる外部ファイル内に配置します。ただし、通常、これらはページ固有であるため、<script>ページの下部にあるタグは、さらに別の外部リソース要求を回避するための優れたソリューションです。

于 2012-04-29T07:35:26.887 に答える