requireまとめ

RequireJsはAMD仕様を使用しており、モジュールを非同期でロードでき、モジュール依存、ページブロックなどの問題を解決し、スクリプトを使用する際にURLアドレスの代わりにmodule IDを使用する
ファイルのインポート

<script src="js/require.js">script>

前の文のコードをbodyの下部に置くか、属性async="true"を追加して非同期にロードすることができます.asyncはhtml 5属性で、古いブラウザではdeferを使うことができますので、次のように書くことができます.

<script src="js/require.js" defer async="true">script>

scriptにdata-main属性、requireを追加できます.jsロードが完了するとdata-mainプロパティ値ファイルがロードされ、エントリファイルに相当するので、以下のように書くことができます.

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

RequireJSのデフォルトでは、すべての依存リソースがjsスクリプトであるため、module IDに追加する必要はないと仮定する.js接尾辞
モジュールの定義
define関数によるモジュールのロードにより、依存関係が確保され、グローバル変数を作成する必要がなく、5つの方法でモジュールが定義されます.
1.単純な値ペア
モジュールに値ペアのみが含まれ、依存していない場合は、define()で値ペアを定義します.

define({
    color: "black",
    size: "unisize"
});

2.関数定義
モジュールに依存していないがsetupで作業する関数が必要な場合は、define()で関数を定義し、define()に渡します.

define(function () {
    //Do setup work here
    return {
        color: "black",
        size: "unisize"
    }
});

戻り値は、関数、配列、または基本データ型です.
3.依存関係のある関数定義
モジュールに依存がある場合:最初のパラメータは依存する名前配列です.2番目のパラメータは、モジュールのすべての依存ロードが完了すると、モジュールを定義するために呼び出される関数です.したがって、モジュールは、このモジュールを定義したobjectを返す必要があります.依存関係はパラメータとして関数に注入され、パラメータリストは依存名リストに対応します.

define(["./a", "./b"], function(a, b) {
    return {
        value: 1,
        get: function() {
            return a.foo(this.value) + b.bar(this.value);
        }
    }
});

モジュール関数は、パラメータ「a」および「b」で使用されます.a」及び「./b」名で指定されたモジュール.この2つのモジュールのロードが完了するまで、モジュール関数は呼び出されません.返されるオブジェクトは新しいモジュールとして使用され、グローバル変数として存在しません.
4.具名モジュール
最初のパラメータとしてdefine()にモジュール名を含めることができます.

define("foo", ["a", "b"], function(a, b) {
    //Define foo object in here.
});

これらは常に最適化ツールによって生成されます.モジュール名を明示的に指定することもできますが、これによりモジュールの移植性が低下します.つまり、ファイルを別のディレクトリに移動すると、名前を変更する必要があります.一般的にはモジュールのハードコーディングを避けるのではなく、最適化ツールに渡して生成することが望ましい.最適化ツールでは、複数のモジュールを1つのパッケージにし、ブラウザへの有人速度を速めるためにモジュール名を生成する必要があります.具名モジュールを定義し、requireでモジュール名をロードするには一致が必要で、他のファイルで定義された具名モジュールをロードすることができます.この場合pathでパスを構成する必要があります.具名モジュールを定義しても依存するモジュールはすぐにロードされません.requireの場合にのみ依存をロードするため、同じファイルの下でモジュールを定義してからロードすることができます.
5.モジュールをCommonJS形式で定義する
CommonJSモジュール形式で記述されたコードがいくつかあるが、これらのコードが上記の依存名配列パラメータの形式で再構築することが困難である場合は、これらの依存を直接ローカル変数に対応して使用することを考慮することができる.CommonJSの簡単なパッケージを使用して実現できます.

define(function(require, exports, module) {
    var a = require('a'),
        b = require('b');
    //Return the module value
    return function () {};
});

この方法はパラメータ名によってモジュールを識別し、順序を保証しなければならない.圧縮ツールで圧縮すると機能しない.これは、モジュールの導入に依存することができる.

define(["require", "exports", "module", "a", "b"], function(require, exports, module) {
    var a = require('a'),
        b = require('b');
    //Return the module value
    return function () {};
});

構成オプション
パス
RequireJSはbaseUrlに対するアドレスですべてのコードをロードし、デフォルトbaseUrlはrequireを導入する.jsのファイルのパスは、data-mainプロパティがある場合、baseUrlはそのプロパティのディレクトリと一致し、baseUrlはRequireJS configで手動で設定することもできます.以下に示します.

requirejs.config({
    baseUrl: 'js/lib',
});

構成関数はmainに書くのが一般的です.jsエントリファイルには、ヘッダに書くこともできますが、ヘッダに書く場合はbaseUrlで指定したディレクトリにエントリファイルを置く必要があります.そうしないとロードできません.こう書けば

<script src="js/require.js" defer async="true" data-main="main">script>
requirejs.config({
    baseUrl: 'js/lib',
});

