Require.jsはjsモジュール化管理教程を実現します.

何がRequire.jsですか
Require.jsはAMD規格の軽量級jsモジュール化管理フレームワークであり、最新バージョンのrequire.js 2.11圧縮後は14.88 Kだけであり、jsコードをモジュールごとに分割して、非同期またはダイナミックローディングを実現し、モジュール間の依存性を明確に示して、コード品質、性能とメンテナンス性を向上させます.Require.jsの作者はAMD仕様の創始者であるJames Burkeです.
Require.jsはどんなメリットを持ってきますか?
簡単な例を挙げて説明します.
通常私達のページ構造は以下の通りです.

   
   
   
   
   
   
   
   
   


require

a.jsのコード

alert("require");

ページでalertをポップアップする にクリックして してからdivの を することができます.ページのjsは レンダリングであるため、jsのレンダリングは ず のhtmlレンダリングをブロックします.また、 のjsファイルを するのも しいですが、require.jsを ってjsのモジュール ロードを できます.
どうやってRequire.jsを いますか?
にrequire.js サイトに バージョンをダウンロードして、 のページに します.

data-main は できません.data-mainが すファイルはメインコードのファイルです.main.jsに されているスクリプトはすべて でロードされます.main.jsのディレクトリはデフォルトでルートです.
require.js config
config は、 パラメータを するために されます.まずパラメータを します. の を てください. のプロジェクトのファイル は の りです.
メインファイル

require.config({
    baseUrl: "js",
    paths: {
        "jquery": ["lib/jquery-1.8.3.min"],
        "popup": ["lib/popup"],
        "moduleA": ["app/moduleA"],
        "moduleB": ["appmoduleB"]
    },
    shim: {
        'popup': {
            deps: ['jquery']
        }
    }
});

config は、オブジェクトパラメータを し、 に の を する.baseUrl:ルートを し、この が されていない は、デフォルトのメインファイルのディレクトリを します.ここでJSディレクトリはルートパスです.paths:モジュールの とパスを し、モジュールを び した に を する があります.リソースファイルパスはローカルパスであっても いし、 のリンクであってもいいし、 のパスを してもいいし、パスは パスであってもいいし、1つの であってもいいし、2つ のパスがある は である があります.JQパスを にとると、 パス"jquery": ["lib/jquery-1.8.3.min"]の のパス"jquery": ["http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js","lib/jquery-1.8.3.min"]は、 のパスの は のパスのリソースファイルを し、 のパスのロードに した は、2 のパス( ： CDN IE11 IE ， ) shimをロードします. AMD のモジュールは できません.この は AMD のモジュールを するために され、 は1つのオブジェクトです. が いた プラグインはAMD ではないので が です.モジュール と モジュール は、このモジュールのpathsで される である があります.depsはこのモジュールの を するために され、popupプラグインはJQに します.
define
だけからこの を してモジュールに めます. にdefine を します. めないなら らないでください. で を げます.require.jsのソースコードの には、このような コードdefine = function (name, deps, callback) {}があります.defineが つのパラメータnameを することが かります.モジュールの 、 のタイプです. にはモジュールに けられた です.カスタムできますが、 のモジュールの と じではなく、パラメータが されていない は、このモジュールの は、このファイルのpathsで された deps: のモジュールの 、 のタイプであり、 されたモジュール であり、このパラメータに していない は、calbackに しないことができます. またはオブジェクトである は、 するモジュールがロードされた 、このコールバック は び しられます. はパラメータの で に されます.パラメータは モジュールに しています.
モジュールをdefineで する は、 の2つに されます.
1.モジュールに しないということは、モジュールは のモジュールに する がないということです.
1

 define({
        fnMethod: function() {
            return ("         ")
        }
    });

このモジュールは のタイプのcalbackだけを えても じです.
2

 define(function() {
        return {
            fnMethod: function () {
                return ("         ")
            }
        }
    });

このモジュールは タイプのcalbackを えています.モジュールは fnMethodを して、 を します. の り は のタイプでもいいです. の は を に すだけで、 の で モジュールを することを めています.
2.モジュールの に していますが、モジュールのフォーマットに しています.フォーマットは の りです.
3

//  moduleA         name,  “  ”,
  

 define(["jquery","moduleA"],function($, mA) {    //             
        return {
            fnMethod: function () {    
                return ($.text(".text") + mA.name);
            }
        }
    });

