探求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 id="debugInfo "></div>，使用这个div显示程序运行时的信息。

2)提供一个输出过程性调试信息的方法：

1. function appendDebug(info,color)

2. ...{

3. /**//*if(appendDebug.arguments.length < 2)

4. {

5. color = "black";

6. }

7. document.all("debugInfo").innerHTML += 
"<br><font color="+color+">"+info+"</font>";

8. */9. }

在需要调试时，将方法中的代码注释代码打开。



3)在程序的调试点，调用appendDebug(info)将调试性的过程信息输出，如下面这段示例的代码：

function fun1(param1,param2)

...{

…

appendDebug("fun1入参param1值为"+ param1,"blue");

…

appendDebug("fun1入参param2值为"+ param2,"yellow");

…

} 

这样，程序运行时的过程性信息就可以用不同的颜色记录下来以资调试之用。



在缺少调试器的时候，这个土制炉灶确实帮了我不少的忙，代码行数近2000行的“下拉框智能诱导控件”和“多功能日历控件”的JavaScript程序就是通过此方法完成调试的。由于目前已有的JavaScript调试工具还不够强大，这个方法依然有指导意义。