1

モジュールローダーの用途は何ですか？JQueryでどのように使用できますか？モジュールローダーとしてrequire.jsを使用する方法。サンプルアプリケーションも共有してください。あなたが持っている場合！！

4

1 に答える 1

9

OK私は部分的に行きます

モジュールローダーとは何ですか？

OK Jsではインポート命令を使用できません（ノードでは可能です）。非常に多くの人がコードをすべてまとめて（使用しているライブラリでさえ）貼り付けるので、何もロードする必要はありませんが、これは大きくなる可能性がありますjsファイルを使用してアプリに読み込み時間を追加すると、他の人はコードを分離してタグを使用して少しずつ読み込むと考えていますが、htmlページのすべての定義を維持する必要があるため、これは実用的ではありません。モジュールを作成してコードをデコピーし、オンデマンドでロードするのに役立ちます。これにより、コードを簡単に分離でき、機能の修正、保守、追加が簡単になります。

require.jsドキュメントから

「プロジェクトが特定のサイズに達すると、プロジェクトのスクリプトモジュールの管理が難しくなります。スクリプトを正しい順序で並べ替える必要があります。また、スクリプトを1つのバンドルにまとめることを真剣に検討する必要があります。スクリプトをロードするために1つまたはごく少数のリクエストのみが行われるようにするためのデプロイメント。」

JQueryでどのように使用できますか？

質問をJQueryでどのように使用できるかを変更しますか？

必要に応じてJqueryを依存関係としてロードします。ここに基本的な例があります

モジュールローダーとしてrequire.jsを使用するにはどうすればよいですか？

ここにコードの小さなスニペットがあります

HTMLにはそれが必要です

  <!DOCTYPE html>
  <html>
    <head>
          <title>jQuery+RequireJS Sample Page</title>
        <script data-main="scripts/main" src="scripts/require-jquery.js"></script>
      </head>
      <body>
          <h1>jQuery+RequireJS Sample Page</h1>
     </body>
    </html>

私たちのmain.js

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
});

構成の一部

paths: {
        "jquery": "require-jquery"
    },

    modules: [
        {
            name: "main",
            exclude: ["jquery"]
        }

これがお役に立てば幸いです。ここからサンプルプロジェクトをダウンロードできます

私のアプリの例を追加して、Backboneの使用方法と必要な方法を確認できるようにします

構成

require.config({
    shim: {
      'underscore': {
        deps: ['jquery'], //dependencies
        exports: '_' //the exported symbol
      },
      backbone: {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
      }
    }

    paths: {
      jquery: 'libs/jquery/jquery-1.7.1.min',
      underscore: 'libs/underscore/underscore-min',
      backbone: 'libs/backbone/backbone-min',

    }

  });

サンプルモジュール

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
    //Your code Here
  });

requireでの作業を楽しんでください:-)

于 2012-07-13T15:58:15.857 に答える