Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Backbone.js X RequireJS Quick Guide
Search
大澤木小鐵
April 25, 2012
Programming
8
1.3k
Backbone.js X RequireJS Quick Guide
Zen of Friends 讀書會簡報,介紹如何透過 RequireJS 將 Backbone.js 應用程式模組化。
大澤木小鐵
April 25, 2012
Tweet
Share
More Decks by 大澤木小鐵
See All by 大澤木小鐵
Effective Unit Testing
jaceju
3
610
JSConf Asia 2014 Sessions
jaceju
4
430
What happens in Laravel 4 bootstraping
jaceju
9
570
Deal with Laravel assets by Bower & Gulp
jaceju
30
2k
Leaning MVC By Example
jaceju
0
390
ng-conf_2014
jaceju
2
1k
The Power of JavaScript in JSConf.Asia 2013
jaceju
5
400
jQuery vs AngularJS, dochi?
jaceju
20
3k
Begining Composer
jaceju
24
5.3k
Other Decks in Programming
See All in Programming
AWS発のAIエディタKiroを使ってみた
iriikeita
1
170
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
560
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.6k
コンテキストエンジニアリング Cursor編
kinopeee
1
760
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
180
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.6k
1から理解するWeb Push
dora1998
7
1.7k
複雑なドメインに挑む.pdf
yukisakai1225
5
990
MLH State of the League: 2026 Season
theycallmeswift
0
220
Ruby Parser progress report 2025
yui_knk
1
300
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
230
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
280
Featured
See All Featured
Code Review Best Practice
trishagee
70
19k
Being A Developer After 40
akosma
90
590k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Done Done
chrislema
185
16k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
How GitHub (no longer) Works
holman
315
140k
Designing for Performance
lara
610
69k
Code Reviewing Like a Champion
maltzj
525
40k
Facilitating Awesome Meetings
lara
55
6.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
A designer walks into a library…
pauljervisheath
207
24k
Designing Experiences People Love
moore
142
24k
Transcript
Backbone.js X RequireJS Quick Guide
RequireJS RequireJS 是 AMD 規範的實作版本
require(options); require({ baseUrl: './', paths: { alias_name: full_path, } });
require API 可以接受一個物件做為設定檔 其中 baseUrl 指向 HTML 頁面所在路徑
require(dependencies, callback); require([ 'js_file_path1', 'js_file_path2', 'plugin_path!js_file_path3', 'plugin_path!js_file_path4', ], function (obj1,
obj2, obj3, NS4) { obj1.doSomething(); obj2.doSomething(); obj3.doSomething(); obj4 = new NS4.Model(); }); 載入的相依模組與 callback 的參數為一對一關係
define(id?, dependencies?, factory); define([ 'js_file_path1', 'js_file_path2', 'plugin_path!js_file_path3', ], function(obj1, obj2,
constructor3) { return { method1: function () { obj1.doSomething(); obj2.doSomething(); obj3 = new constructor3(); } }; }); define 與 require 原理類似 但主要是用來定義模組
<project> ├── css │ └── screen.css ├── index.html ├── js
│ ├── model │ ├── view │ ├── router │ ├── app.js │ ├── build.js │ └── main.js └── lib ├── backbone │ └── backbone-min.js ├── jquery │ └── jquery-min.js ├── requirejs │ ├── order.js │ ├── text.js │ └── require.js └── underscore └── underscore-min.js 目錄結構是可以自訂的
<project> └── js ├── model │ └── Config.js ├── router
│ └── Router.js └── view ├── Status.js └── Switch.js 必要時可以再多一個 collection 資料夾
Example
之前在讀書會介紹過的範例 Switch (View) Status (View) music: false Config (Model)
進入點為 js/main.js <script src="lib/jquery/jquery-min.js"></script> <script src="lib/underscore/underscore-min.js"></script> <script src="lib/backbone/backbone-min.js"></script> <script src="js/app.js"></script>
</body> <script data-main="js/main" src="lib/requirejs/require.js"> </script> </head>
require({ baseUrl: './', paths: { order: 'lib/requirejs/order', text: 'lib/requirejs/text' }
}); require([ 'order!lib/jquery/jquery-min', 'order!lib/underscore/underscore-min', 'order!lib/backbone/backbone-min', 'order!js/app', ], function () { App = _.last(arguments); App.initialize(); }); js/main.js underscore 和 Backbone.js 的官方版本不支援 AMD
define([ 'js/router/Router' ], function (Router) { return { initialize: function
() { new Router; Backbone.history.start(); } } }); js/app.js 注意 js/appjs 模組直接回傳的是 object
define([ ], function () { return Backbone.Router.extend({ routes: { '':
'index' }, index: function () { } }); }); js/router/Router.js Router 模組回傳的是 constructor
define(function () { return Backbone.Model.extend({ defaults: { music: false }
}); }); js/model/Config.js 沒有相依模組時,第一個參數也可以省略
define([ 'js/model/Config' ], function (Config) { return Backbone.Router.extend({ routes: {
'': 'index' }, index: function () { var config = new Config(); } }); }); js/router/Router.js callback 的 Config參數 即為 js/model/Config.js 回傳的 constructor
define([ 'text!template/switch.html' ], function (viewTemplate) { return Backbone.View.extend({ events: {
'click #switch': 'toggleMusic' }, initialize: function () { this.$el.html(viewTemplate); }, toggleMusic: function (e) { this.model.set('music', $(e.target).prop('checked')); } }); }); js/view/Switch.js 利用 text plugin 把樣版載入為字串
define([ 'js/model/Config', 'js/model/Switch' ], function (Config, Switch) { return Backbone.Router.extend({
routes: { '': 'index' }, index: function () { // ... var switchView = new Switch({ el: '.input', model: config }); } }); }); js/router/Router.js Model 與 View 沒有相依性 所以不需指定載入順序
define([ 'text!template/status.html' ], function (viewTemplate) { return Backbone.View.extend({ initialize: function
() { this.$el.html(viewTemplate); this.model.on('change', this.render, this); }, render: function () { var music = this.model.get('music'); var status = music ? 'on' : 'off'; $('#status', this.el) .removeClass('on off') .addClass(status) .text(status); return this; } }); }); js/view/Status.js 因為是沒有變化的靜態樣版 所以直接在 initialize 方法中塞到 this.$el.html 中
define([ 'js/model/Config', 'js/model/Switch', 'js/model/Status' ], function (Config, Switch, Status) {
return Backbone.Router.extend({ routes: { '': 'index' }, index: function () { // ... var statusView = new Status({ el: '.output', model: config }); } }); }); js/router/Router.js 所有的 Model 和 View 都載入後就會執行
Optimize
r.js 要把 require(config) 裡的 config ⼀一⼀一加入 r.js # r.js -o
name=js/main \ out=js/main-built.js \ baseUrl="./" \ paths.order="lib/requirejs/order" \ paths.text="lib/requirejs/text" out 的部份可以自訂 不一定要使用 js/main-built.js # npm -g install requirejs
改用 js/build.js 最佳化 js/build.js # r.js -o js/build.js ({ baseUrl:
'../', name: 'js/main', out: 'main-built.js', paths: { order: 'lib/requirejs/order', text: 'lib/requirejs/text' } }) 注意 build.js 的所在位置 及 baseUrl 所對應的路徑
• ⼀一切在 App.initialize 開始。 • 因為是非同步載入的關係,所以要注意 define 的 factory 作用時機。有順序關係時,用
order plugin 。 • text plugin 載入進來的樣版,會以字串的形式⼀一併 被 r.js 編譯進去。 • 注意 factory 回傳的是純 object 還是 constructor 。 • baseUrl 很重要,代表目前 index.html 所在的網址。 注意事項
• RequireJS 支援目前常見瀏覽器,也包含行動裝置 瀏覽器。 • require 會利用 script 標籤的 async
屬性來載入 js 檔案。並在完成載入後,透過 readyStateChange 來 決定載入的檔案是否要被執行。 • define 會使用到 queue 的機制來存放模組,然後 再轉給 require 來載入。 • AMD 可以用在類似 Facebook 分段載入的情況, 以提供使用者好的 UI 經驗。 其他心得 基本上看到 IE6+ 就可以放心了
the end