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

javascript|错误|技巧|网页

不管你的技术水平如何,错误或异常是应用程序开发者生活的一部分。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" >
</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" >
</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" >
</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>
Address: <input id="contactNumber" name="contactNumber" type="text"><br>
<input type="button" value="Submit" >
</form></body></html>

它提示了以下信息,但是finally块保证了窗体的提交——不管有什么错误发生。

An unexpected error has occurred.
Please contact the administrator.
'document.forms.0.firstName.value' is null or not an object

单个catch块可以处理所有问题,但是多个catch语句可以被用来处理特定的错误。这个问题在下个部分会涉及到。

用try/catch语句可以很容易地处理不可预见的错误。在某些情况下,可能你想以不同的方式处理错误,JavaScript提供了throw语句。它的句法是很基本的——throw后面紧跟要发生的异常。这就使得你能够定义和引发自定义的异常。列表E中的代码创建了一个缺失值的异常,并且它是生成的。

列表E

<html><head>
<title>JS Test</title>
<script type="text/javascript">
function MissingValueException (errMsg) {
this.message = errMsg;
this.name="MissingValueException";
}
function doIt() {
try {
if (document.forms[0].fullName.value == '') {
noNameException = new MissingValueException("First name is missing.");
throw noNameException;
} else {
document.forms[0].submit();
}
} catch(e) {
document.write("An unexpected error has occurred.<br>");
document.write("Please contact the administrator.<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>
Address: <input id="contactNumber" name="contactNumber" type="text"><br>
<input type="button" value="Submit" >
</form></body></html>

它将会显示以下信息(如果在字段中没有值输入的话):

An unexpected error has occurred.
Please contact the administrator.
First name is missing.

除此之外,你还可以用运算符instanceof来确定异常的类型,从而做出反应。列表F中的代码会检查异常对象的类型并相应地显示有关数据。

列表F

<html>
<head>
<title>JS Test</title>
<script type="text/javascript">
function MissingValueException (errMsg) {
this.message = errMsg;
this.name="MissingValueException";
}
function doIt() {
try {
if (document.forms[0].fullName.value == '') {
noNameException = new MissingValueException("First name is missing.");
throw noNameException;
}
} catch(e) {
if (e instanceofMissingValueException) {
document.write(e.message + "<br>");
document.write("Please contact the administrator.<br><br>");
} else {
document.write("An unexpected error has occurred.<br>");
document.write("Please contact the administrator.<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>
Address: <input id="contactNumber" name="contactNumber" type="text"><br>
<input type="button" value="Submit" >
</form></body></html>

运算符instanceof可以同标准错误一起使用。JavaScript定义了以下标准的JavaScript错误类型:

EvalError:表明全局的eval函数使用错误。
RangeError:说明一个数值超过了所允许的值的范围。
ReferenceError:发现了一个非法的引用。
SyntaxError:发生了一个句法分析错误。
TypeError:一个操作数的实际类型与所预期的类型不同。
URIError:其中一个全局URI函数(编码URI或解码URI)使用错误。
列表G中的代码在一个catch语句中采用了TypeError类型。由于在引用字段名(document)的行中多了一个d,结果发生了一个打字错误(ddocument)。

列表G

<html><head>
<title>JS Test</title>
<script type="text/javascript">
function MissingValueException (errMsg) {
this.message = errMsg;
this.name="MissingValueException";
}
function doIt() {
try {
if (ddocument.forms[0].fullName.value == '') {
noNameException = new MissingValueException("First name is missing.");
throw noNameException;
}
} catch(e) {
if (e instanceofTypeError) {
document.write("Reference error while accessing First Name field.<br><br>");
document.write("Please contact the administrator.<br><br>");
document.write(e.message);
} else {
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>
Address: <input id="contactNumber" name="contactNumber" type="text"><br>
<input type="button" value="Submit" >
</form></body></html>

处理所有的页面错误

另一个你可以自行支配的特性是window.onerror事件。和所有其他的JavaScript事件一样,你可以定义一个函数或者一条代码在事件被触发时运行。它可以用来处理或忽略错误。列表H中的页面显示了遇到的所有JavaScript错误的简单信息。因为指定的函数不存在,所以当点击按钮时,错误就发生了。列表I是用onerror事件来忽略所有的错误的。

列表H

<html><head>
<title>onError Test</title>
<script type="text/javascript">
function handleErrors() {
alert("A JavaScript error has occurred.");
return true;
}
window.onerror = handleErrors;
</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" >
</form></body></html>

列表I

<html><head>
<title>JS Test</title>
<script type="text/javascript">
function ignoreErrors() {
return true;
}
window.onerror = ignoreErrors;
</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" >
</form></body></html>

关于onerror事件的一个问题是浏览器的支持。最大的问题就发生在Opera浏览器中,所以在把浏览器和自己的应用程序相结合之前,你应该确保所有的目标浏览器都支持这一特性。

谨慎处理

错误是每一个应用程序的一部分,但是适当的错误处理却不是。合理地运用JavaScript的错误处理特色和自动灵活的译码可以使用户的体验更顺畅,同时也让开发方的诊断工作变得更轻松。

时间: 2024-10-31 16:21:19

网页技巧:妥善处理JavaScript中的错误的相关文章

全面了解javascript中的错误处理机制_javascript技巧

前面的话 错误处理对于web应用程序开发至关重要,不能提前预测到可能发生的错误,不能提前采取恢复策略,可能导致较差的用户体验.由于任何javascript错误都可能导致网页无法使用,因此作为开发人员,必须要知道何时可能出错,为什么会出错,以及会出什么错.本文将详细介绍javascript中的错误处理机制 error对象 error对象是包含错误信息的对象,是javascript的原生对象.当代码解析或运行时发生错误,javascript引擎就会自动产生并抛出一个error对象的实例,然后整个程序

深入分析javascript中的错误处理机制_javascript技巧

前面的话 错误处理对于web应用程序开发至关重要,不能提前预测到可能发生的错误,不能提前采取恢复策略,可能导致较差的用户体验.由于任何javascript错误都可能导致网页无法使用,因此作为开发人员,必须要知道何时可能出错,为什么会出错,以及会出什么错.本文将详细介绍javascript中的错误处理机制 error对象 error对象是包含错误信息的对象,是javascript的原生对象.当代码解析或运行时发生错误,javascript引擎就会自动产生并抛出一个error对象的实例,然后整个程序

学习网页技巧:css布局中的居中问题

css|技巧|网页|问题 如何使DIV居中 主要的样式定义如下: body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明: 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中:对于IE这样设定就已经可以了.但在mozilla中不能居中.解决办法就是在子元素定义时候设定时再加上"MARGIN-RIGHT: auto;MARGIN-LEFT: auto;

网页知识:在Javascript中使用正则表达式

javascript|网页|正则 在javascript里,有两种使用正则的方法,一是创建一个正则表达式的实例,而是使用String对象里的正则表达相关的方法. 首先是正则表达式的创建,有2种办法: var my_regex=/[a-z]+/g; var my_regex=new ("[a-z]+","g"); 方法 exec(string),对string进行正则处理,并返回匹配结果. test(string),测试string是否含有匹配结果 字符串对象中的正则

制作网页技巧:通过JavaScript实现页面自适应

javascript|技巧|网页|页面|自适应 有时候,我们可能需要象新版的Yahoo邮箱一样,让一些数据显示块可以根据页面大小进行自适应.事实并不难,但是如果单纯用CSS控制的话,往往不能完全实现我们要的效果,这时候需要借助javascript,Javascript可以让我我们实现司空见怪的自适应页面,在iSunXoft的HR开源项目就应用到. 实现原理: 获取IE显示屏幕的宽高.确定哪些对象是绝对位置是固定的,那些是不固定的,哪些长宽是固定,然后象WIN FORM程序一样,根所软件界面的大小

聊一聊 JavaScript 中的错误隔离

接口请求失败.接口中部分数据缺失.运营数据不符合预期- 当我们的应用发布上线后,就开始面临这些风险. 而一旦这些问题导致了 JavaScript 报错(如空指针异常),并且没有被有效地隔离,就有可能引发页面的白屏.无法交互等线上问题. 在双 11 准备期间,我们收集了过往一年前端相关的线上问题,在收集的 21 个案例中,竟有一半的问题都与「数据异常触发页面显示异常」这个原因有些相关. 如何将错误的影响隔离在一定范围内,显得尤为重要. 这篇文章就和大家一起来聊一聊我们尝试过的一些方案,及遇到的问题

本人arcgis api for javascript中常见错误总结

1.   2.对象不支持"replace"属性或方法 解决办法:一般在ie中执行js会报这样的错误,基本问题就是你引用了某个对象中不存在的方法,可能是这个方法本来存在而你写错了,或者调用这个方法的时候传入了非法的参数,但这只是粗心造成的,还有就是名字重复的原因,自定义的方法名和原有的重复. 3.iis出现HTTP 错误 403.14 - Forbidden Web问题 前提是在iis服务器里目录浏览已打勾: 在本地iis服务器里测试网站的时候出现HTTP 错误 403.14 - For

JavaScript中错误正确处理方式,你用对了吗?

JavaScript的事件驱动范式增添了丰富的语言,也是让使用JavaScript编程变得更加多样化.如果将浏览器设想为JavaScript的事件驱动工具,那么当错误发生时,某个事件就会被抛出.理论上可以认为这些发生的错误只是JavaScript中的简单事件. 本文将会讨论客户端JavaScript中的错误处理.主要介绍JavaScript中的易犯错误.错误处理.异步代码编写等内容. 下面就让我们一起看看如何正确处理JavaScript中的错误. Demo演示 本文中使用的demo可以在GitH

10个JavaScript中易犯小错误_javascript技巧

在今天,JavaScript已经成为了网页编辑的核心.尤其是过去的几年,互联网见证了在SPA开发.图形处理.交互等方面大量JS库的出现. 如果初次打交道,很多人会觉得js很简单.确实,对于很多有经验的工程师,或者甚至是初学者而言,实现基本的js功能几乎毫无障碍.但是JS的真实功能却比很多人想象的要更加多样.复杂.JavaScript的许多细节规定会让你的网页出现很多意想不到的bug,搞懂这些bug,对于成为一位有经验的JS开发者很重要. 常见错误一:对于this关键词的不正确引用 我曾经听一位喜