じゃあjsはjs/libディレクトリの下に置く必要がありますので、通常は構成関数をエントリファイルに書くか、baseUrlを指定しないほうがいいです.データムディレクトリが決定されると、pathプロパティプロファイルパスを設定できます.ファイルディレクトリは次のように仮定します.

index.html

js/

lib/

jquery.js

app/

test.js

main.js

次のように構成できます.

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        app: '../app'
    }
});

これによりappによりjs/appディレクトリにナビゲートできます.「baseUrl+paths」の解析プロセスを避けるのではなく、ディレクトリにロードされたスクリプトを直接指定したい場合があります.この場合、module IDが次のいずれかのルールに合致する場合、そのID解析は通常の「baseUrl+paths」構成を避け、現在のHTMLドキュメントに対するスクリプトとして直接ロードされます.

が「.js」で終わる

"/"で

を開始

は、「http:」or「https:」

のようなURLプロトコルを含む
注意:ローカルロード時/指定されたルートディレクトリはindexです.htmlが存在するディスクは、その存在するディレクトリではなく、一般的に相対パスを使用して、後期のメンテナンスと管理を容易にすることが望ましい.に対してjs"が終了すると、経路はrequireを導入することに対してである.jsのhtmlファイルは、requirejsがファイルパスを処理しないことに相当し、オリジナル導入と同様である.「/」に対して開始する、パスをpathで構成する場合、後は.jsの末尾は、次のようになります.

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        test: '/js/app/test'
    }

reqiuirejsは自動的に補完します.jsですが、直接require()でモジュールを導入する場合は、必ず.jsの末尾には、次のようなものがあります.

require('/js/app/test.js', function(){});

異なる場所で定義されたpathは、自動的にマージされますが、同じ名前のパスの後ろに前を上書きします.
shim
依存関係を宣言し、モジュールを設定するためにdefine()を使用していない「ブラウザグローバル変数注入」型スクリプトの依存およびエクスポート構成を行います.require仕様で作成されていないライブラリおよびライブラリのプラグインは、shimで構成できます.以下のようにします.

requirejs.config({
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'foo': {
            deps: ['bar'],
            exports: 'Foo',
            init: function (bar) {
                return this.Foo.noConflict();
            }
        }
    }
});

depsは依存関係であり、exportsの値はライブラリが導入したグローバル変数であり、initはライブラリが導入した初期化関数であり、ライブラリ名の競合問題を解決する.jQueryまたはBackboneのプラグインとしてのみ存在し、モジュール変数をエクスポートしない「モジュール」の場合、shim構成は依存配列に簡単に設定できます.

requirejs.config({
    shim: {
        'jquery.colorize': ['jquery'],
        'jquery.scroll': ['jquery'],
        'backbone.layoutmanager': ['backbone']
    }
});

複数の場所で定義されたshimは自動的にマージされるため、グローバルなshimを作成し、プロジェクトによって異なるshimを構成できます.
map
与えられたモジュールプレフィックスについて、異なるモジュールIDを使用してモジュールをロードする.この手段は、いくつかの大規模なプロジェクトにとって重要です.2つのモジュールが異なるバージョンの「foo」を使用する必要がある場合、それらの間には一定の協同が必要です.コンテキストベースのマルチバージョン実装では、これは難しい.また、paths構成は、あるモジュールIDを別のモジュールIDにマッピングするためではなく、モジュールIDにroot pathsを設定するためにのみ使用される.例:

requirejs.config({
    map: {
        'some/newmodule': {
            'foo': 'foo1.2'
        },
        'some/oldmodule': {
            'foo': 'foo1.0'
        }
    }
});

モジュールIDは*を使用して、すべてのモジュールに対して本構成をロードすることを示します.
config
構成情報をモジュールに渡す必要があることが多い.これらの構成は、アプリケーション・レベルの情報であり、モジュールに下に渡す手段が必要です.RequireJSではrequirejsに基づく.config()のconfig構成項目を実装します.これらの情報を取得するモジュールは、特殊な依存「module」をロードし、moduleを呼び出すことができる.config().例:

requirejs.config({
    config: {
        'bar': {
            size: 'large'
        },
        'baz': {
            color: 'blue'
        }
    }
});

bar.js:
define(function (require, exports, module) {
    var size = module.config().size;
});

baz.js:
define(['module'], function (module) {
    var color = module.config().color;
});

require.s.contexts._.configプロパティは、requireの構成情報を保存します.
プラグイン
requireでcssなどのjs以外のファイルをロードしたい場合は、プラグイン、プラグインをロードする必要があります!接頭辞として、

define(['css!foo'], function (foo) {
    return {};
});

fooモジュールをロードする前にcssがロードされる.jsプラグイン、cssプラグインパスはpathで構成することもmapで構成することもできます.例えば:

requirejs.config({
    map: {
        *: {
            'css': 'lib/css'
        }
    }
});