JavaScript 项目实战：从语言特性到调试技巧

引言

从javascript语言本身谈项目实战 dulao5 2005-1-15

随着 Ajax 技术的普及，JavaScript 的重要性日益凸显。Ajax 不仅改变了 Web 软件的架构，还将更多功能移至客户端实现，导致 JavaScript 子项目的规模不断扩大。如何更高效地使用 JavaScript，如何更科学地组织代码，以及如何顺利推进项目进展？本文将结合个人经验，分享一些浅见。

深入理解 JavaScript 语言特性

一、开发人员需要认真学习 JavaScript 语言本身 JavaScript 常被称为“世界上最被误解的语言”，许多开发者仅凭其与 C 或 Java 相似的关键字，便按自己的理解编写代码，而未全面了解其语法。实际上，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 代码的调试较为困难，主要原因如下：

• 一般开发人员对 JavaScript 语言本身不够精通，即前文所述情况。
• Web 项目包含较多因素，复杂性加剧。服务端脚本、模板、HTML、JS 等多个环节都可能增加调试难度。
• 浏览器存在兼容性问题。在某些细节上，IE、Mozilla、Opera 等浏览器可能存在差异。
• 调试工具的缺乏。虽然 Mozilla 的 JSDebugger 非常好用（尽管仍有 Bug，例如 eval 时调试器存在问题），但在其他浏览器环境下，调试工具的表现就不尽如人意。MS 系统自带的 Script Debug 工具调试本地代码尚可，但直接调试网站 JS 代码表现欠佳。Opera 除 JavaScript 控制台外，未找到其他有效的调试工具。

在此推荐几个调试技巧：

1. 使用 Mozilla Firefox 的 JSDebugger 插件。此工具最为经典，在线调试远程站点的 JavaScript 效果极佳。
2. 将问题隔离，建立本地的 HTML 文件和 JS 文件，使用 MS Script Debug 调试工具进行调试。如果 JS 模块较为独立，可以使用此工具。若编写 HTA 项目，该工具则是首选。
3. HTTPWatch。这是一个 IE 下的插件，非常好用，能够监视 IE 中的任何 HTTP 会话，并查看 HTTP 会话的原文。通过此工具，可以了解程序是否与服务器产生会话，以及参数和返回数据的具体内容。
4. 在网页内建立用于调试的 textarea。 可以在网页内建立一个 textarea 来接收想要运行的 JS 语句，然后添加一个按钮，使用 JS 的 eval 函数执行输入的代码。 这种方式非常适合在线调试，当网页出错时，可编写代码输出页面内的对象值。建议配合一些 dump 工具函数使用，效果更佳。 我非常喜欢这种方式，可以随时通过开关打开页面内隐藏的 textarea 进行调试，感觉就像给服务器接上了终端，使用 shell 可以做任何事情:) 函数可以在这里重新定义，可以任意操作界面中的任何元素，调用任何对象的任何函数，输出任何需要的运行时刻值。
5. 使用异常（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 敬上