JavaScript进阶教程(第五课第二部分)

信息分类:进阶教程 来源:Internet 作者:转载并修改 返回首页

    一旦你发现一个错误,就可以清除它。不幸的是,发现它们的出处并不总是很容易 - 你的大部分调试时间只是花在指出错误的位置。

    最可靠的方法之一是在你的代码中加入一些简单的语句打印出正在发生什么。假如你在下面的两段程序中发现一个问题:

    function getName()
    {
        var first_name = prompt("what's your first name?","");
        var last_name = prompt("what's your last name?","");
        var the_name = first_name + " " + last_name;
    }

    function theGreeting()
    {
        var the_name = "";
        the_name = getName();

        if (the_name == "Dave Thau")
        {
            alert("Hello, oh greatest one!");
        } else {
            alert("Ahoy palloi!");
        }
    }

    运行这段程序,看看你是否能发现出了什么问题。如果你在警告对话框中随意输入一些名字,你会得到问候:“Ahoy palloi!”。

    但是,如果你在第一个提示对话框中输入“Dave”,在第二个中输入“Thau”,你应该得到“Hello,oh greatest one!”这条信息。然而,你还是只得到“Ahoy palloi!”这条信息。很明显,函数中出了错误。在这个简单的例子程序中,你或许只是查看JavaScript代码就能发现错误。然而,当你的代码变得越来越复杂时,只靠目测来发现错误会变得愈加困难。

    如果JavaScript没能捕获你的错误,你也没有通过查看代码发现错误,有时打印出变量会对你有所帮助。最简单的方法是象下面这样使用一个alert():

    // theGreeting gets a name using getName, then presents
    // one or two alert boxes depending on what the name is
    function getName()
    {
        var first_name = prompt("what's your first name?","");
        var last_name = prompt("what's your last name?","");
        var the_name = first_name + " " + last_name;
        alert("in getName, the_name is: " + the_name);
    }

    // theGreeting gets a name using getName, then presents
    // one of two alert boxes depending on what the name is
    function theGreeting()
    {
        var the_name = "";
        the_name = getName();
        alert("after getName, the_name = " + the_name);
        if (the_name == "Dave Thau")
        {
            alert("hello, oh greatest one!");
        }else{
            alert("ahoy palloi!");
        }
    }

    请注意我们已经在所有重要的地方加入警告语句。现在试着运行这段程序。如果你输入名称“Dave”和“Thau”,你会注意到第一个警告显示“in getName, the_name is: Dave Thau,”,但是第二个警告显示“after getName, the_name = undefined,”,这就告诉你在getName()的最后一行事情变得糟糕起来。不知何故,the_name只在函数存在前正确,但是theGreeting没有给变量the_name正确赋值。当你写的函数能正确运行,但返回值出现问题时,你最先要做的就是检查你是否的确让其返回了一个值。

    很明显,问题就出在这儿。getName()函数指出了名称,但没有返回它。所以我们应把语句“return the_name;”加到函数末尾。

    把一些警告对话框加入你的代码中是很有帮助的。不幸的是,每隔一行就按一次“OK”也是一种痛苦。

    不用警告对话框也能调试代码。一种选择是把调试信息写到窗体的一个文本区内。另一种可能是把调试信息写在另一个窗口上。这儿有一个把调试信息写在下面文本区的调试代码的例子。

    使你的调试经历更舒适的第三个诀窍是这样的:创建不同的调试等级,然后设置“调试”变量。下面就是在此页上运行的JavaScript代码:

    // debug can be either none, alert, or textarea
    // depending on the kind of debugging I want to do
    // var debug = "none";
    // function getName gets a first and last name,
    // concatenates them with a space in between,
    // and returns the name
    function getName()
    {
        var first_name = prompt("what's your first name?","");
        var last_name = prompt("what's your last name?","");
        var the_name = first_name + " " + last_name;
        var error_message = "in getName, the_name is: " + the_name;
        doError("in getName, the_name is: " + the_name);
    }

    // theGreeting gets a name using getName, then presents
    // one of two alert boxes depending on what the name is
    function theGreeting()
    {
        var the_name = "";
        the_name = getName();
        doError("after getName, the_name = " + the_name);
        if (the_name == "Dave Thau")
        {
            alert("hello, oh greatest one!");
        } else {
            alert("ahoy palloi!");
        }
    }

    // doError is the error handling routine
    // depending on the type of debug message
    // it presents either no debug message, an alert
    // or puts the message in a textarea
    function doError(the_message)
    {
        if (debug == "alert")
        {
            alert(the_message);
        } else if (debug == "textarea")
        {
            window.document.the_form.the_text.value +=    the_message + "<br>\n";
        }
    }

    请注意我已经定义了一个叫“debug”的变量,它可以是“none”,“alert”或“textarea”。于是当我想产生一个错误信息时,我把它送给函数doError(),此函数可能什么也不做,或者显示一个消息对话框,或者把消息粘贴到一个文本区中,这取决于我怎样设置调试变量。当你想同时看到多条错误信息时,你可以设置调试变量为“textarea”。当你准备把你的代码显示给全世界时,你只需要把调试变量设为“none”,于是错误信息将不再出现,这样可以省去发现和清除所有调试语句的麻烦。

    通常,程序员可以创建不同的调试等级,如“none”,“brief”和“extreme”。“brief”将打印一些调试信息,extreme”将打印大量调试信息,“none”当然不会打印任何信息。

    如果你按此方法建立你的调试系统,你可以在编码时把调试等级设为“brief”,在准备公布你的JavaScript时把调试变量设为“none”。如果有不可思议的事情发生,并且你不知道去哪儿发现问题,你可以把调试等级设为“extreme”,然后流览所有的调试信息直到发现可疑的地方。

    好了,调试系统就讨论到这儿。下一讲让我们看看JavaScript编码器产生的一般性错误。

相关资源