About Time

相信對 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
    }
}());

在還是 Web 新手時，一點也都不瞭解 Browser 是如何運作的？也沒在管，只覺得反正就是 IDE 開一個新的 Web 專案，就會把一些初始的 Structure 都給搞定了，例如：DTD，Basic HTML Template 等等。然後就會很容易的做出 Performance 不好的 Web。到了現在我還是對 Browser 有一些模糊的地方，但在看完 How browsers work 一文後，清楚許多。
一. Browser 的基本架構
                                       ( 來源: How browsers work 一文 )

  Backbone.js And JavaScript Garbage Collection 此文要說明的是在 Backbone.js 中並沒有特別去清理 Objects，它完全是交給 Developer 和 Browser 的 GC 來處理。首先說明 JavaScript 是 Garbage collected language，若 Object 沒有被 Reference 則能被回收，若有被 Reference 則不回收，所以要讓 JavaScript runtime 回收記憶體就要做 De-reference object 的動作。 De-reference 可以從 JavaScript 的 Variable 生命週期來看，分為 Global scope 和 Function scope(Local scope)： 1. Global scope: 當某個 Variable 宣告在 Global scope 中，它會被 GC 回收的時機為，重新整理頁面、Load page completely from server、關閉瀏覽器或者是關閉分頁，當有觸發到以上所說的狀況時才會自動的被回收，否則 Variable 所指向的 Object 或 Value 會一直存在在記憶體中。 2. Function scope: 當 Variable 宣告在 Function 理，就是 Local variable，而釋放 Local variable 是在執行完 Function 離開後並且此 Function 沒有被 Reference 時，就能被 GC 回收。在這邊要注意的就是，通常沒有被回收就是還有被 Reference，這種狀況通常是用了 JavaScript 的某種技巧，能讓 Local 的東西活久一點，能達到此狀況大致上就如以下所示： Returned values from functions Closures Object attributes and methods Callback functions and DOM events

  前言 jQuery 在 1.5 的版本時，推出了 Deferred Object，我覺得這是很有特色的 utility object，Deferred Object 是由 Promise Object 加上一些 Method 組成的，最常使用在非同步的狀況，與 AJAX call 搭配簡直是絕配。

前言


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。以上有誤的話，請原諒新手....

最近想找一個好用得文字編輯器來寫 Web，之前一直是在 Netbeans 下面開發 Web，Netbeans
開發起來也蠻容易的，但是我覺得最大的缺點就是在它包太多東西了，所以開久了總覺得很
頓。找了許久，看到一堆人使用 Vim，我也學習了一下，發現真得非常強大，自訂性超級
高，Plugin 也是一堆，不過要記得指令也一堆，我還是有點不習慣，後來找到了 Sublime Text
2，還蠻容易上手的，介面也蠻漂亮的，目前就已 Sublime Text 2 來開發吧!

【前言】        小弟於八月底到目前九月，大概有一個多月的時間都專心在找工作，至此已經面試14間公司﹝台達電、宏達電、鴻揚、系微、鼎新、和碩、奇鋐、行動智慧、Career就業情報、和泰汽車、愛歌、宏正自動、優必達、口袋移動﹞，有些是主動投履歷，有些是對方邀約面試，那接下來我就開始分享面試的心得，希望能幫到一些人。