前言
Backbone 是一套類似 MVC 的 JavaScript Library，為何說它是類似，我們熟知的 MVC Framework 是指，Model、View 和 Control，在開發 Web AP 的時候，分為此三部分可以達到 Loosely Coupled 的效果，好處就是在往後維護時不需要大幅度的更動，何謂大幅度的更動？假如我們的 Web AP 的程式是很混雜的，可能我們只是要改動一個變數值或者是路徑修改，就必須到程式的好幾個地方去逐步修改，這時候可能就會使用Editor 去搜尋 Project 中有 Call 到的地方再一一修改，還蠻麻煩的，另外讓其他人來維護你所寫的 Code，對那個人來講可能會是個惡夢 ! 所以若能將 Web AP 分成 MVC 是有它的道理在。在拜讀了一些 Backbone.js 的介紹後，我有了以下的心得，先從 Model 開始介紹。
Backbone 是一套類似 MVC 的 JavaScript Library，為何說它是類似，我們熟知的 MVC Framework 是指，Model、View 和 Control，在開發 Web AP 的時候，分為此三部分可以達到 Loosely Coupled 的效果，好處就是在往後維護時不需要大幅度的更動，何謂大幅度的更動？假如我們的 Web AP 的程式是很混雜的，可能我們只是要改動一個變數值或者是路徑修改，就必須到程式的好幾個地方去逐步修改，這時候可能就會使用Editor 去搜尋 Project 中有 Call 到的地方再一一修改，還蠻麻煩的，另外讓其他人來維護你所寫的 Code，對那個人來講可能會是個惡夢 ! 所以若能將 Web AP 分成 MVC 是有它的道理在。在拜讀了一些 Backbone.js 的介紹後，我有了以下的心得，先從 Model 開始介紹。
Model
Model 簡單來說就是資料儲存的地方，舉例來說，網頁上一些表格內的資料，如：
============================
| Student | Age | Birthday |
============================
| Zack | 20 | 1985/10/10 | --------------> This is a model
------------------------------------------
| Rynn | 18 | 1985/08/31 | --------------> This is a model
------------------------------------------
| Fergie | 22 | 1988/02/25 | --------------> This is a model
------------------------------------------
上面的表格是基本的學生資料 (我隨便亂做的)，每一筆學生的資料可以算一個 Model，非常像是存在資料庫中的每筆 Record 的概念，所以根據觀察後我們可以建立 Backbone 的 Model 雛形，如：
var StudentInfo = Backbone.Model.extend({});
// Zack's info
var zack = new StudentInfo( { student: 'Zack', age: 20, birth: '1985/10/10' } );
// Rynn's info
var rynn = new StudentInfo( { student: 'Rynn', age: 18, birth: '1985/08/31' } );
// Fergie's info
var rynn = new StudentInfo( { student: 'Fergie', age: 22, birth: '1988/02/25' } );
或是用另一種寫法
var StudentInfo = Backbone.Model.extend({});
// Zack's info
StudentInfo.set({ student: 'Zack', age: 20, birth: '1985/10/10' });
// Rynn's info
StudentInfo.set({ student: 'Rynn', age: 18, birth: '1985/08/31' });
// Fergie's info
StudentInfo.set({ student: 'Fergie', age: 22, birth: '1988/02/25' });
以上是建立 Model 資料的方式。
有時候在建立資料的時候，若資料會有 Default 值，我們可以用以下的方法來建立 Default 的部分
var StudentInfo = Backbone.Model.extend({
defaults: {
teacher: 'Backbone'
}
});
當然有 Set 就會有 Get 資料的時候，依照上例若要取 Zack 的名稱
Student1.get('student');
另外我覺得最強大的部分，就是 Event 的部分，Backbone.js 可以算是一個 Event-driven 的 Library，所以可以符合很多 Event 導向的情境，在 Model 的部分，可以 Bind 某個值被 Change 的 Event ，這跟網頁上的 Input text 的 Change event 蠻像的，例如透過修改學生資料的表單 (Form) 來修改 Zack 學生的生日:
// Definition Model
var StudentInfo = Backbone.Model.extend({
defaults: {
teacher: 'Backbone'
}
initialize: function() {
this.bind( 'change:birth', function() {
var val = this.get( 'birth' );alert( val );});
},
setBirth: function( val ) {
this.set( {birth: val} );
}
});
// Initial Model instance
var zack = new StudentInfo({ student: 'Zack', age: 20, birth: '1985/10/10' });
// Change 'Zack' birth value
zack.setBirth( '1984/01/01' );
當更改 Zack 的生日後，會觸發 Model value change 的 Event ，最後會跳出修改生日值的視窗。
最後值得一提的大概就是 Model 的 Validation 的部分，Backbone 的 Model 也很貼心的有加上 validate data value 的部分，例如在輸入年紀的部分至少要 18 歲。
// Definition Model
var StudentInfo = Backbone.Model.extend({
defaults: {
teacher: 'Backbone'
}
initialize: function() {
this.bind( 'change:birth', function() {
var val = this.get( 'birth' );alert( val );});this.bind( 'error', function( model, error ) {alert( error );} );
},
setBirth: function( val ) {
this.set( {birth: val} );
},
setAge: function( val ) {
this.set( {age: val} );
}
validate: function( attributes ) {
if( attributes.age < 18 ) {
return 'Your age must be greater than 18.'
}
}
});
// Initial Model instance
var zack = new StudentInfo({ student: 'Zack', age: 20, birth: '1985/10/10' });
// Change 'Zack' age value
zack.setAge( 15 );
我想 Model 基礎大概就是這幾個了，當然在 Constructor 的部分，應該很容易看出來就是在 initialize 中吧! 只要建立一個 Model instance 時，都會自動去 call 此 function。以上有誤的話，請原諒新手....
全站熱搜
留言列表
