About Require.jsKyohei Morimoto

アジェンダ

- Require.jsって？

- 何ができるか？

- 使い方

- 課題

現状の問題点‣ フロントエンド開発の複雑化

‣ 多量のライブラリが必要（jquery underscore backbone + plugins）

‣ モジュール開発

‣ ブラウザで適切なライブラリは4～8程度

‣ 全部読み込むまではブラウザは表示されない

index. html

app.js

lib3

lib4

lib1

lib2

mod1

mod2

mod3

‣ 読み込む量が多くて大変

‣ パフォーマンスも悪い

‣ ※CAは10000行のJSをBB化したら、90ファイルになったそうな…

app.js

lib3 lib4

lib1

lib2

mod1

mod2

mod3

‣ 読み込み順番や依存関係がある

‣ 本来読み込まなくて良い物まで読み込んでいたりする

‣ 特にSPA

Require.js

app.js

lib3 lib4

lib1

lib2

mod1

mod2

mod3

‣ 必要なライブラリやモジュールだけを読むようにしてくれる

‣ 読み込むものをまとめてくれる

使い方

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

使い方:Requireの設定requirejs.config({ baseUrl : 'js', paths : {　 // 読み込み先のパスを設定できる // '/'または'http'から始まると絶対パスで参照する jquery : [ 'lib/jquery.min', ], underscore : [ 'lib/underscore-min', ], backbone :'lib/backbone-min' }, shim : { //AMDに対応してないものを対応させる underscore : { exports : ‘_' //jqueryだったら、$ }, } });

おさらい

‣ baseUrl:ルートのパスを設定

‣ paths：で利用するライブラリのpathsを設定する

‣ shim:AMDに対応してないライブラリを対応させる

使い方:モジュールの定義

define(['backbone'], function (Backbone) { console.log(Backbone === window.Backbone); // true });

使い方:モジュールの定義(何か値を返す)

define(['backbone'], function (Backbone) { var myModule = Backbone.Model.extend({}); return myModule });

おさらい

define([‘使うライブラリ’],function(ライブラリ名){ //処理 }); !

‣ 読み込み時に必要なライブラリを設定する

使い方:モジュールの呼び出し

require([‘foo’],functions(foo){ foo.doSomething(); });

おさらい

‣defineとよく似てる

‣defineは依存で、requireは取得のイメージ

‣clickイベントなどに紐付けると後からファイルを取得することができたりする

Demo

課題

app.js

jquery

index. html

BackBone

under Score

moment

highcharts

view.js

model.jsclickEvent

alert(“Hello World”)

各種依存関係