正文

《JAVASCRIPT高级程序设计》错误处理与调试

IP云
IP云V管理员/3 阅读
11/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、错误处理

错误处理在程序设计中的重要性是毋庸置疑的，任何有影响力的web应用程序都需要一套完善的错误处理机制。良好的错误机制可以让用户得到提醒，知道发生了什么事。

1、try-catch语句

try-catch语句是javascript处理异常的一种标准方式，它的结构如下： 

    try{
// 把所有可能出现错误的代码放在try语句中

    }catch(err){
// 把用于处理错误的块放在catch语句中
// catch块会接受到一个保存错误信息的对象
// 该对象的message属性是唯一一个能够保证所有浏览器都支持的属性
        alert(err.message);

    }finally{
// finally子句无论如何都会执行

    }

2、错误类型

javascript有7种错误类型，其中，Error是基类型，其他错误都继承自该类型。

  • Error
  • EvalError
  • RangeError
  • ReferenceError
  • SyntaxError
  • TypeError
  • URIError 
// eval()会计算字符串中的值，并执行其中的js代码
// 正确使用
eval("2+3");

// ECMA-262规定，如果没有把eval()当做函数调用，就会发生错误；但实践中，浏览器不一定会在应该抛出错误的时候就抛出EvalError
new eval();
eval = fool
// RangeError类型的错误会在数值超过相应范围时触发
var item1 = new Array(-20);
var item2 = new Array(Number.MAX_VALUE);
// 在找不到对象的情况下，会发生ReferenceError
var obj=x;
// 把语法错误的字符串给eval()时，会导致SyntaxError
eval("1++2");
// 在变量中保存意外的类型，或访问不存在的方法时，都会抛出TypeError错误
var o = new 10;
alert("name" in true);

3、抛出错误

使用throw语句，可以抛出上述的错误，也可以抛出自定义的错误；在遇到throw操作符时，代码会立刻停止执行。 

// 抛出常规错误
throw new SyntaxError("I don't like your syntax");
throw new TypeError("What type of variable do you take me for?");
throw new RangeError("Sorry, you just don't have the range");
throw new EvalError("That't doesn't evaluate.");
throw new URIError("Uri, is that you?");
throw new ReferenceError("You didn't cite your references properly.");

// 抛出自定义错误
function CustomError(message){
    this.name = "CustomError";
    this.message = message;
}

CustomError.prototype = new Error();
throw new CustomError("My message");

4、常见的错误类型

一般来说，需要关注三种类型的错误：

  • 类型转换错误
  • 数据类型错误
  • 通信错误

a)类型转换错误

为避免类型转换错误，建议使用全等操作符： 

alert(5=="5");//true
alert(5==="5");//false

流控制语句也很容易出错。像if之类的语句，在确定下一步操作之前，会自动把任何值转化成布尔值： 

function concat(str1, str2, str3){
    var result = str1 + str2;
    if(str3){ //当str3是大于0的数字，不是string类型时，也会执行
        resutl += str3;
    }
    return result;

}

// 正确的写法
function concat(str1, str2, str3){
    var result = str1 + str2;
    if(typeof str3=="string"){
        resutl += str3;
    }
    return result;

}

b)数据类型错误

在将变量传递个函数时，对变量进行类型进行检测，可以避免类型错误： 

    // 不安全的函数，任何非字符串都会导致错误
    function getQueryString(url) {
        var pos = url.indexOf("?");
        if (pos > -1) {
            return url.substring(pos + 1);
        }
        return "";
    }

// 安全的函数
    function getQueryString(url) {
        if (typeof url == "string") {//通过检查类型确保安全
            var pos = url.indexOf("?");
            if (pos > -1) {
                return url.substring(pos + 1);
            }
            return "";
        }
    }

在确切知道应该传入什么类型的情况下，应该使用instanceof Array来检测类型： 

/ 不安全的函数，任何非数组类型都会导致错误
function reverseSort(values){
    if(values){
        values.sort();
        valuse.reverse();
    }
}

// 不安全的函数，任何非数组类型都会导致错误
function reverseSort(values){
    if(values != null){
        values.sort();
        valuse.reverse();
    }
}

// 不安全的函数，不能只针对某个特性进行检测
function reverseSort(values){
    if(typeof values.sort == "function"){
        values.sort();
        valuse.reverse();
    }
}

// 安全，非数组将被忽略
function reverseSort(values){
    if(values instanceof Array){
        values.sort();
        valuse.reverse();
    }
}

c)数据通信错误

常见的数据通信错误是把数据发给服务器之前，没有使用encodeURIComponent()对数据进行编码，可以定义一个处理查询字符串的函数： 

function addQueryStringArg(url, name ,value){
    if(url.indexOf("?") == -1){
        url += "?";
    }else{
        url += "&";
    }
    url += encodeURIComponent(name) + "=" +encodeURIComponent(value);
    return url;
}

