快捷導(dǎo)航

JS 的應(yīng)用開發(fā)初探(mootools)

更新時間：2009年12月19日 01:17:47 作者：

昨天在公司內(nèi)部做了一個小小的技術(shù)分享，就 js 應(yīng)用開發(fā)方面跟大家談了一點(diǎn)自己的心得，最近因?yàn)楣ぷ麝P(guān)系花在這上面的時間較多也頗有些收獲，寫在這里備忘。

做了三個小demo，本來想做一個類似Gmail的界面出來后來突然發(fā)現(xiàn)機(jī)器上沒有Office，就干脆做了一個類PPT演示的小玩意。

基于js的應(yīng)用開發(fā)總結(jié)起來主要有如下幾點(diǎn)：

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

代碼結(jié)構(gòu)規(guī)劃
吸收傳統(tǒng)軟件開發(fā)的思想將代碼按功能劃分為不同的區(qū)塊：初始化，事件綁定，事件邏輯處理，外部Callback調(diào)用

Js的面向?qū)ο?
簡單起見可以使用構(gòu)造函數(shù)（其實(shí)就是普通的Function）+ prototype定義，雖然看起來不是很優(yōu)雅不過卻是比較直接的解決辦法。演示代碼中使用了Mootools類庫，相比jQuery來說，這個類庫的面向?qū)ο筇匦允褂闷饋韨€人感覺更好一些，當(dāng)然也可以使用它自帶的Class申明方式來編寫你自己的Class:

復(fù)制代碼代碼如下:

 
Meta.Controls.Pager = new Class({ 
Implements: [Events, Options], 
options: { 
pageIndex :1, // 當(dāng)前頁碼, 從1開始 
size : 10, // 每頁顯示記錄數(shù) 
maxButtons : 5,// 顯示的分頁按鈕數(shù)量 
showPageSize:true, // 顯示分頁大小選項(xiàng). 
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 ; 
}, 
...... 
} 

這樣的方式也是不錯的選擇，代碼邏輯結(jié)構(gòu)清晰一目了然。

單元測試
通常認(rèn)為瀏覽器上的js 應(yīng)用要做單元測試不好做，原因主要是跟DOM關(guān)系太緊密，但也不是完全沒有辦法，比如Google的Closure就做得不錯，使用Mock的對象來模擬Dom元素并解耦代碼邏輯與Dom對象操作。
下面是本次實(shí)例的代碼，感興趣的童鞋自行下載。

您可能感興趣的文章: