Refactoring with Backbone.js

efactoring
with
Backbone.js
R

View Slide

JSDC 2012
Jace Ju
大澤木小鐵
http://plurk.com/jaceju
http://twitter.com/jaceju
http://www.jaceju.net

View Slide

擦屁股達人
如何成為專業的

View Slide

jQuery DOM 基礎
underscore.js 的使用方法
Backebone.js 原理
力有未逮之處

View Slide

好好的沒事
跟人家學什麼重構
If it ain’t broke, don’t ﬁx it.

View Slide

那一年
我們學的 jQuery
Write Once & runs everywhere.

View Slide

那一年
我們學的 jQuery
Write Once & runs everywhere.
萬屎亂

View Slide

身為工程師
都有摳別人屁股程式的時候
Programmers love copy

View Slide

擦舊專案的屁股
Old project kills me

View Slide

屎出不窮
Bug Happens

View Slide

Time is all We need.
時間就像衛生紙

View Slide

No Magic
沒有魔術

View Slide

Keep the DOM structure stable.
儘可能不更動
DOM 結構

View Slide

Same JavaScript Logic.
JavaScript 邏輯
改動越少越好

View Slide

Just do one thing at a time.
一次只做一件事

View Slide

Step
Ӊ᜷
by Step

View Slide

0މ೻ό൯ࡈڭᎈ
Version Control

View Slide

View Slide

0 Іਗʷ಻༊
Automated Testing

View Slide

View Slide

0 ࠠ࿴ృᐑ
Cycle of refactoring

View Slide

ࠠ࿴ృᐑ
੽வ༁ක֐
重構
程式
測試
加入
版本
刪除
舊碼
測試

View Slide

1ʱؓᔚϞ೻όᇁ
Legacy code analysis

View Slide

$(function () {
$.get('json.php', function (json) {
var dataList = json;
var $input = $('#input').empty();
var $output = $('#output');
for(idx in dataList) {
var dataItem = dataList[idx];
$input.append('' + dataItem.title + '');
}
$('a', $input).bind('click', function (e) {
e.preventDefault();
var id = this.id.replace(/^item-/, '');
var dataItem = _.find(dataList, function(p) {
return p.id == id;
});
$('h1', $output).text(dataItem.title);
$('p.desc', $output).text(dataItem.desc);
}).eq(0).click();
}, 'json');
});
੬ԈٙK2VFSZᄳج

View Slide

Data
Input
Init
Output
̋ɝᕙЍਜ෯ᗆй
$(function () {
var $input = $('#input').empty();
var $output = $('#output');
$input.append('' + dataItem.title + '');
}
e.preventDefault();
var id = this.id.replace(/^item-/, '');
var dataItem = _.find(dataList, function(p) {
return p.id == id;
});
$('h1', $output).text(dataItem.title);
$('p.desc', $output).text(dataItem.desc);
}).eq(0).click();
}, 'json');
});

View Slide

2 ˾౬༟ࣘᜊᅰ
Replace Data Variables
with Model/Collection

View Slide

[
{ "id": 1, "title": "...", "desc": "..." },
{ "id": 2, "title": "...", "desc": "..." },
{ "id": 3, "title": "...", "desc": "..." },
{ "id": 4, "title": "...", "desc": "..." },
{ "id": 5, "title": "...", "desc": "..." }
]
У؂ኜ၌הΫෂٙ+40/ࣸό

View Slide

[
{ "id": 1, "title": "...", "desc": "..." },
{ "id": 2, "title": "...", "desc": "..." },
{ "id": 3, "title": "...", "desc": "..." },
{ "id": 4, "title": "...", "desc": "..." },
{ "id": 5, "title": "...", "desc": "..." }
]
У؂ኜ၌הΫෂٙ+40/ࣸό
重要

View Slide

var Model = Backbone.Model.extend({
defaults: {
title: '',
desc: ''
}
});
var Collection = Backbone.Collection.extend({
model: Model
});
່֛.PEFM$PMMFDUJPOᗳй

View Slide

// ...
}
var id = ...;
var dataItem = _.find(dataList, function(d) {
return d.id == id;
});
$('h1').text(dataItem.title);
$('p').text(dataItem.desc);
੬Ԉٙ༟ࣘஈଣᜌ፨

View Slide

͜$PMMFDUJPO̍ༀ+40/ᜊᅰ
[
{ "id": 1, "title": "...", "desc": "..." },
{ "id": 2, "title": "...", "desc": "..." },
{ "id": 3, "title": "...", "desc": "..." },
{ "id": 4, "title": "...", "desc": "..." },
{ "id": 5, "title": "...", "desc": "..." }
]