この は のモジュールがjqueryとmoduleAに しており、 として「 」を すことを している. の を いてもう つの な を げます.
4

define("module",["jquery","moduleA"],function($, mA) {    //             
        return {
            fnMethod: function () {    //fnMethod           
                return ($(".text").text() + mA.name);
            }
        }
 });

ここではmoduleというモジュールを し、jqueryとmoduleAモジュールに する.
するモジュールが いときは、 のように くのがいいですか?
5

define("module", ["jquery", "moduleA", "moduleB", "moduleC", "moduleD", "moduleE", "moduleF"], function ($, mA, mB, mC, mD, mE, mF) {
        return {
            fnMethod: function () {
                return ($(".text").text() + mA.name);
            }
        }
    });

require.js 2.0バージョンの 、より い き を しました.
6

   define("module", function (require) {    // “require”             
    var $ = require("jquery"),
        mA = require("moduleA"),
        mB = require("moduleB"),
        mC = require("moduleC"),
        mD = require("moduleD"),
        mE = require("moduleE"),
        mF = require("moduleF");
    
    return {
        fnMethod: function () {
            return ($(".text").text() + mA.name);
        }
    }
});

の に してください.1.defineの でrequireを するには、「require」 をモジュールに して する があります. 6のように、 5に がある は、 に してもいいです. がない は、requireを に えるべきではなく、 6のようにしてください.2.require.jsは つのファイルに つのモジュールを しています.つまり つのファイルは つのdefine のモジュールしかないという です. つのファイルに のdefineモジュールがあれば、 のファイルしか できません.defineにnameパラメータを すると、nameの はpathsのファイルの と していなければなりません.
require(deps,calback,errback)
requireはモジュールを び すために されています. い はdefineに ています.require.jsのソースコードの にはこのような がreturn context.require(deps, callback, errback)あります.require()も3つのパラメータがあることが かります.

  require(["moduleA", "moduleB"], function (mA, mB) {
        console.log(mA.name);
        console.log(mB.age);
    },
    function (error) {
        //....
    }
);

moduleAとmoduleBの つのモジュールのロードが すると、コールバック が されます. のパラメータは として です. つ のパラメータは、ロード のコールバック に します. のパラメータは、エラーを するコールバック であり、errorオブジェクトパラメータを し、requireオブジェクトは、グローバルErrorイベントのリスニング を することもできます. の で されていないすべてのエラーは、この をトリガします.

requirejs.onError = function (error) {
    // ......
};

requireはdefineの でも できます.

define("moduleA",function (require) {
    //.......
    require(["moduleB, moduleC"], function(mB, mC) {
        //.......
    });
    //.....
});

requireはJSONPモードを び すことができます.calbackパラメータの を「define」に するだけで、

require(["http://example.com/api/data.json?callback=define"],
    function (data) {
         console.log(data);
    }
);

はJSONPを び す であり、JSONPのcalbackパラメータは「calback」であるため、JSON を つの「define()」に んだAPIに して、JSONPのこのような い はアプリケーションの に され、JSONPサービスがタイムアウトしたら、 のdefine(モジュール)によっても されないようになる. り タイプJSON ojectのJSONPサービスのみに しており、 の りタイプは 、 、 などに できません.
require.jsプラグイン
require.jsはプラグインのロードをサポートしています. のJSファイルをロードするためにプラグインをダウンロードしてアプリケーションのbaseUrlディレクトリに くことができます.( の に きたいなら、paths configを って します.).より なプラグインは を ることができます. はdomReadyプラグイン、textプラグインです.domReadyプラグインは、DOM のロードが した に、コールバック を させることができる.

require(['domReady'], function (domReady) {
  domReady(function () {
    //This function is called once the DOM is ready.
    //It will be safe to query the DOM and manipulate
    //DOM nodes in this function.
  });
});

　

require(['domready!'], function (doc){
　　　　//This function is called once the DOM is ready.
       //It will be safe to query the DOM and manipulate
       //DOM nodes in this function.
});

text.jsプラグインは、scriptを ってDOM を するよりも、HTMLタグを って する が いです.しかし、jsファイルにHTMLを め むという い はありません. いい はHTML を うことですが、これは しにくいです. に のHTMLの .text.jsはこの を することができて、もし してtextを したら!プレフィックスは にロードされます.

require(["text!/view/index.html" ,"text!/css/tab.css"],
    function(html, css) {
        //........
    }
);

の でロードしたファイルの は で に します.