var url = "http://www.baidu.com";
var newUrl = addQueryStringArg(url, "redir", "http://wwww.someotherdomain.com?a=b&b=c");
alert(newUrl);

5、非致命错误与致命错误：

非致命错误：不影响用户的主要任务/只影响页面的一部分/可以恢复/重复相同操作可以消除错误

这类错误没有必要对用户给出提示---可以直接把页面中受影响的区域替换掉。

致命错误：应用程序根本无法运行/错误明显影响到了用户的主要操作/会导致其他连带错误

这类错误应该立即给用户发送消息，告诉他们无法继续进行手头上的事情了。

二、调试技术

1、可以使用console对象向javascript控制台写入消息来调试 

function sum(num1, num2){
    console.log("Enter sum(), arguements are " + num1 + ", " +num2 );

    console.log("Before calculation");
    var result = num1 + num2;
    console.log("After calculaation");

    console.log("Exiting sum()");
    return result;
}

2、将消息记录在当前页面

在页面开辟一小块信息，用于显示错误信息 

<html>
<head>
    <meta charset = "utf-8">
</head>
<body>
<script>
function log(message){
    var console = document.getElementById("debugInfo");
    if(console == null){
        console = document.createElement("div");
        console.id = "debugInfo";
        console.style.background = "#dedede";
        console.style.border = "1px solid silver";
        console.style.padding = "5px";
        console.style.width = "400px";
        console.style.position = "absolute";
        console.style.right = "0px";
        console.style.top = "0px";
        document.body.appendChild(console);
    }
    console.innerHTML += "<p>" + message + "</p>";
}
log("test……");
</script>
</body>
</html>

3、直接抛出错误

如果错误消息很具体，基本可以把它当做错误来源的依据，那么可以直接抛出错误： 

    function divide(num1, num2){
        if(typeof num1 != "number" || typeof num2 != "number"){
            throw new Error("devide (): both arguments must be number.");
        }
        return num1 / num2;
    }

也可以自定义一个assert语句，抛出错误： 

//assert接受两个参数，一个是求值结果应该为true的条件，一个是条件为false时需要抛出的错误
    function assert(condition , message){
        if(!condition){
            throw new Error(message);
        }
    }
    function divide(num1, num2){
        assert(typeof num1 == "number" && typeof num2 == "number", "devide (): both arguments must be number.");
        return num1 / num2;
}

三、常见的IE的错误

IE是最难调试JAVASCRIPT错误的浏览器，以下介绍一些错误：

1、操作中止

对于IE8之前的版本，在修改尚未加载完的页面时，会发生操作中止错误： 

<!doctype html>
<html>
<head>
    <title>Operation Aborted Example</title>
</head>
<body>
<p> The following code should cause an Operation Aborted error in IE Versions prior to 8.</p>
<div>
    <script type="text/javascript">
        document.body.appendChild(document.createElement("div"));
    </script>
</div>
</body>
</html>

解决办法可以是不适用appendChild()，而使用insertBefore(): 

<!doctype html>
<html>
<head>
    <title>Operation Aborted Example</title>
</head>
<body>
<p> The following code should cause an Operation Aborted error in IE Versions prior to 8.</p>
<div>
    <script type="text/javascript">
        document.body.insertBefore(document.createElement("div"),document.body.firstChild);
    </script>
</div>
</body>
</html>

也可以把script元素移除来，直接作为<body>的子元素： 

<!doctype html>
<html>
<head>
    <title>Operation Aborted Example</title>
</head>
<body>
<p> The following code should cause an Operation Aborted error in IE Versions prior to 8.</p>
<div>
</div>
   <script type="text/javascript">
        document.body.appendChild(document.createElement("div"));
    </script>
</body>
</html>

2、无效字符

无效字符是Javascript中没有定义的字符，例如直接从word中赋值文本到编辑器里，然后又在IE中运行，则可能会遇到无效字符的错误。

3、未找到成员

以下函数在单击事件后，window.event对象会被保存；当单击事件执行完毕后，event对象就会被销毁，因而setTimeout中使用的对象就不存在了；因此会出现未找到成员的错误： 

    document.onclick = function(){
        var event = window.event;
        setTimeout(function(){
            event.returnValue =  false;  //未找到成员函数
        },1000);
    }

4、未知运行时错误

当使用innerHTML或者outerHTML以下列方式操作时会发生错误：1）把块级元素插入到行内元素；2）访问表格的任意部分的任意属性

5、语法错误

6、系统无法找到指定资源

当URL的长度超过IE对URL的最长不能超过2083个字符的限制时，就会发生这个错误： 

function createLongUrl(url){
    var s = "?";
    for(var i = 0, len = 2500; i < len; i++ ){
        s += "a";
    }
    return url + s;
}
var x = new XMLHttpRequest();
x.open("get", createLongUrl("http://www.baidu.com/"), true);
x.send(null);　

相关阅读

目录[+]