About
Require.js
Kyohei 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 : [
'l...
おさらい
‣ 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
Back

Bone
under
Score
moment
highcha
rts
view.js
model.jsclickEvent
alert( Hello World )
各種依存関係
Upcoming SlideShare
Loading in …5
×

About Reauire.js

811 views

Published on

社内の勉強会で使ったRequire.jsについての資料
とりあえず動かせる感じまでの内容です。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

About Reauire.js

  1. 1. About Require.js Kyohei Morimoto
  2. 2. アジェンダ - Require.jsって? - 何ができるか? - 使い方 - 課題
  3. 3. 現状の問題点 ‣ フロントエンド開発の複雑化 ‣ 多量のライブラリが必要
 (jquery underscore backbone + plugins) ‣ モジュール開発 ‣ ブラウザで適切なライブラリは4∼8程度 ‣ 全部読み込むまではブラウザは表示されない
  4. 4. index. html app.js lib3 lib4 lib1 lib2 mod1 mod2 mod3 ‣ 読み込む量が多くて大変 ‣ パフォーマンスも悪い ‣ ※CAは10000行のJSをBB化した ら、90ファイルになったそうな…
  5. 5. app.js lib3 lib4 lib1 lib2 mod1 mod2 mod3 ‣ 読み込み順番や依存関係がある ‣ 本来読み込まなくて良い物まで読み 込んでいたりする ‣ 特にSPA
  6. 6. Require.js
  7. 7. app.js lib3 lib4 lib1 lib2 mod1 mod2 mod3 ‣ 必要なライブラリやモジュールだけ を読むようにしてくれる ‣ 読み込むものをまとめてくれる
  8. 8. 使い方 <script data-main="app" src="js/vender/require.js"></script>
  9. 9. 使い方:Requireの設定 requirejs.config({ baseUrl : 'js', paths : {  // 読み込み先のパスを設定できる // '/'または'http'から始まると絶対パスで参照する jquery : [ 'lib/jquery.min', ], underscore : [ 'lib/underscore-min', ], backbone :'lib/backbone-min' }, shim : { //AMDに対応してないものを対応させる underscore : { exports : _' //jqueryだったら、$ }, } });
  10. 10. おさらい ‣ baseUrl:ルートのパスを設定 ‣ paths:で利用するライブラリのpathsを設定する ‣ shim:AMDに対応してないライブラリを対応させる
  11. 11. 使い方:モジュールの定義 define(['backbone'], function (Backbone) { console.log(Backbone === window.Backbone); // true });
  12. 12. 使い方:モジュールの定義(何か値を返す) define(['backbone'], function (Backbone) { var myModule = Backbone.Model.extend({}); return myModule });
  13. 13. おさらい define([ 使うライブラリ ],function(ライブラリ名){ //処理 }); ! ‣ 読み込み時に必要なライブラリを設定する
  14. 14. 使い方:モジュールの呼び出し require([ foo ],functions(foo){ foo.doSomething(); });
  15. 15. おさらい ‣defineとよく似てる ‣defineは依存で、requireは取得のイメージ ‣clickイベントなどに紐付けると後からファイルを取 得することができたりする
  16. 16. Demo
  17. 17. 課題
  18. 18. app.js jquery index. html Back
 Bone under Score moment highcha rts view.js model.jsclickEvent alert( Hello World ) 各種依存関係

×