RequireJS 入門

RequireJSはJavaScriptをモジュール開発するためのツール。

JavaScriptはグローバル領域が共通なので複数のモジュールを利用しようとするとバッティングするおそれがある。基本的にはグローバル使うな！となるが他のモジュールなどでどの名前空間を使うかなど色々決めなくてはいけない。

var Fuga = function() {};
↓
var NameSpace = {}
NameSpace.Fuga = function() {}

RequireJSを使うとコレを簡単にすることができる。

まず、以下の様なディレクトリ構成だと考える。script/module/fuga.jsとscript/module/hoge.jsが独立したモジュールである

.
├── index.html
└── script
├── lib
│   ├── jquery-1.11.1.min.js
│   └── require.js
├── main.js
└── module
   ├── fuga.js
   └── hoge.js

まず、index.htmlではrequire.jsを読みこみ、data-main属性にメインのスクリプトのURLを記述する。

<script data-main="script/main.js" src="script/lib/require.js"></script>

まず、main.jsに以下のように設定してみよう。module/fuga.jsの読み込みが終了した際にコールバック関数が実行されます。

require([
  'module/fuga'
], function(fuga) {
      console.log(fuga.doo())
});

fuga.jsには以下のように記述してみる。

define({
    bar:"fuga",
    foo:"hoge",
    doo:function(){
        return this.bar+this.foo
    }
});

main.jsがfuga.jsを読み込み、defineの定義内容はdefine()で指定ができる。これは以下のように記述することもできる。

define(function(){
    var fuga = {
        bar:"fuga",
        foo:"hoge",
        doo:function(){
            return this.bar+this.foo
        }
    }
    return fuga;
});

他のモジュールやライブラリを参照して利用したい場合は以下のように記述を行う。

define([
  'lib/jquery-1.11.1.min'
], function(){
    var fuga = {
        bar:"fuga",
        foo:"hoge",
        doo:function(){
            return this.bar+this.foo+$("body").text();
        }
    }
    return fuga;
});