网页技巧：妥善处理JavaScript中的错误

2008-02-23 08:08:43来源：互联网阅读 ()

不管你的技术水平如何，错误或异常是应用程序开发者生活的一部分。Web开发的不连贯性留下了许多错误能够发生并确实已经发生的地方。解决的关键在于处理任何不可预见的（或可预见的错误），来控制用户的体验。利用JavaScript，就有多种技术和语言特色可以用来正确地解决任何问题。

事事检查

在开始之前检查一切是一个好的编程习惯，也就是说，你应该在利用它们之前，检查对象、方法调用等的有效性。这样就避免了与未实例化对象或对不存在的方法调用有关的错误。列表A在使用对象（变量和字段）之前会对它们进行检查。在使用字段对象之前，该脚本保证它们为有效或非空字段。

列表A

<html>
<head>
<title>JS Test</title>
<script type="text/javascript">
function validate() {
var doc = document.forms[0];
var flag = true;
if (doc != null) {
if (doc.fullName != null) {
if (doc.fullName.value == '') {
flag = false;
}
} else {
flag = false;
}
if (doc.contactNumber != null) {
if (doc.contactNumber.value == '') {
flag = false;
}
} else {
flag = false;
}
if (flag) {
alert('Validation successful, document will be submitted.');
doc.submit();
} else {
alert('Enter values before submitting.');
} }
return 0; }
</script>
</head>
<body>
<form id="frmTest">
Name: <input id="fullName" name="fullName" type="text"><br>
Address: <input id="contactNumber" name="contactNumber" type="text"><br>
<input type="button" value="Submit" onclick="validate();">
</form>
</body>
</html>

你并不需要实际地检查有效性——你可以简单地在if 语句中使用一个对象，如果它不是一个无效对象的话，所求得的值就为真。列表B就用了这种句法，同时也用到了getElementByID方法。它用了一个if语句来保证在继续之前getElementByID方法是被支持的（存在）。

列表B

<html><head>
<title>JS Test</title>
<script type="text/javascript">
function validate() {
var doc = document.forms[0];
var flag = true;
if (doc != null) {
if (doc.getElementById) {
if (doc.getElementById("fullName")) {
if (doc.fullName.value == '') {
flag = false;
}
} else {
flag = false;
}
if (doc.getElementById("contactNumber")) {
if (doc.contactNumber.value == '') {
flag = false;
}
} else {
flag = false;
}
if (flag) {
alert('Validation successful, document will be submitted.');
doc.submit()
} else {
alert('Enter values before submitting.');
} }
return 0; }
</script>
</head>
<body>
<form id="frmTest">
Name: <input id="fullName" name="fullName" type="text"><br>
Address: <input id="contactNumber" name="contactNumber" type="text"><br>
<input type="button" value="Submit" onclick="validate();">
</form>
</body>
</html>

虽然在使用对象之前检查它们是一个好方法，但是有时候还是会有错误出现。在这些实例中，JavaScript语言使得发现错误变得简单，从而能够继续下去。

发现错误

和Java、C#等其他语言相类似，JavaScript中包括了try／catch／finally语句。一个try语句包含了一组代码，在这组代码中，像运行时间错误这样的异常可能会发生。catch子句概述了怎样处理错误，finally块中包括了始终被执行的代码。

一般来说，代码设法执行一组代码，如果没有执行成功的话，支配权就传到catch块。如果没有错误发生，就跳过catch块。finally块在try和catch块完毕后执行。它的句法如下：

try
{
// code
}
catch
{
// code
}
finally
{
// code
}

catch和finally块是可选的，但是如果没有catch块是没有意义的。仔细考虑列表C，它示范了try／catch／finally的用法。从被引用的字段在表格中不存在开始，错误就发生了。

列表C

<html>
<head>
<title>JS Test</title>
<script type="text/javascript">
function doIt() {
if (document.forms[0].firstName.value == '') {
// do something
}
return 0; }
</script>
</head>
<body>
<form id="frmTest">
Name: <input id="fullName" name="fullName" type="text"><br>
Address: <input id="contactNumber" name="contactNumber" type="text"><br>
<input type="button" value="Submit" onclick="doIt();">
</form>
</body>
</html>

一个try／catch块不能避免错误，但是它能够很得体地处理错误，这样用户就不会面对晦涩的浏览器出错信息。观察列表D。

列表D

<html>
<head>
<title>JS Test</title>
<script type="text/javascript">
function doIt() {
try {
if (document.forms[0].firstName.value == '') {
// do something
}
} catch(e) {
document.write("An unexpected error has occurred.<br><br>");
document.write("Please contact the administrator.<br><br>");
document.write(e.message);
} finally {
document.forms[0].submit();
}
return 0; }
</script></head>
<body>
<form id="frmTest">
Name: <input id="fullName" name="fullName" type="text"><br>