2018/5/18 19:10:05当前位置推荐好文程序员浏览文章

JavaScript的事件驱动范式增添了丰富的语言,也是让用JavaScript编程变得更加多样化。假如将浏览器设想为JavaScript的事件驱动工具,那么当错误发生时,某个事件就会被抛出。理论上能认为这些发生的错误只是JavaScript中的简单事件。

本文将会探讨客户端JavaScript中的错误解决。主要详情JavaScript中的易犯错误、错误解决、异步代码编写等内容。

下面就让我们一起看看如何正确解决JavaScript中的错误。

Demo演示

本文中用的demo( sitepoint-editors/ProperErrorHandlingJavaScript)能在GitHub上找到,运行之后会是这样的页面:

image

每个按钮都会引发一个“错误(Exception)”,同时这个错误解模拟出一个被抛出的异常TypeError。下面是板块的定义:

// scripts/error.js

function error() {

var foo = {};

return foo.bar();

}

首先,这个函数公告了一个空对象foo。需要注意的是,bar( )未在任何地方定义。接下来验证这个单元测试能否会引发“错误”:

// tests/scripts/errorTest.js

it(throws a TypeError, function () {

should.throws(error, TypeError);

});

这个单元测试在Mocha中,同时在 Should.js中有测试公告。Mocha是测试运行工具,而Should.js是断言库。这个单元测试运行在Node上,不需要用浏览器。

error( )定义一个空对象,而后尝试访问一个方法。由于bar( )在对象内不存在,所以就会引发异常。这种发生在像JavaScript这样的动态语言上的错误,每个人可可以都会遇到!

错误解决(一)

通过以下代码,对上述错误进行解决:

// scripts/badHandler.js

function badHandler(fn) {

try {

return fn();

} catch (e) { }

return null;

}

该解决程序将fn作为输入参数,而后fn在解决函数内部会被调使用。单元测试会表现出以上错误解决程序的作使用:

// tests/scripts/badHandlerTest.js

it(returns a value without errors, function() {

var fn = function() {

return 1;

};

var result = badHandler(fn);

result.should.equal(1);

});

it(returns a null with errors, function() {

var fn = function() {

throw new Error(random error);

};

var result = badHandler(fn);

should(result).equal(null);

});

假如出现问题,错误解决程序就会返回null。fn( )回调函数能指向一个合法的方法或者错误。

以下的点击事件会继续进行事件解决:

// scripts/badHandlerDom.js

(function (handler, bomb) {

var badButton = document.getElementById(bad);

if (badButton) {

badButton.addEventListener(click, function () {  handler(bomb);  console.log(Imagine, getting promoted for hiding mistakes);});

}

}(badHandler, error));

这种解决方式在代码中隐藏了一个错误,并且很难发现。隐藏的错误可可以会花费好几个小时的调试时间。尤其是在具备深度调使用堆栈的多层处理方案中,这个错误解更难发现。所以这是一种很差的错误解决方式。

错误解决(二)

下面是另一个错误解决方式。

// scripts/uglyHandler.js

function uglyHandler(fn) {

try {

return fn();

} catch (e) {

throw new Error(a new error);

}

}

解决异常的方式如下所示:

// tests/scripts/uglyHandlerTest.js

it(returns a new error with errors, function () {

var fn = function () {

throw new TypeError(type error);

};

should.throws(function () {

uglyHandler(fn);

}, Error);

});

以上对错误的解决程序有显著的改进。在这里异常会调使用堆栈进行冒泡。同时错误解开展堆栈,这对调试非常有帮助。除了抛出异常,解释器还会沿着栈寻觅另外的解决。这也带来了能从堆栈顶部解决错误的可可以。但这还是一种较差的错误解决,需要我们从堆栈中一步步追溯原始的异常。

能采使用一种替代方案,使用自己设置的错误方式来结束这种较差的错误解决。当你向错误中增加更多详细信息时,会让这种方法变得很有帮助。

例如:

// scripts/specifiedError.js

// Create a custom error

var SpecifiedError = function SpecifiedError(message) {

this.name = SpecifiedError;

this.message = message || ;

this.stack = (new Error()).stack;

};

SpecifiedError.prototype = new Error();

SpecifiedError.prototype.constructor = SpecifiedError;

// scripts/uglyHandlerImproved.js

function uglyHandlerImproved(fn) {

try {

return fn();

} catch (e) {

throw new SpecifiedError(e.message);

}

}

// tests/scripts/uglyHandlerImprovedTest.js

it(returns a specified error with errors, function () {

var fn = function () {

throw new TypeError(type error);

};

should.throws(function () {

uglyHandlerImproved(fn);

}, SpecifiedError);

});

指定的错误解增加更多详细信息并保留原始的错误消息。有了这个改进,以上的解决不再是较差的解决方式了,而是一个清晰有使用的方式。

