require.jsまとめ

阮一峰先生のブログ
common jとAMD
require.jsはAMD規格によって実現されたもので、AMDとcommon JS規範2009年に米国のプログラマーRyan Dahlがnode.jsプロジェクトを創造し、javascript言語をサーバー側プログラミングに使用します.このマークは「Javascriptモジュール化プログラミング」が正式に誕生しました.正直に言うと、ブラウザの環境下では、モジュールがなくても特に大きな問題ではないです.結局、ウェブページのプログラムの複雑さは限られています.しかし、サーバー側ではモジュールが必要です.オペレーティングシステムと他のアプリケーションとの対話が必要です.node.jsのモジュールシステムは、Common JS仕様を参照して実現されます.Common JSには、モジュールをロードするための大域的な方法があります.数学モジュールがあると仮定して、下記のようにロードできます.

　　var math = require('math');

その後、モジュールが提供する方法を呼び出すことができます.

var math = require('math');
　　math.add(2,3); // 5

このシリーズは主にブラウザに対してプログラミングしていますので、node.jsには関わりません.私たちはここで知っている限り、モジュールをロードするためにrequireを使えばいいです.サーバー側モジュールがあったら、自然にクライアントモジュールが欲しいです.そして、できれば両方の互換性があります.一つのモジュールは変更せずにサーバーとブラウザで実行できます.しかし、重大な制限のため、CommunJS仕様はブラウザ環境には適用されません.前のコードですか?ブラウザで実行すると大きな問題があります.

var math = require('math');
　　math.add(2, 3);

第二行mash.add(2,3)は、第一行のrequire(‘math’)の後に運行しますので、math.jsのロードが完了するまで待つ必要があります.つまり、ロード時間が長いとアプリケーション全体が止まって待つということです.これはサーバー側の問題ではありません.すべてのモジュールがローカルハードディスクに保存されていますので、同時にロードが完了します.待ち時間はハードディスクの読み込み時間です.しかし、ブラウザについては、これは大きな問題です.モジュールはサーバーの端に置いています.待ち時間はネットの速度によって遅くなります.長い間待つかもしれません.ブラウザは「仮死」状態にあります.したがって、ブラウザ側のモジュールは、「同期ローディング」を採用することができず、「非同期ローディング」しか採用できません.これがAMD仕様の誕生の背景です.AMDは「Aynchronous Module Definition」の略語で、「非同期モジュール定義」という意味です.モジュールを非同期的にロードします.モジュールのロードは、後のステートメントの動作に影響しません.このモジュールに依存するすべてのステートメントは、ロードが完了するまで一つのコールバック関数で定義されます.AMDはrequire()の語句を用いてモジュールをロードしますが、Common JSとは異なり、二つのパラメータが必要です.

　require([module], callback);

最初のパラメータ[module]は、モジュールをロードするメンバーの配列です.二つ目のパラメータのcalbackは、ロード成功後のコールバック関数です.前のコードをAMD形式に書き換えると、次のようになります.

　　require(['math'], function (math) {
　　　　math.add(2, 3);
　　});

math.add()はmathモジュールのローディングと同期していないので、ブラウザで仮死は発生しません.だから、AMDはブラウザ環境に適していることは明らかです.
requirejs使用
ダウンロード後、jsサブディレクトリの下に置くとロードできます.

このファイルを み むと、ウェブページの がなくなるかもしれません. は つあります. つはホームページの に いてロードすることです.もう つは のように くことです.

asyncプロパティは、このファイルは なロードが であり、Webページの が われないようにすることを しています.IEはこの をサポートしていません.deferだけをサポートしますので、deferも き みます.require.jsをロードしてから、 は のコードをロードします. に たち のコードファイルがmain.jsであるとしても、jsディレクトリの に く.では、 のように くだけでいいです.

data-main の は、ページプログラムのメインモジュールを することです. の では、jsディレクトリの のmain.jsです.このファイルは にrequire.jsにロードされます.require.jsのデフォルトのファイルの はjsですので、main.jsをメールに に くことができます.メインモジュールの き はmain.jsです.これをメインモジュールと びます.ホームページ の り コードを します. は、どうやってメールを きますか?コードが のモジュールに しないなら、javascriptコードを き むことができます.

　// main.js
　　alert("    ！");

これでは、require.jsを う がなくなります. に な は、メインモジュールは のモジュールに しています.この 、AMD で されたrequire() を します.

　　// main.js
　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
　　});

