探求JavaScript開發工具(1)

1、引子 

Java，C#等各種進階語句的開發工具琳琅滿目，爭放異彩。但作為AJAX的主角的JavaScript語言，配套的開發開具方面總保持著不相稱的沉寂。缺乏良好開發工具的支援，編寫JavaScript程式，特別是超過500行以上的JavaScript程式變得深富挑戰——沒有代碼誘導功能，沒有即時錯誤檢查，沒有斷點跟蹤調試…，開發JavaScript代碼有時就象在黑暗的隧道裡靠觸覺摸索著前行。在代碼中不小心增加了一個多餘的“(”或“{”，整段代碼可能馬上象一堵猝然倒塌的城牆，在IE中報出的錯誤往往似是而非，甚至和真實原因往往相差十萬八千裡，讓人如墮五裡霧中。有事者引用柳傳志的句概括編寫JavaScript程式的感受：戰戰兢兢，如履薄冰。 

筆者曾經使用低級的文本編輯工具開發JavaScript程式，無數次地掉入調試的地獄中，深味其中苦澀和艱辛。幸好現在終於找到了許多好的開發工具，走出了黑暗，迎來了光明。

2、刀耕火種

早期曾有一段時間使用Notepad開發JavaScript程式：寫一段程式需要不停地在JavaScript開發手冊和編碼視窗之間來回切換；編寫和調試需要時刻同步進行：編寫了幾行代碼後，就開始測試了，用alert()打出結果，直到保證當前的成果正確後，才能繼續往下寫幾行，然後又重新使用alert()檢查之，周而返複，亦步亦趨，摸索前進。

在Notepad中編寫JavaScript代碼，new,if,else等這些大名鼎鼎的“關鍵人物”已經“泯然眾人矣”——和變數名、常量、函數沒有任何區別。所以，當代碼量逐漸膨脹後大約超過200行），代碼結構組織，上下文關聯查看，前後邏輯閱讀以及代碼重構都變得困難起來，漸漸讓人體力不支。

這種簡單原始的刀耕火種式的編程讓我歎謂於“公欲善其事，必先利其器”教誨之深刻，同時也對先人僅使用粗陋工具就創造出無數偉大奇蹟的壯舉充滿敬意。

3、破牛車

比起Notepad，使用Editplus，UltraEdit，Editeur等的編輯工具就舒服多了。因為這些編輯工具可高亮顯示語言關鍵字，並用不同的顏色顯示對象，常量等不同語義元素，同時這些工具對程式碼結構也有一定的感知，比如當游標在一個代碼塊中換行時，游標會自動縮排，圖 1是EditPlus編輯JavaScript程式的：

圖1：EditPlus編輯JavaScript程式

此外，這些工具一般都具強大的查尋、替換，塊操作等編輯功能，非Notepad能同日而語。所以諸如EditPlus這些雖不完美的破牛車已經把我們從完全人力勞作的噩夢中解救出來。直到現在，大部分的開發人員應該還都是使用諸如此類編輯工具，筆者大部分業已完成的JavaScript程式也大多都在Editplus中完成。

雖然在EditPlus型的編輯工具中，代碼結構編排、上下文尋找等工作變得輕鬆了許多，但它依然沒有代碼誘導的功能，更遑論程式斷點跟蹤調試了。在這裡，alert()函數依然扮演著調試工作的賢才幹將。你當然可以隨意在需要關注的地方加上alert()語句以查看運行時的資訊，這種有如埋地雷的工作並不辛苦，但拆卸和調整的工作卻是繁複而費力的，況且如雨點般蹦出來的alert資訊也足以將一個正常人搞瘋。

由於alert只能查看單點程式啟動並執行情況，無法記錄程式啟動並執行過程資訊，所以當程式超過400，500行時，調試工作將變得舉步為艱。有鑒於此，筆者曾經仿照Java中Log4J的思想開發了一個內嵌在程式中的調試器。其思想大概是這樣的：

1)將JavaScript嵌到html頁面，並在頁面中提供一個，使用這個div顯示程式運行時的資訊。

2)提供一個輸出過程性調試資訊的方法：

1. function appendDebug(info,color) 2. ...{ 3. /**//*if(appendDebug.arguments.length < 2) 4. { 5. color = "black"; 6. } 7. document.all("debugInfo").innerHTML += " "+info+""; 8. */9. }

在需要調試時，將方法中的代碼注釋代碼開啟。

3)在程式的調試驗，調用appendDebug(info)將調試性的過程資訊輸出，如下面這段樣本的代碼：

function fun1(param1,param2) ...{ … appendDebug("fun1入參param1值為"+ param1,"blue"); … appendDebug("fun1入參param2值為"+ param2,"yellow"); … }

這樣，程式運行時的過程性資訊就可以用不同的顏色記錄下來以資調試之用。

在缺少調試器的時候，這個土製爐灶確實幫了我不少的忙，程式碼數近2000行的“下拉框智能誘導控制項”和“多功能日曆控制項”的JavaScript程式就是通過此方法完成調試的。由於目前已有的JavaScript調試工具還不夠強大，這個方法依然有指導意義。