從javascript語言本身談項目實戰
dulao5 2005-1-15
隨著ajax的升溫，javascript越來越得到人們的重視。重要的是，ajax在一定程度上帶來了web軟件架構上的變化，人們把越來越多的功能分配到客戶端實現，javascript子項目規模越來越大。如何更高效的使用javascript，如何更科學的組織javascript，如何更順利的保證項目進展？我想就我的經驗談一點淺見。
一。 開發人員需要認真學習javascript語言本身
由于javascript是“世界上最被誤解的語言”, 大部分人對javascript語法并沒有全面了解過，只是憑借看起來很像c或者java的關鍵字按照自己的理解寫javascript代碼。其實 javascript是一種很獨特的語言，和c++/java有非常大的區別，要想用javascript做大一些的項目，開發人員必須老老實實的學習 javascript的語法。真正掌握了語法后，我們才不會把delete看成釋放內存對象，才不會為到底參數傳遞是值傳遞還是引用傳遞而煩惱。真正理解了javascript的基于原型的OO方式，才可能寫出具有良好架構的javascript程序。
《javascript權威指南》是一本最合適的書，鄭重推薦。另外ECMA262 文檔可以作為參考。網上流行的jscript手冊chm版本使用起來比較方便，不過這是微軟的jscript實現，和標準的javascript略有區別，使用時應該注意上面的注腳信息。關于javascript的原型和OO,網上已經有很多文章介紹了，在此不再多說。
二。 良好的代碼來源于良好的設計
只有設計優良，代碼才會寫的漂亮。現在的javascript子項目已經不是以前web項目中的“邊角料”和散兵游勇了，在較大的ajax項目內， javascript將非常復雜，ajax的異步模型也和以前順序執行的程序設計有所區別。所以建議做javascript前首先做好設計。推薦使用用例驅動的方式，把用例分析清楚，以便全局考慮所有可能的頁面交互過程，繪出頁面內一些對象之間的交互圖，分析一些數據對象的狀態，作出精細的 javascript設計。
三。 使用設計模式，復用其他領域的設計經驗
如果javascript非常復雜，可以考慮使用一些模式。我想大部分做javascript的開發者都不是“javascript科班”出身吧:) 掌握了javascript的語言本質，就可以復用我們在其他領域的經驗了。使用javascript框架或者ajax框架，使用單例模式做一個全局的數據緩沖池，或者使用觀察者模式把界面對象和數據對象分離，使用命令模式實現用戶的操作隊列等等。
四。 調試代碼的技巧
javascript的代碼不太好調試，這是由于：
- 一般的開發人員對javascript語言本身不太精通。也就是上面提到的。
- web項目包含較多的因素，復雜性加劇。服務端腳本、模板、html、js等很多環節都可能增加調試難度。
- 瀏覽器存在兼容性問題。有可能在一個細節問題上IE、Mozilla、opera等瀏覽器都有差異。
- 工具的缺乏。雖然mozilla的jsdebugger非常好用（還有bug，比如eval時調試器有些問題），但是其他瀏覽器環境下調試工具就不怎么樣了。ms系統自帶的script debug工具調試本地代碼還可以，直接調試網站js代碼表現欠佳。opera除了javascript控制臺外我沒有找到其他調試工具。
在此我推薦幾個調試技巧：
- 使用Mozilla firefox的jsdebugger插件。這個我不再多說了，最經典的js調試工具。在線調試遠程站點的javascript效果非常棒。
- 把問題隔離，建立本地的html文件和js文件，使用ms script debug調試工具來調試。如果js模塊比較獨立，可以使用這個工具的。如果寫hta的項目，這個工具當然是首選了。
- httpWatch 這是一個ie下的插件，非常好用，能夠監視ie中的任何http會話，并能夠看到http會話的原文。可以通過這個工具了解你的程序有沒有和服務器產生會話，參數＆返回的數據到底是什么。
- 在網頁內建立用于調試的textarea
可以在網頁內建立一個textarea來接受你想運行的js語句，然后加一個按鈕使用js的eval函數執行你輸入的代碼。
這種方式非常適合在線調試，網頁出錯后寫代碼輸出頁面內的對象值。建議寫一些dump工具函數配合使用，效果更佳。
我非常喜歡這種方式，可以隨時使用開關打開頁面內隱藏的textarea進行調試，感覺很像給一臺服務器接上了終端，然后使用shell可以做任何事情:) 函數可以在這里重新定義，可以任意操作界面中的任何元素，調用任何對象的任何函數，輸出任何你需要的運行時刻值。
- 使用異常(exception)和斷言(assert)
使用try{}catch(e){}結構不光可以屏蔽出錯信息，讓界面更友好。我們的程序可以使用異常、拋出異常來構建一種更好的出錯處理機制。
有這樣一個故事，我在使用string.localeCompare函數時隨手寫了這樣的代碼：
var iRe = str1.localeCompare(str2);
switch(iRe){
0: return ....
1: return ....
-1:return ....
defalut:throw "error:localeCompare return other value"
}
寫完就忘了，沒想到我的同事在linux下使用firefox時，異常被拋出了，然后我們得知：linux firefox下localeCompare返回的不只是0/1/-1,而是返回一個具體值.
這個異常拋出有效的檢測出了代碼的不完美。
firefox下的異常dump后能得到較為詳細的調用棧信息，這一點非常好。IE的異常信息沒有這么詳細。
異常和斷言也可以結合成為一個非常有效的調試工具。
斷言(assert)是在其他語言中的一種很有效的調試工具，常常以這種形式出現：
assert(<條件>);
在程序處于debug狀態，當條件為假時，系統中止運行并報告這個斷言。由于斷言是我們自己定義的，所以我們可以很容易的判斷出出錯的地方，進而找到bug所在。
javascript語言沒有提供宏，也沒有提供assert，我們可以這樣模擬
if(_is_debug) assert = function(expression , strLable){
if( !expression ) throw Error(strLable);
}
else assert = function(){};//_is_debug是一個全局變量
這樣可以實現在發生"不可能的事情"的時候，讓程序在調試模式下拋出異常，在發布版本中不作理會。
可以這樣輸出當前棧的調用信息,彌補剛才提到的IE中異常對象沒有棧信息的缺陷:
function callStackInfo(){
var s="",line="";
var cer=arguments.callee.caller;
while(cer){
var sf=cer.toString();
s+=line+sf.substring(sf.indexOf('function'),sf.indexOf('{'))+"/n";
line=".."+line;
cer=cer.caller;
}
return s;
}
本文只就javascript在web開發，特別是在ajax方面的開發做了一些討論，主要在于管窺如何更好的使用“純javascript”。web開發還有很多其他方面，比如xml和Dom等實際上和javascript息息相關，但是本文沒有涉及，還請見諒。歡迎各位朋友就我的討論多提意見。
--
-------------------------------------------------------------------
dulao5 敬上
