About Reauire.js

About Reauire.js

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