前言
這篇文章不是要深入探討關於BackboneJS的使用，純粹是因為最近Javascript MVC Framework
一直推陳出新。但像小弟資質愚鈍其實剛知道這東西的時候完全不知道她在干嘛。
這篇文章只是大略用範例來做些基本的說明。
What is BackboneJS ?
Backbone 是一個為前端設計的JavaScript框架。 不同於jQuery專注於簡化DOM的操作和事件繫結。
Backbone 提供結構化來達到分離資料模型和DOM。就像是MVC框架分離View，Model，Controller。
它讓複雜的JavaScript應用程式更簡單的開發和維護。
為什麼使用Backbone?
在jQuery裡，我們可能會使用一連串的事件來指派資料到DOM像以下範例:
1
2
3
4
5
6
7
8
9
|
var article = {
author:"Joe",
content: "testing"
};
$('#article').click(function(event){
$(this).find('.content').text(article.content);
});
|
接著，看看Backbone. 它提供Model Class和View Class這兩個Backbone最主要的元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Backbone</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<style type="text/css" media="screen">
.content{width:300px;display:block;border:1px solid #ccc;}
#article{width:300px;display:block;}
</style>
</head>
<body>
<script>
$(function(){
var Article = Backbone.Model;
var article = new Article({
author:"Joe",
content: "testing"
});
var ArticleView = Backbone.View.extend({
el: $('#article'),
initialize: function(){
_.bindAll(this,'updateContent');
this.model.bind('change',this.updateContent);
},
events: {
"click .content" : "updateContent"
},
updateContent: function(){
this.$('.content').text(this.model.get("content"));
}
});
var articleView = new ArticleView({model:article});
$('#fire').click(function(){
article.set({content: 'Change Model'});
});
});
</script>
<div id="article">Click Me <div class="content">Initialize</div> </div>
<button id="fire">Change</button>
</body>
</html>
|
結論
到這邊為止,大致上對於Backbone做的事情有些概略的認識.簡單來說Backbone就是提供一個框架讓我們把既存的JavaScript Code 結構上可以寫成MVC的架構。
對於功能單純的程式頁面來說這樣做好相反而會增加大量程式碼，但當頁面功能越來越複雜的時候。
好處是其他接手維護的人可以用既定的規則去理解部分的功能。像最上面jQuery的寫法。可能免不了要重頭
看到尾。