探求JavaScript 开发工具

    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调试工具还不够强大，这个方法依然有指导意义。

4、这把刀剑比较锋利

我们常会听到这样的故事：一些神秘的大师闭门谢客七七四十九天，用Notepad和命令行编译器编写出容量小于10k，却具有三维效果，播放时间长达十几分钟以上的超酷汇编或C 的程序。这种超酷程序我确实见到过不少，惊羡于大师们的鬼斧神工，折服于高手们的聪明才智。但对于大师们这种只用刀耕火种、肩挑背扛创建出科隆大教堂般奇迹的工作方式深不以为然。荀子在2000年前就说过：君子善假于物，为什么要弃Visual C++，C++Builder这些高智能的开发工具不用，而暴虎冯河，赤手伏虎呢？我想，大抵是为了凸显英雄人物的传奇和伟大而特意粗化他手中的工具罢了，这和某某国领导人用石头打下一架飞机的报道有异曲同工之效。

 

将你的才智挥洒在程序的创意里，而将代码的编写、布局这些没有创意的工作交由工具负责，才可实现效率的最大化，毕竟手里有猎枪就不要用双脚去撵兔子，有得躺的时候，不必站着。对于编写JavaScript程序，Antechinus和Eclipse 中的JavaScript插件都是把锋芒不错的刀剑。

4.1 Antechinus

我一直希望找到一个带代码诱导输入的JavaScript编辑器，奈何总是芳踪难觅。某年某月的某一天，在某个的Blog上，我看到了一篇有关JavaScript开发工具的介绍，眼睛一亮——目标终于出现了！她就是Antechinus，让我们来一睹她的芳容：

点击查看大图

 

图2：Antechinus 开发界面

乍一看，就可以感觉到，这已经是一个有模有样的JavaScript IDE了，表现在以下几个方面：

1) 代码诱导输入功能，对JavaScript普通对象（如Date，String，Array等）和DOM对象均可诱导输入。

2) 可以设置书签，方便从程序的其他地方返回。

3) 提供一个程序结构面板，将程序中的方法名列在面板中，方便定位到方法的定义处。

4) 提供调用外部IE运行程序的快捷按钮（当然这个JavaScript程序必需是内嵌在HTML文件中的程序，而非单独的JavaScript程序文件）。

但它依旧不具断点跟踪，单行执行等调试功能，称之为JavaScript IDE还不太适合，但比对破牛车的EditPlus，Antechinus已经可以称得上是一辆装备不错的驷驾了。

4.2、Eclipse JavaScript插件

有一些比较好用的JavaScript 的Eclipse插件也提供了类似的代码诱导输入功能，比较著名的是interaktonline所提供的JSEclipse和MyEclipse所附带的JavaScript Editor。

JSEclipse插件的支持明显更全面一些，尤其是它还附带了一个内容全面的JavaScript的索引帮助文件，方便开发者在Eclipse中检索查看JavaScript的开发帮助文档。JSEclipse编辑器界面如图 3所示：

点击查看大图

 

图3：JSEclipse编辑器界面

JSEclipse的代码诱导列表中的方法和属性附有所适用浏览器及浏览器版本的信息，这对于开发跨浏览器的JavaScript程序特别有用。

MyEclipse附带的JavaScript Editor编辑器界面如图 4所示：

点击查看大图

 

图4：MyEclipse的JavaScript Editor

MyEclipse JavaScript Editor 的代码诱导列表中的方法和属于也带有适用浏览器的信息，不过它没有附加适用浏览器版本号的信息，此外它仅支持对DOM对象进行代码诱导输入，而对诸如Date，String等标准的JavaScript对象却不能直接诱导。

由于JSEclipse是一款比较专业的JavaScript编辑工具，定位也很清晰，将来可能还会提供调试的功能，发展前景看好。关于JSEclipse的安装帮助信息参见：http://www.interaktonline.com/Products/Eclipse/JSEclipse/Installation-Update/。

真命天子

Visual Studio .NET其实是开发JavaScript程序最优秀的IDE，对JavaScript的代码诱导能力最强，而且还可以进行断点跟踪调试调试，但毕竟有些开发者不想为了开发JavaScript去安装一个体积庞大的Visual Studio .NET。

有一个和Visual Studio .NET在开发JavaScript的表现上不差上下的开发工具那就是Word所提供的Microsoft 脚本编辑器。我们一直和它擦肩而过，也许是和我们离得太近了——近得让我们一直忽略了它的存在。

