JS 的應用開發初探(mootools)

2024-05-06 14:12:14

字體：大中小

來源：轉載

供稿：網友

做了三個小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對象操作。
下面是本次實例的代碼，感興趣的童鞋自行下載。

上一篇：JavaScript 未知高度元素垂直居中實現代碼

下一篇：利用jQuery的$.event.fix函數統一瀏覽器event事件處理