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
590
JSConf Asia 2014 Sessions
jaceju
4
410
What happens in Laravel 4 bootstraping
jaceju
9
550
Deal with Laravel assets by Bower & Gulp
jaceju
30
2k
Leaning MVC By Example
jaceju
0
370
ng-conf_2014
jaceju
2
990
The Power of JavaScript in JSConf.Asia 2013
jaceju
5
380
jQuery vs AngularJS, dochi?
jaceju
20
2.9k
Begining Composer
jaceju
24
5.2k
Other Decks in Programming
See All in Programming
AHC 044 混合整数計画ソルバー解法
kiri8128
0
300
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
2
1.7k
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
140
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
550
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
230
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
110
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
740
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
11
3.4k
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
250
英語文法から学ぶ、クリーンな設計の秘訣
newnomad
1
270
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
210
技術好きなエンジニアが "リーダーへの進化" によって得たものと失ったもの
pospome
5
1.3k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
244
12k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
RailsConf 2023
tenderlove
29
1k
Statistics for Hackers
jakevdp
797
220k
Become a Pro
speakerdeck
PRO
27
5.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
It's Worth the Effort
3n
184
28k
Optimizing for Happiness
mojombo
377
70k
Code Reviewing Like a Champion
maltzj
521
39k
Writing Fast Ruby
sferik
628
61k
Site-Speed That Sticks
csswizardry
4
450
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