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
420
What happens in Laravel 4 bootstraping
jaceju
9
560
Deal with Laravel assets by Bower & Gulp
jaceju
30
2k
Leaning MVC By Example
jaceju
0
380
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
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
220
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
17
6.2k
React 使いじゃなくても知っておきたい教養としての React
oukayuka
14
2.7k
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
160
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
480
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
170
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
310
AIのメモリー
watany
11
1.1k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
34
10k
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
290
PHPカンファレンス関西2025 基調講演
sugimotokei
5
1k
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
300
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Raft: Consensus for Rubyists
vanstee
140
7k
What's in a price? How to price your products and services
michaelherold
246
12k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Building Adaptive Systems
keathley
43
2.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Docker and Python
trallard
45
3.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
Thoughts on Productivity
jonyablonski
69
4.8k
Designing for Performance
lara
610
69k
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