View Slide

var dataList = new Collection(json);
͜$PMMFDUJPO̍ༀ+40/ᜊᅰ
Collection
Model
Model
Model
Model

View Slide

// ...
}
͜$PMMFDUJPOGPS&BDI՟˾༟ࣘࠖ˾
[
{ "id": 1, "title": "...", "desc": "..." },
{ "id": 2, "title": "...", "desc": "..." },
{ "id": 3, "title": "...", "desc": "..." },
{ "id": 4, "title": "...", "desc": "..." },
{ "id": 5, "title": "...", "desc": "..." }
]

View Slide

dataList.forEach(function (dataItem) {
// ...
});
͜$PMMFDUJPOGPS&BDI՟˾༟ࣘࠖ˾
dataList : Collection
dataItem : Model
dataItem : Model
dataItem : Model
dataItem : Model

View Slide

[
{ "id": 1, "title": "...", "desc": "..." },
{ "id": 2, "title": "...", "desc": "..." },
{ "id": 4, "title": "...", "desc": "..." },
{ "id": 5, "title": "...", "desc": "..." }
]
var id = ...;
var dataItem = _.find(dataList, function(d) {
return d.id == id;
});
ҷ͜$PMMFDUJPOHFU
՟੻ఊഅ༟ࣘ
{ "id": 3, "title": "...", "desc": "..." }

View Slide

var id = ...;
var dataItem = dataList.get(id);
ҷ͜$PMMFDUJPOHFU
՟੻ఊഅ༟ࣘ
dataList : Collection
dataItem : Model
dataItem : Model
dataItem : Model

View Slide

{ "id": 3, "title": "...", "desc": "..." }
$('h1').text(dataItem.title);
$('p').text(dataItem.desc);
ҷ͜.PEFMHFU
՟੻᙮׌࠽

View Slide

$('h1').text(dataItem.get('title'));
$('p').text(dataItem.get('desc'));
ҷ͜.PEFMHFU
՟੻᙮׌࠽
dataItem : Model get
title
desc

View Slide

3 ˏ͜ᅵو
Introduce
JavaScript Template

View Slide

var $dom = $('#view');
$dom.html('' + dataItem.get('title') + '');
੬Ԉٙ೥ࠦяତᜌ፨

View Slide

੬Ԉٙ೥ࠦяତᜌ፨
這個叫 HTML

View Slide

<br/>
່֛ᅵو

View Slide

<br/><h1>' + dataItem.get('title') + '</h1><br/>
່֛ᅵو

View Slide

<br/><h1><%= title %></h1><br/>
່֛ᅵو

View Slide

var template = _.template($('#view-template').html());
<br/><h1><%= title %></h1><br/>
່֛ᅵو˙ج

View Slide

<br/><h1><%= title %></h1><br/>
͜ᅵو˙ج՟˾)5.-οЕ

View Slide

$dom.html(template(dataItem.toJSON()));
<br/><h1><%= title %></h1><br/>
͜ᅵو˙ج՟˾)5.-οЕ

View Slide

4ˏɝ7JFXᗳй
Introduce View Class

View Slide

່֛7JFXᗳй

View Slide

່֛7JFXᗳй
template

View Slide

່֛7JFXᗳй
template
display

View Slide

var View = Backbone.View.extend({
render: function () {
return this;
}
});
່֛7JFXᗳй

View Slide

return this;
}
});
ย୅ᅵو˙ج

View Slide

template: _.template($('#view-template').html()),
return this;
}
});
ย୅ᅵو˙ج

View Slide

return this;
}
});
ย୅ᅵو˙ج

View Slide

return this;
}
});
ย୅ᜑͪᜌ፨

View Slide

$dom.html(template(this.model.toJSON()));
return this;
}
});
ย୅ᜑͪᜌ፨

View Slide

$dom.html(this.template(this.model.toJSON()));
return this;
}
});
ҷ͜7JFXٙᅵو˙ج

View Slide

this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
ҷ͜7JFXٙFM᙮׌

View Slide

return this;
}
});
୅ৰᔚٙяତᜌ፨

View Slide

return this;
}
});
var view = new View({
});
ᜑͪ೥ࠦ

View Slide

return this;
}
});
el: '#view'
});
ᜑͪ೥ࠦ

View Slide

return this;
}
});
el: '#view',
model: dataItem
});
ᜑͪ೥ࠦ

View Slide

return this;
}
});
el: '#view',
model: dataItem
});
view.render();
ᜑͪ೥ࠦ

