Require.js を使ってみる
メモ。
いい加減やらないと行けないと思いつつ、二回ほど試して上手く行かなくて放置してたので再入門した。
ディレクトリ構成
├── app.js
├── entities
├── libs
│ ├── backbone-0.9.9-min.js
│ ├── bootstrap-2.2.2-min.js
│ ├── jquery-1.8.2-min.js
│ ├── jquery-layout-1.3.0-30.77.js
│ ├── jquery-ui-1.9.1.custom.js
│ ├── jquery.jsPlumb-1.3.16-all.js
│ ├── micro-log.js
│ ├── moment-1.7.0-min.js
│ ├── require-2.1.2-min.js
│ └── underscore-1.4.3-min.js
├── main.js
├── models
├── templates
└── views
├── AppView.js
├── SidebarView.js
└── MenuView.jsこんな感じ。
main.js
読み込まれる順に書いて行く。
html から script タグで読み込む最初のやつ。
'use strict' require.config({ shim: { 'jquery': { exports: '$' }, 'jquery.ui': { deps: ['jquery'] }, 'jquery.layout': { deps: ['jquery'] }, 'jsplumb': { deps: ['jquery'], exports: 'jsPlumb' }, 'bootstrap': { deps: ['jquery'] }, 'underscore': { exports: '_' }, 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' }, 'log': { exports: 'log' } }, paths: { 'jquery': 'libs/jquery-1.8.2-min', 'jquery.ui': 'libs/jquery-ui-1.9.1.custom', 'jquery.layout': 'libs/jquery-layout-1.3.0-30.77', 'jsplumb': 'libs/jquery.jsPlumb-1.3.16-all', 'bootstrap': 'libs/bootstrap-2.2.2-min', 'underscore': 'libs/underscore-1.4.3-min', 'backbone': 'libs/backbone-0.9.9-min', 'log': 'libs/micro-log' }, urlArgs: 'bust=' + (new Date()).getTime() }); require([ 'app', 'jquery', 'jquery.ui', 'jquery.layout', 'jsplumb', 'bootstrap', ], function (App) { App.initialize(); });
require.config で依存関係のあるライブラリを定義する。
最初 shim を書いてなくて、Backboune とかが undefined になってハマったが、shim をきちんと書く。
path は実際のファイルへのパス。
.js を取るだけでよさそう。
urlArgs は開発時に読み込みをキャッシュさせないため。
プロダクションにデプロイする際には消したいので、ここに書くんじゃなくて debug.html とか作って、html の中に定義した方が良いのかもしれない。
どうすれば良いのだろう。
今作っているのはシングルページなアプリケーションなので依存するライブラリは require([]) で全て読み込む。
ここでは jQuery.layout が jQuery UI に依存し、jsPlumb が jQuery に依存しているのでここで読み込むのを定義したら行けた。
app.js
define([ 'jquery', 'underscore', 'backbone', 'log', 'views/AppView' ], function ($, _, Backbone, log, AppView) { var AppRouter = Backbone.Router.extend({ routes: { '': 'root', '__debug': 'debug' } }); var initialize = function(){ var router = new AppRouter(); router.on('route:root', function () { log.setLevel('info'); new AppView(); }); router.on('route:debug', function () { log.setLevel('debug'); log.debug('Debug mode start'); new AppView(); }); Backbone.history.start(); }; return { initialize: initialize }; });
Backbone.js の Router を定義し設定。
router.js とか分けようかと思ったけど、今は必要ないと判断してここに定義した。
ルーティングが多くなったら router.js とかに切り出すかも。
やってるのはロガーのログレベルを変更して、AppView() を呼んでるだけ。
views/AppView.js
define([ 'jquery', 'underscore', 'backbone', 'container', 'views/MapView', ], function ($, _, Backbone, container, MapView) { var AppView = Backbone.View.extend({ initialize: function () { // Open Twitter Bootstrap collapse. $('.collapse').collapse('show'); // Create UI layout. var layout = $('#main').layout(); layout.sizePane('west', 240); layout.sizePane('south', 300); var mapView = new MapView(); mapView.render(); } }); return AppView; });
Twitter Bootstrap の collapse を使っていて全て開いた状態にしたいから、ここで設定。
また jQuery Layout を使っているので、ここでレイアウトの定義を行った。