require() は つのパラメータを け れる. のパラメータは1つの であり、 するモジュールを し、 の は「moduleA」、「moduleB」、すなわち「moduleC」であり、 モジュールはこれらの3つのモジュールに している. つ のパラメータは、 に したモジュールが ローディングに すると び されます.ロードされたモジュールはパラメータとして に わり、これらのモジュールはコールバック の で できます.require()はmoduleAを にロードして、moduleBとmoduleC、ブラウザーは を うことはできません.その されたコールバック は、 のモジュールが ローディングに した にのみ され、 の が されます. に、 の を ます.メインモジュールがjquery、undersscore、backboneの3つのモジュールに すると して、main.jsはこのように くことができます.

　　require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
　　　　// some code here
　　});

require.jsはjQuery、undersscoreとbackboneを にロードしてから、コールバック を します.メインモジュールのコードはコールバック に されます.モジュールのロードの のセクションの の では、メインモジュールの モジュールは［jquery］、「undersscore」、「backbone」である.デフォルトでは、require.jsはこの3つのモジュールがmain.jsと じディレクトリにあると し、ファイル はそれぞれjquery.js、undersscore.jsとbackbone.jsとなり、 にロードされる.require.co nfig()を って、モジュールのローディング をカスタマイズできます.require.co nfigはメインモジュールの に いてあります.パラメータはオブジェクトです.このオブジェクトのパス は モジュールのロードパスを します.

　　require.config({
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

のコードは つのモジュールのファイル を えています.パスはデフォルトではmain.jsと じディレクトリ(jsサブディレクトリ)にあります.これらのモジュールが のディレクトリにある 、 えば、js/libディレクトリには、2つの き があります. つは つずつ を することです.

　　require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min",
　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min"
　　　　}
　　});

もう つはベースディレクトリを することです.

　　require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

あるモジュールが のホストにある 、そのURLを することもできます.

　　require.config({
　　　　paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
　　});

require.jsは モジュールに のjsファイルを します.このように のモジュールをロードすると、 もHTTP が し、ページのロード に を えます.したがって、require.jsはモジュールの が したら、このツールで のモジュールを つのファイルに して、HTTP を らすための ツールを している.AMDモジュールの き require.jsにロードされたモジュールは、AMD を しています.つまり、モジュールはAMDの に って かなければなりません. には、モジュールは のdefine を いて しなければならない.モジュールが のモジュールに しない 、define に されてもよい. はmath.jsファイルがあると して、それはmathモジュールを しました.それでは、math.jsはこのように きます.

// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add　　　　};
　　});

ロード は の りです.

　　// main.js
　　require(['math'], function (math){
　　　　alert(math.add(1,1));
　　});

このモジュールが のモジュールに する 、define の のパラメータは、モジュールの を す である があります.

　　define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

require() が のモジュールをロードすると、 にmyLib.jsファイルをロードします. ではないモジュールをロードする 、require.jsにロードされるモジュールは、AMD に って、define() で されるモジュールでなければなりません.しかし、 にはすでに の の ライブラリ(jQueryなど)がAMD に していますが、 くのライブラリが しません.では、require.jsは のモジュールをロードすることができますか? えは です.このようなモジュールは、require()でロードする に、require.co.nfig() を いて、それらのいくつかの を する. えば、undersscoreとbackboneの のライブラリは、AMD で されていません.それらをロードするには、まず を しなければなりません.

　　require.config({
　　　　shim: {　　　　　　
'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {　
　　　　　　　deps: ['underscore', 'jquery'],　　
　　　　　　exports: 'Backbone'　　　　　　}
　　　　}
　　});

require.co nfigは、 に べたpaths の に、 のないモジュールを するためのshim があります. には、モジュールごとに(1)export ( の )を し、このモジュールの び し の を します.(2)deps は、モジュールの を す. えば、jQueryのプラグインはこのように されています.

　shim: {
　　　　'jquery.scroll': {
　　　　　　deps: ['jquery'],
　　　　　　exports: 'jQuery.fn.scroll'
　　　　}
　　}

require.jsプラグインrequire.jsはまた のプラグインを して、いくつかの の を します.domreadyプラグインは、ページDOM のロードが した 、 させることができます.

　　require(['domready!'], function (doc){
　　　　// called once the DOM is ready
　　});

text image  ，    require.js         。
　　define([
　　　　'text!review.txt',
　　　　'image!cat.jpg'
　　　　],　　　　function(review,cat){
　　　　　　console.log(review);
　　　　　　document.body.appendChild(cat);
　　　　}
　　);