Require.jsはActionScriptのimportのようにjsファイル同士の依存関係を崩さないよう非同期で読み込みつつ、多重読み込みなども防止してくれるライブラリ。
Require.jsを使えば細かくjsファイルを分割してもBackboneやjQuery等のライブラリを依存関係を保ちつつ読み込んでみる。
最小限のコードで挙動を確認してみる。（以降すべてCoffeeScript）
これを実行するとMyModelのmessageに定義された「Hello, World!」が出力される。
Backboneに必要なUnderscoreとjQueryはBackboneより先に読み込まれている。
require([
"libs/jquery-1.10.1.min"
"libs/underscore.min"
"libs/backbone.min"
],
($, _, Backbone) ->
MyModel = Backbone.Model.extend({
message: "Hello, World!"
})
MyView = Backbone.View.extend({
initialize: (options) ->
console.log @model.message
})
view = new MyView({
model: new MyModel()
})
@
)
今度はRequire.jsの機能のdefineを使ってモジュールを作ってみる。
こちらも同じく「Hello, World!」が出力される。
define("myModule",
[
"libs/jquery-1.10.1.min"
"libs/underscore.min"
"libs/backbone.min"
],
($, _, Backbone) ->
MyModel = Backbone.Model.extend({
message: "Hello, World!"
})
MyView = Backbone.View.extend({
initialize: (options) ->
console.log @model.message
})
return {
modelClass: MyModel
viewClass: MyView
}
)
require([
"myModule"
],
(module) ->
model = new module.modelClass()
view = new module.viewClass({
"model": model
})
@
)
require.configのshimでライブラリの依存関係をあらかじめ設定してみる。
実行結果は同様。
require.config(
shim:
"libs/backbone.min":
deps: [
"libs/jquery-1.10.1.min"
"libs/underscore.min"
]
exports:
"Backbone"
)
define("myModule",
[
"libs/backbone.min"
],
(Backbone) ->
MyModel = Backbone.Model.extend({
message: "Hello, World!"
})
MyView = Backbone.View.extend({
initialize: (options) ->
console.log @model.message
})
return {
modelClass: MyModel
viewClass: MyView
}
)
require([
"myModule"
],
(module) ->
model = new module.modelClass()
view = new module.viewClass({
"model": model
})
@
)
今度はrequire.configのpathsを使ってライブラリのパスをあらかじめ定義しておく。
こちらも実行結果は同様。
require.config(
paths:
"jquery": "libs/jquery-1.10.1.min"
"underscore": "libs/underscore.min"
"backbone": "libs/backbone.min"
)
define("myModule",
[
"jquery"
"underscore"
"backbone"
],
() ->
MyModel = Backbone.Model.extend({
message: "Hello, World!"
})
MyView = Backbone.View.extend({
initialize: (options) ->
console.log @model.message
})
return {
modelClass: MyModel
viewClass: MyView
}
)
require([
"myModule"
],
(module) ->
model = new module.modelClass()
view = new module.viewClass({
"model": model
})
@
)
今度はshimにもpathsで定義したパスを使ってみる。
require.config(
paths:
"jquery": "libs/jquery-1.10.1.min"
"underscore": "libs/underscore.min"
"backbone": "libs/backbone.min"
shim:
"backbone":
deps: [
"jquery"
"underscore"
]
exports:
"Backbone"
)
define("myModule",
[
"backbone"
],
() ->
MyModel = Backbone.Model.extend({
message: "Hello, World!"
})
MyView = Backbone.View.extend({
initialize: (options) ->
console.log @model.message
})
return {
modelClass: MyModel
viewClass: MyView
}
)
require([
"myModule"
],
(module) ->
model = new module.modelClass()
view = new module.viewClass({
"model": model
})
@
)
require.configでの設定は一度きりなのでこれを無視すると、メインのコードはだいぶスッキリした。
参考：
RequireJS moduleについて – 文殊堂
java-ja.js #2 RequireJS実践編 – 文殊堂
[JS] JavaScriptをモジュール分割して開発できるRequireJSに入門 – YoheiM .NET