View Slide

5ˏɝً࿒ي΁
Introduce Status Object

View Slide

Input Event Handler
Output View
ً࿒ي΁༶Ъࡡଣ

View Slide

Input Event Handler
Output View
Status
ً࿒ي΁༶Ъࡡଣ

View Slide

var $input = $('#input');
var outputView = new OutputView({
el: '#output'
});
e.preventDefault();
var id = /* ... */;
outputView.model = dataItem;
outputView.render();
});
̋ɝً࿒ي΁

View Slide

var status = new DataItem();
el: '#output'
});
e.preventDefault();
var id = /* ... */;
});
̋ɝً࿒ي΁

View Slide

el: '#output',
model: status
});
e.preventDefault();
var id = /* ... */;
});
ਗ਼ً࿒ي΁ഐΥՑ7JFXي΁ɪ

View Slide

el: '#output',
model: status
});
status.on('change', outputView.render, outputView);
e.preventDefault();
var id = /* ... */;
});
ً່֛࿒ي΁ၾ7JFXي΁ٙʝਗ

View Slide

el: '#output',
model: status
});
e.preventDefault();
var id = /* ... */;
status.set(dataItem.toJSON());
});
ً͜࿒ي΁՟˾7JFXي΁ٙᜑͪᜌ፨

View Slide

el: '#output',
model: status
});
e.preventDefault();
var id = /* ... */;
});
ً͜࿒ي΁՟˾7JFXي΁ٙᜑͪᜌ፨

View Slide

6዆Υࠫࠦԫ΁ᜌ፨
Move DOM event handlers

View Slide

var InputView = Backbone.View.extend({
// ...
});
});
ย୅ԫ΁ஈଣዚՓ

View Slide

// ...
events: {
'click a': 'changeOutput'
},
changeOutput: function (e) {
}
});
});

View Slide

// ...
events: {
},
}
});
});

View Slide

// ...
events: {
},
}
});
ࡌ͍ਞϽᜊᅰ

View Slide

// ...
events: {
},
}
});
var inputView = new InputView({
el: '#input'
});
ࡌ͍ਞϽᜊᅰ

View Slide

// ...
events: {
},
}
});
el: '#input',
collection: dataList
});
ࡌ͍ਞϽᜊᅰ

View Slide

// ...
events: {
},
var dataItem = this.collection.get(id);
}
});
el: '#input',
collection: dataList
});
ࡌ͍ਞϽᜊᅰ

View Slide

// ...
events: {
},
}
});
el: '#input',
collection: dataList,
model: status
});
ࡌ͍ਞϽᜊᅰ

View Slide

// ...
events: {
},
this.model.set(dataItem.toJSON());
}
});
el: '#input',
model: status
});
ࡌ͍ਞϽᜊᅰ

View Slide

̍ༀ"+"9
Replace $.ajax
with Backbone.sync
7

View Slide

var DataList = Backbone.Collection.extend({
model: DataItem
});
$(function () {
var dataList = new DataList(json);
// ...
inputView.render();
}, 'json');
});
ย୅4FSWFS၌"1*ٙխ̣Зໄ

View Slide

model: DataItem,
url: 'json.php'
});
$(function () {
// ...
inputView.render();
}, 'json');
});

View Slide

model: DataItem,
url: 'json.php'
});
$(function () {
// ...
inputView.render();
});

View Slide

model: DataItem,
url: 'json.php'
});
$(function () {
// ...
inputView.render();
});
୅ৰʔ̀ࠅٙᜊᅰ

View Slide

model: DataItem,
url: 'json.php'
});
$(function () {
var dataList = new DataList();
// ...
inputView.render();
});
୅ৰʔ̀ࠅٙᜊᅰ

View Slide

model: DataItem,
url: 'json.php'
});
$(function () {
// ...
inputView.render();
});
່֛༟ࣘΝӉܝٙᙃ೯ԫ΁

View Slide

model: DataItem,
url: 'json.php'
});
$(function () {
// ...
inputView.render();
dataList.on('all', inputView.render, inputView);
});

View Slide

model: DataItem,
url: 'json.php'
});
$(function () {
// ...
});

View Slide

model: DataItem,
url: 'json.php'
});
$(function () {
// ...
dataList.fetch();
});

View Slide

這就是
重構！

View Slide

在
GitHub
上
叉
我
https://github.com/jaceju/refactoring_with_backbone.js

View Slide

Refactoring with Backbone.js

Refactoring with Backbone.js

大澤木小鐵

More Decks by 大澤木小鐵

Other Decks in Programming

Featured

Transcript