快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

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

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

您可能感興趣的文章: