JavaScript错误的5个常见原因(以及如何避免)

JavaScript(JS)是一种无处不在,灵活且广泛流行的编程语言,尽管它也易于出错,导致大多数开发人员不满意.


JS被广泛用于在大多数Web应用程序的客户端上增强用户交互性。如果没有JavaScript,也许网络上的一切都会变得毫无生气和刺激。但是,这种语言的起伏有时会使开发人员与之产生爱恨交加的关系.

JavaScript错误会导致应用程序产生意外结果并损害用户体验。最近 研究 不列颠哥伦比亚大学(UBC)的研究试图找出JavaScript错误和错误的根本原因和影响。研究结果揭示了一些损害JS程序性能的常见模式.

这是一个饼图,显示了研究人员发现的结果:

在此博客文章中,我们将说明研究中突出显示的JavaScript错误的一些常见原因(以及我们每天遇到的其他原因),以及如何使您的应用程序不易出现故障.

DOM相关

文档对象模型(DOM)在网站的交互性中起着至关重要的作用。 DOM界面可以操纵网页的内容,样式和结构。使普通HTML网页具有交互性(或操纵DOM)是发布JavaScript编程语言的原因.

因此,即使引入了诸如Node.js之类的后端JavaScript技术,使用DOM仍然构成了该语言的大部分功能。因此,DOM是在JavaScript应用程序中引入错误和错误的重要途径.

JavaScript错误报告研究发现,与DOM相关的问题是造成大多数缺陷的原因,这一点不足为奇,占68%.

例如,一些JavaScript程序员通常会在加载DOM元素之前错误地引用它,从而导致代码错误.

document.getElementById("容器").innerHTML = "常见的JS错误和错误";

如果以上代码在Chrome浏览器上运行,则会抛出错误,可以在开发者控制台上看到该错误:

引发该错误是因为JavaScript代码通常是根据其在文档中出现的顺序执行的。这样,当代码运行时,浏览器不会意识到所引用的元素.

为了解决这个问题,您可以使用各种方法。最简单的方法是将标记放在脚本标记的开头之前。您还可以使用jQuery之类的JavaScript库来确保先加载DOM,然后才能对其进行访问.

document.getElementById("容器").innerHTML = "常见的JS错误和错误";

基于语法

当JavaScript解释器无法执行语法错误的代码时,就会发生语法错误。如果创建应用程序并且解释器观察到与JavaScript编程语言的标准语法不匹配的标记,则将引发错误。根据JavaScript错误报告研究,此类错误占该语言所有错误的12%.

语法错误(例如缺少括号或不匹配的括号)是JavaScript中语法错误的主要原因.

例如,当您必须使用条件语句来解决多个条件时,可能会错过根据需要提供括号的问题,从而导致语法缺陷.

让我们看下面的例子.

如果((x > y) && (y < 77){
//更多代码在这里
}

是的,条件语句的最后一个括号丢失了。您是否注意到上述代码的错误?

让我们更正.

如果((x > y) && (y < 77)){
//更多代码在这里
}

为避免此类语法错误,您应该花时间学习JavaScript编程语言的语法规则。通过广泛的编码实践,您可以轻松发现语法错误,并避免在开发的应用程序中附带这些错误.

未定义/空关键字的使用不当

一些JavaScript开发人员不知道如何使用 未定义空值 正确的关键字。实际上,该研究报告称,关键字使用不当占所有JavaScript错误的5%。.

空值 关键字是分配值,通常将其分配给变量以表示不存在的值。出奇, 空值 也是一个JavaScript对象.

这是一个例子:

var codeJS = null;

console.log(codeJS);
//输出为空

console.log(typeof codeJS);
//输出是对象

另一方面, 未定义 表示已声明的变量或任何其他属性缺少分配的值。这也可能意味着未声明任何内容. 未定义 本身就是一种.

这是一个例子:

var codeJS;

console.log(codeJS);
//输出未定义

console.log(typeof codeJS);
//输出未定义

有趣的是,如果使用相等运算符和身份运算符来比较 空值未定义 关键字,后者并不认为它们相等.

console.log(null == undefined);
//输出为真

console.log(null === undefined);
//输出为假

因此,知道正确的用法 空值未定义 关键字可以帮助您避免在JavaScript程序中引入错误.

未定义的方法

JavaScript错误的另一个常见原因是调用方法而未提供其先验定义。 UBC研究人员发现此错误导致所有JavaScript错误的4%.

这是一个例子:

var coder = {
名称: "彼得",
年龄:27,
说话(){
console.log(this.name);
}
};
coder.speakNow();

这是在Chrome开发者控制台上看到的错误:

由于未在JavaScript代码中定义被调用函数speakNow(),因此发生上述错误.

return语句使用不当

在JavaScript中, 返回 语句用于停止功能的运行,以便可以输出其值。如果错误使用,则return语句可能会损害应用程序的最佳性能。根据这项研究,错误地使用return语句会导致JavaScript应用程序中所有错误的2%.

例如,一些JavaScript程序员通常会犯错误地错误地破坏return语句.

尽管您可以将JavaScript语句分为两行,但仍获得所需的输出,但破坏return语句将灾难引入您的应用程序.

这是一个例子:

功能编号(n){
var add = 5;
返回;
n +加;
}
console.log(number(10));

运行上述代码后,在Chrome开发者控制台上会看到未定义的错误:

因此,您应避免破坏 返回 JavaScript代码中的语句.

结论

客户端JavaScript编程语言具有出色的广泛功能,可为现代Web应用程序提供功能。但是,如果您不理解使该语言起作用的怪癖,则可能会降低应用程序的性能。.

此外, JavaScript开发人员 需要多功能工具来对应用程序的性能进行故障诊断并快速检测错误和错误.

因此,使用一整套完善的测试工具,您可以放心地确定影响网站性能的异常情况。您需要改善网站的性能并获得最佳的用户体验.

快乐的无错误JavaScript编程!

Alfrick Opidi撰写的文章

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map