JS 的應用開發(fā)初探(mootools)
更新時間：2009年12月19日 01:17:47 作者：
昨天在公司內部做了一個小小的技術分享，就 js 應用開發(fā)方面跟大家談了一點自己的心得，最近因為工作關系花在這上面的時間較多也頗有些收獲，寫在這里備忘。
做了三個小demo，本來想做一個類似Gmail的界面出來后來突然發(fā)現(xiàn)機器上沒有Office，就干脆做了一個類PPT演示的小玩意。
基于js的應用開發(fā)總結起來主要有如下幾點：
封裝粒度
常用功能封裝為可重復使用的組件，需要合理選擇組件封裝粒度，粒度過大不便于復用，粒度過小則得不償失。
代碼結構規(guī)劃
吸收傳統(tǒng)軟件開發(fā)的思想將代碼按功能劃分為不同的區(qū)塊：初始化，事件綁定，事件邏輯處理，外部Callback調用
Js的面向對象
簡單起見可以使用構造函數(shù)（其實就是普通的Function）+ prototype定義，雖然看起來不是很優(yōu)雅不過卻是比較直接的解決辦法。演示代碼中使用了Mootools類庫，相比jQuery來說，這個類庫的面向對象特性使用起來個人感覺更好一些，當然也可以使用它自帶的Class申明方式來編寫你自己的Class:
Meta.Controls.Pager = new Class({
Implements: [Events, Options],
options: {
pageIndex :1, // 當前頁碼, 從1開始
size : 10, // 每頁顯示記錄數(shù)
maxButtons : 5,// 顯示的分頁按鈕數(shù)量
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對象操作。
下面是本次實例的代碼，感興趣的童鞋自行下載。
基于js的應用開發(fā)總結起來主要有如下幾點：
封裝粒度
常用功能封裝為可重復使用的組件，需要合理選擇組件封裝粒度，粒度過大不便于復用，粒度過小則得不償失。
代碼結構規(guī)劃
吸收傳統(tǒng)軟件開發(fā)的思想將代碼按功能劃分為不同的區(qū)塊：初始化，事件綁定，事件邏輯處理，外部Callback調用
Js的面向對象
簡單起見可以使用構造函數(shù)（其實就是普通的Function）+ prototype定義，雖然看起來不是很優(yōu)雅不過卻是比較直接的解決辦法。演示代碼中使用了Mootools類庫，相比jQuery來說，這個類庫的面向對象特性使用起來個人感覺更好一些，當然也可以使用它自帶的Class申明方式來編寫你自己的Class:
復制代碼 代碼如下:
Meta.Controls.Pager = new Class({
Implements: [Events, Options],
options: {
pageIndex :1, // 當前頁碼, 從1開始
size : 10, // 每頁顯示記錄數(shù)
maxButtons : 5,// 顯示的分頁按鈕數(shù)量
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對象操作。
下面是本次實例的代碼，感興趣的童鞋自行下載。
相關文章
本文給大家分享世界上最短的數(shù)字判斷js代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了ionic實現(xiàn)下拉刷新載入數(shù)據功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了js控制表單不能輸入空格的小例子，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了javascript設計模式之解釋器模式詳解,當有一個語言需要解釋執(zhí)行，并且可以將該語言中的句子表示為一個抽象語法樹的時候，可以考慮使用解釋器模式,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了Javascript必知必會(四)js類型轉換 的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
jQuery 表單驗證插件formValidation實現(xiàn)個性化錯誤提示
這里介紹另外一個表單驗證插件formValidation，這個插件與前面兩個插件的最大區(qū)別在于它實現(xiàn)了個性化的錯誤提示信息，顯示在表單元素右上角類似于提示條2009-06-06
微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解
這篇文章主要介紹了微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
使用js實現(xiàn)按鈕控制文本框加1減1應用于小時+分鐘
正如標題所言使用js實現(xiàn)按鈕控制文本框加1減1，此類主要應用于小時+分鐘，下面有個不錯的示例，喜歡的朋友可以參考下2013-12-12
這篇文章介紹了Ajax實現(xiàn)郵箱驗證的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
JavaScript 動態(tài)將數(shù)字金額轉化為中文大寫金額
JavaScript 將數(shù)字金額轉化為中文大寫金額的函數(shù)2009-05-05