经过了上面的解决,我们还收到了一个未解决的异常。接下来让我们看看浏览器在解决错误时,有什么帮助。

开展堆栈

解决异常的一种方式是在调使用堆栈的顶部加入try…catch。

比方说:

function main(bomb) {

try {

bomb();

} catch (e) {

// Handle all the error things

}

}

但是,浏览器是事件驱动的, JavaScript中的异常也是一个事件。发生异常时,解释器会暂停执行并开展:

// scripts/errorHandlerDom.js

window.addEventListener(error, function (e) {

var error = e.error;

console.log(error);

});

此事件解决程序会捕获任何执行上下文中发生的错误。各个目标发生的错误事件会触发各种类型的错误。这种集中在代码中的错误解决是非常激进的。你能用菊花链解决方式来解决特定的错误。假如你遵循SOLID准则,即可以采使用具备单一目的错误解决方式。这些解决程序能随时进行注册,解释器会循环执行需要执行的解决程序。代码库能从try…catch块中释放出来,这也使得调试变得容易。在JavaScript中,把错误解决当作事件解决很重要。

捕获堆栈

在处理问题时,调使用堆栈会非常有使用,同时浏览器正好能提供这些信息。尽管堆栈属性不是标准的一部分,但是最新的浏览器已经能查看这些信息了。

下面是在服务器上记录错误的示例:

// scripts/errorAjaxHandlerDom.js

window.addEventListener(error, function (e) {

var stack = e.error.stack;

var message = e.error.toString();

if (stack) {

message +=   + stack;

}

var xhr = new XMLHttpRequest();

xhr.open(POST, /log, true);

// Fire an Ajax request with error details

xhr.send(message);

});

每个错误解决都具备单个目的,这样能保持代码的DRY准则(目的单一,不要重复自己准则)。

在浏览器中,需要将事件解决增加到DOM。这意味着假如你正在构建第三方库,那么你的事件会与客户端代码共存。window.addEventListener( )会帮你进行解决,同时也不会抹去现有的事件。

这是服务器上日志的截图:

image

能通过命令提醒符查看日志,但是Windows上,日志是非动态的。

通过日志能清楚的看到,具体什么情况触发了什么错误。在调试时调使用堆栈也会非常有使用,所以不要低估调使用堆栈的作使用。

在JavaScript中,错误信息仅适使用于单个域。由于在用来自不使用域的脚本时,将会看不到任何错误详细信息。

一种处理方案是重新抛出错误,同时保留错误消息:

try {

return fn();

} catch (e) {

throw new Error(e.message);

}

一旦重新启动了错误备份,全局错误解决程序就会完成其他的工作。确保你的错误解决处在相同域中,这样会保留原始消息,堆栈和自己设置错误对象。

异步解决

JavaScript在运行异步代码时,进行下面的异常解决,会产生一个问题:

// scripts/asyncHandler.js

function asyncHandler(fn) {

try {

// This rips the potential bomb from the current contextsetTimeout(function () {  fn();}, 1);

} catch (e) { }

}

通过单元测试来查看问题:

// tests/scripts/asyncHandlerTest.js

it(does not catch exceptions with errors, function () {

// The bomb

var fn = function () {

throw new TypeError(type error);

};

// Check that the exception is not caught

should.doesNotThrow(function () {

asyncHandler(fn);

});

});

这个异常没有被捕获,我们通过单元测试来验证。虽然代码包含了try…catch,但是try…catch语句只可以在单个执行上下文中工作。当异常被抛出时,解释器已经脱离了try…catch,所以异常未被解决。Ajax调使用也会发生同样的情况。

所以,一种处理方案是在异步回调中捕获异常:

setTimeout(function () {

try {

fn();

} catch (e) {

// Handle this async error

}

}, 1);

这种做法会比较见效,但仍有很大的改进空间。

首先,这些try…catch block在整个区域纠缠不清。事实上,V8浏览器引擎不鼓励在函数内用try … catch block。V8是Chrome浏览器和Node中用的JavaScript引擎。一种做法是将try…catch block移动到调使用堆栈的顶部,但这却不适使用于异步代码编程。

因为全局错误解决能在任何上下文中执行,所以假如为错误解决增加一个窗口对象,那么就可以保证代码的DRY和SOLID准则。同时全局错误解决也可以保证你的异步代码很干净。

以下是该异常解决在服务器上的报告内容。请注意,输出内容会根据浏览器的不同而不同。

image

从错误解决中能看到,错误来自于异步代码的setTimeout( )功可以。

结论

在进行错误解决时,不要隐藏问题,而应该及时发现问题,并采使用各种方法追溯问题的根源以便处理问题。尽管编写代码时,时常难免会埋下错误,但是我们也毋庸为错误的发生过于感到羞愧,及时处理发现问题从而避免更大的问题发生,正是我们现在需要做的。

网友评论