About Time

 
時常看 Addy Osmani 的文章，這次他分享了在 Web development 上需要的一些知識，主要著重在 JavaScript 的 Performance 和 Memory usage。
在 Memory 的部分:

相信對 JavaScript 夠熟的人都知道什麼是基本的 Module Pattern，雖然小弟我很少利用此基本的 Module Pattern 去建立 Web (遮臉...)，因為有一堆 Framework 都提供了好用的 Module Pattern Design，不過還是稍為紀錄一下一個 Module 基本的樣子，對於 Module 建立的觀念頗有幫助。
 
// Check Module Namespace
MYAPP.namespace( 'MYAPP.utilities.array' );

MYAPP.utilities.array = (function() {
    // Module Dependency Declaration
    var uobj = MYAPP.utilities.object,
        ulang = MYAPP.utilities.lang;
    
    // Module Private Property
    var _array_string = "[object.Array]",
        _ops = Object.prototype.toString;
    
    // Module Private Method
    var _isArray = function( a ) {
        return _ops.call( a ) === array_string;
    };
    
    // Module one time initial procedure (optional)
    
    // Module Public API
    return {
        isArray: _isArray
    }
}());

前言


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 infovar zack = new StudentInfo( { student: 'Zack', age: 20, birth: '1985/10/10' } );
// Rynn's infovar rynn = new StudentInfo( { student: 'Rynn', age: 18, birth: '1985/08/31' } );
// Fergie's infovar rynn = new StudentInfo( { student: 'Fergie', age: 22, birth: '1988/02/25' } );
或是用另一種寫法
var StudentInfo = Backbone.Model.extend({});// Zack's infoStudentInfo.set({ student: 'Zack', age: 20, birth: '1985/10/10' });
// Rynn's infoStudentInfo.set({ student: 'Rynn', age: 18, birth: '1985/08/31' });
// Fergie's infoStudentInfo.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 Modelvar StudentInfo = Backbone.Model.extend({
     defaults: {          teacher: 'Backbone'     }
     initialize: function() {          this.bind( 'change:birth', function() {     },
    setBirth: function( val ) {          this.set( {birth: val} );     }
});
// Initial Model instancevar zack = new StudentInfo({ student: 'Zack', age: 20, birth: '1985/10/10' });
// Change 'Zack' birth valuezack.setBirth( '1984/01/01' );
當更改 Zack 的生日後，會觸發 Model value change 的 Event ，最後會跳出修改生日值的視窗。
最後值得一提的大概就是 Model 的 Validation 的部分，Backbone 的 Model 也很貼心的有加上 validate data value 的部分，例如在輸入年紀的部分至少要 18 歲。

     var val = this.get( 'birth' );

     alert( val );

});

this.bind( 'error', function( model, error ) {

     alert( error );

} );

// Initial Model instancevar zack = new StudentInfo({ student: 'Zack', age: 20, birth: '1985/10/10' });
// Change 'Zack' age valuezack.setAge( 15 );

我想 Model 基礎大概就是這幾個了，當然在 Constructor 的部分，應該很容易看出來就是在 initialize 中吧! 只要建立一個 Model instance 時，都會自動去 call 此 function。以上有誤的話，請原諒新手....