JS 的應用開發初探

昨天在公司內部做了一個小小的技術分享，就 js 應用開發方面跟大家談了一點自己的心得，最近因為工作關係花在這上面的時間較多也頗有些收穫，寫在這裡備忘。

 

做了三個小demo，本來想做一個類似Gmail的介面出來後來突然發現機器上沒有Office，就乾脆做了一個類PPT示範的小玩意。

 

基於js的應用開發總結起來主要有如下幾點：

 

封裝粒度

常用功能封裝為可重複使用的組件，需要合理選擇組件封裝粒度，粒度過大不便於複用，粒度過小則得不償失。

 

代碼結構規劃
吸收傳統軟體開發的思想將代碼按功能劃分為不同的區塊：初始化，事件綁定，事件邏輯處理，外部Callback調用

 

Js的物件導向

簡單起見可以使用建構函式（其實就是普通的Function）+ prototype定義，雖然看起來不是很優雅不過卻是比較直接的解決辦法。示範代碼中使用了Mootools類庫，相比jQuery來說，這個類庫的物件導向特性使用起來個人感覺更好一些，當然也可以使用它內建的Class申明方式來編寫你自己的Class:

 

Meta.Controls.Pager = new Class({
        Implements: [Events, Options],
        options: {
                pageIndex :1, // 當前頁碼, 從1開始
                size : 10, // 每頁顯示記錄數
                maxButtons : 5,// 顯示的分頁按鈕數量
                showPageSize:true, // 顯示分頁大小選項.
                sizeArray:[10, 25]
        },
        initialize: function (A) {
this.setOptions(A);
this.pageIndex = this.options.pageIndex;
this.size = this.options.size;
this.maxButtons = this.options.maxButtons;
this.itemCount = 0;
this.pageCount =0 ;
        },
                ......
}

這樣的方式也是不錯的選擇，代碼邏輯結構清晰一目瞭然。

 

 

單元測試

通常認為瀏覽器上的js 應用要做單元測試不好做，原因主要是跟DOM關係太緊密，但也不是完全沒有辦法，比如Google的Closure就做得不錯，使用Mock的對象來類比Dom元素並解耦代碼邏輯與Dom對象操作。

 

下面是本次執行個體的代碼，感興趣的童鞋自行下載。