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í)間較多也頗有些收獲，寫(xiě)在這里備忘。
做了三個(gè)小demo，本來(lái)想做一個(gè)類(lèi)似Gmail的界面出來(lái)后來(lái)突然發(fā)現(xiàn)機(jī)器上沒(méi)有Office，就干脆做了一個(gè)類(lèi)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類(lèi)庫(kù)，相比jQuery來(lái)說(shuō)，這個(gè)類(lèi)庫(kù)的面向?qū)ο筇匦允褂闷饋?lái)個(gè)人感覺(jué)更好一些，當(dāng)然也可以使用它自帶的Class申明方式來(lái)編寫(xiě)你自己的Class:
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í)例的代碼，感興趣的童鞋自行下載。
基于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類(lèi)庫(kù)，相比jQuery來(lái)說(shuō)，這個(gè)類(lèi)庫(kù)的面向?qū)ο筇匦允褂闷饋?lái)個(gè)人感覺(jué)更好一些，當(dāng)然也可以使用它自帶的Class申明方式來(lái)編寫(xiě)你自己的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í)例的代碼，感興趣的童鞋自行下載。
您可能感興趣的文章:
- JavaScript+CSS實(shí)現(xiàn)仿Mootools豎排彈性動(dòng)畫(huà)菜單效果
- JS實(shí)現(xiàn)Fisheye效果動(dòng)感放大菜單代碼
- JS+CSS實(shí)現(xiàn)的經(jīng)典圓角下拉菜單效果代碼
- JS實(shí)現(xiàn)帶有3D立體感的銀灰色豎排折疊菜單代碼
- JS實(shí)現(xiàn)的左側(cè)豎向滑動(dòng)菜單效果代碼
- JS+CSS實(shí)現(xiàn)另類(lèi)帶提示效果的豎向?qū)Ш讲藛?/a>
- JS實(shí)現(xiàn)的簡(jiǎn)潔二級(jí)導(dǎo)航菜單雛形效果
- JS+CSS相對(duì)定位實(shí)現(xiàn)的下拉菜單
- JS實(shí)現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集
- JS基于Mootools實(shí)現(xiàn)的個(gè)性菜單效果代碼
相關(guān)文章
本文給大家分享世界上最短的數(shù)字判斷js代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
ionic實(shí)現(xiàn)下拉刷新載入數(shù)據(jù)功能
這篇文章主要為大家詳細(xì)介紹了ionic實(shí)現(xiàn)下拉刷新載入數(shù)據(jù)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了js控制表單不能輸入空格的小例子，有需要的朋友可以參考一下2013-11-11
javascript設(shè)計(jì)模式之解釋器模式詳解
這篇文章主要介紹了javascript設(shè)計(jì)模式之解釋器模式詳解,當(dāng)有一個(gè)語(yǔ)言需要解釋執(zhí)行，并且可以將該語(yǔ)言中的句子表示為一個(gè)抽象語(yǔ)法樹(shù)的時(shí)候，可以考慮使用解釋器模式,需要的朋友可以參考下2014-06-06
Javascript必知必會(huì)(四)js類(lèi)型轉(zhuǎn)換
這篇文章主要介紹了Javascript必知必會(huì)(四)js類(lèi)型轉(zhuǎn)換 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示
這里介紹另外一個(gè)表單驗(yàn)證插件formValidation，這個(gè)插件與前面兩個(gè)插件的最大區(qū)別在于它實(shí)現(xiàn)了個(gè)性化的錯(cuò)誤提示信息，顯示在表單元素右上角類(lèi)似于提示條2009-06-06
微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解
這篇文章主要介紹了微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
使用js實(shí)現(xiàn)按鈕控制文本框加1減1應(yīng)用于小時(shí)+分鐘
正如標(biāo)題所言使用js實(shí)現(xiàn)按鈕控制文本框加1減1，此類(lèi)主要應(yīng)用于小時(shí)+分鐘，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下2013-12-12
Ajax實(shí)現(xiàn)郵箱驗(yàn)證實(shí)例代碼
這篇文章介紹了Ajax實(shí)現(xiàn)郵箱驗(yàn)證的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
JavaScript 動(dòng)態(tài)將數(shù)字金額轉(zhuǎn)化為中文大寫(xiě)金額
JavaScript 將數(shù)字金額轉(zhuǎn)化為中文大寫(xiě)金額的函數(shù)2009-05-05