5.1、界面及功能

你可以在Word中通过：工具→宏(M)→Microsoft 脚本编辑器一睹这位真命天子的尊容。

点击查看大图

图5：Microsoft 脚本编辑器

Microsoft 脚本编辑器使我们几乎可以象开发其他成熟语言（如C++,Java等）的程序一样开发JavaScript程序，简要列述它的功能：

1) 代码诱导功能，不但可以对所有JavaScript对象，DOM对象进行诱导，还可以对HTML的标签进行诱导，由于JavaScript常常和HTML焦孟相伴，这种同时对两者都进行代码诱导的编辑器使开发的工作变成更加方便快捷，行云流水。此外，对于内嵌在HTML中的JavaScript程序，可以通过菜单：视图→只显示脚本 隐去HTML代码而只显示JavaScript程序，以便得到一个更加清晰的工作窗口。

2) 书签功能，这个功能使得光标在代码体的不同地方进行切换变得方便快速。

3) 其他编辑器所不具备的独一无二的调试功能，那就是断点跟踪调试——我们梦寐以求的JavaScript调试功能终于轻解罗衫了。有了它，我们开发JavaScript程序不再是盲人摸象，编写效率和代码质量将得到提高。

5.2 安装调试功能

默认情况下Word没有安装Microsoft 脚本编辑器，当你点击：工具→宏(M)→Microsoft 脚本编辑器时，自动弹出安装向导，需要播入Office光盘完成安装后方可使用。安装Microsoft 脚本编辑器后，其调试功能默认情况下没有安装，如法炮制安装这项功能，安装完成后，其调试功能菜单才可用。

开启调试功能

在Microsoft 脚本编辑器中并不能运行JavaScript程序，它借助外部IE运行JavaScript程序，但默认情况下，IE的脚本调试功能是禁用的，这样Microsoft 脚本编辑器就无法获取脚本在IE中运行的情况，因此也就无法进行调试，所以要进行JavaScript的调试必须先将IE中打开脚本调试的功能：

在IE 中：工具→Internet 选项...→高级，打开Internet选项对话框，在“设置”列表中找到“禁用脚本调试（Internet Explorer）”的选项，去除前面复选框的对勾，如图 6所示：

图6：起用Internet脚本调试功能

开启IE的脚本调试功能后，返回Microsoft 脚本编辑器，在脚本中放置一些断点，点击工具栏上的 按键，Microsoft 脚本编辑器会调用外部的IE打开脚本，当脚本被激活运行时，返回到编辑器中即可断点跟踪调试，如图 7所示：

 

图7：断点跟踪调试

按F11或工具栏上的按钮进行单步跟踪调试，要查看变量的运行期值，只需选择目标变量的签名，按Ctrl+Alt+Q弹出快速监视窗口，查看变量的当前值，如图 8所示：

•  

图8：查看运行期变量值

这种查看运行期变量值的方式对于习惯了使用JBuilder，Eclipse的开发者来说也许觉得比较麻烦——Microsoft脚本编辑器不能通过鼠标移上去，自动显示变量值，这对应高级开发工具来说是习以为常的调试功能。如果你期望这样的调试效果，那就得使用Visual Studio.NET所提供的脚本调试器。

如果你安装了Visual Studio .NET，并激活了IE的脚本调试功能，当运行一个带错误的JavaScript网页，IE将弹出如图 9所示的调试器选择窗口：

图9：调试器选择窗口

点击确定后，Visual Studio .NET实时调试环境启动，移动鼠标到JavaScript程序的变量上，其运行期的值将马上显示出来，如所示：

点击查看大图

 

图10：Visual Studio .NET所提供的脚本调试工具

6、结束语

到目前为止，还没有一款开发工具，可以使我们象开发Java，C++程序一样开发JavaScript程序，但除了不能在开发工具内部运行JavaScript程序外，Word所提供的脚本编辑器在其他方面已经表现得非常出色了。而且由于几乎每个开发者都在自己的机器上安装了Word，所以去搭建这样一个JavaScript开发环境可谓手到擒来。因此到目前为此，如果你需要编写一个逻辑复杂的JavaScript程序，使用Word的脚本编辑器是比较理想的，当然如果仅是写几行表单校验这样通俗简单的JavaScript代码，直接在Dreamweaver 或在EditPlus类型的编辑工具中就可以了。

站长统计