JavaScript基础笔记（十三）测试和调试
错误处理与测试
一、错误处理
一）try-catch语句
function atest() {
try {
//可能发生错误的代码
return 0;
} catch (error) {
//错误处理程序
console.log(error.message);
return 1;
} finally {
//无论如何都会执行的,函数最后返回2
return 2;
}
}
错误类型：
1）Error:错误基类，其他错误类型都由该类继承。
2）EvalError:没有把eval()当函数调用时，会发送该错误。
3）RangeError:数值超出范围
4）ReferenceError:找不到对象时
5）SyntaxError:传入eval()函数的语法错误时
6）TypeError：变量的类型不符合要求
合理使用try-catch:
使用 try-catch 最适合处理那些我们无法控制的错误。假设你在使用一个大型 JavaScript 库中的
函数，该函数可能会有意无意地抛出一些错误。由于我们不能修改这个库的源代码，所以大可将对该函
数的调用放在 try-catch 语句当中，万一有什么错误发生，也好恰当地处理它们。
在明明白白地知道自己的代码会发生错误时，再使用 try-catch 语句就不太合适了。例如，如果
传递给函数的参数是字符串而非数值，就会造成函数出错，那么就应该先检查参数的类型，然后再决定
如何去做。在这种情况下，不应用使用 try-catch 语句。
二）抛出错误
使用throw操作符可以抛出错误，对抛出的值没有要求
//有效
throw 111;
throw ''ss;
在遇到 throw 操作符时，代码会立即停止执行。仅当有 try-catch 语句捕获到被抛出的值时，代
码才会继续执行。
通过使用某种内置错误类型，可以更真实地模拟浏览器错误。每种错误类型的构造函数接收一个参
数，即实际的错误消息。
throw new Error("An error");
何时抛出与捕获：
只应该捕获那些你确切地知道该如何处理的错误。捕获错误的
目的在于避免浏览器以默认方式处理它们；而抛出错误的目的在于提供错误发生具体原因的消息。
三）错误事件
任何没有通过 try-catch 处理的错误都会触发 window 对象的 error 事件 ，在任何 Web 浏览器中， onerror 事件处理程序都不会创建 event 对象，
但它可以接收三个参数：错误消息、错误所在的 URL 和行号 。要指定 onerror 事件处理程序，必须使用如下所示的 DOM0 级技术，它没有遵循“DOM2 级
事件”的标准格式。
window.onerror = function(msg, url, line) {
log(msg);
//阻止浏览器报告错误的行为
return fales;
}
二、测试
一）日志记录
//一个适用于所有浏览器的log
function log() {
try {
console.log.apply(console, arguments);
}
catch(e) {
try {
opera.postError.apply(opera, arguments);
}
catch (e) {
alert(Array.prototype.join.call(arguments, " "));
}
}
}
二）测试用例
一个好的测试用例的三个特征：
1）可重用性：多次运行应该产生相同的结果
2）简单性：只专注与测试，消除多余代码的影响
3）独立性：避免一个测试结果依赖于另一个结果
三）测试套件
测试套件的主要目的是聚合代码种的所有单个测试，将其组合成一个单位，这样他们可以批量运行，提供一个可以轻松反复运行的单一资源。
1）断言：
自己实现一个断言：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#results li.pass {
color: green;
}
#results li.fail {
color: red;
}
</style>
<body>
<ul id="results"></ul>
</body>
</html>
<script>
function assert(value, desc) {
var liElement = document.createElement("li");
liElement.className = value ? "pass" : "fail";
liElement.appendChild(document.createTextNode(desc));
document.getElementById("results").appendChild(liElement);
}
window.onload = function () {
assert(true, "Success");
assert(false, "Fail");
}
</script>
2）测试分组的实现：
(function () {
var results;
this.assert = function assert(value, desc) {
var li = document.createElement("li");
li.className = value ? "pass" : "fail";
li.appendChild(document.createTextNode(desc));
results.appendChild(li);
if (!value) {
li.parentNode.parentNode.className = "fail";
}
return li;
}
this.test = function test(name, fn) {
results = document.getElementById("results");
results = assert(true, name).
appendChild(document.createElement("ul"));
fn();
}
})();
window.onload = function (ev) {
test("all true", function () {
assert(true, "111");
assert(true, "222");
assert(true, "333");
});
test("one false", function () {
assert(false, "failed");
assert(true, "success");
assert(true, "xxx");
});
}
3）异步测试
(function () {
var queue = [], paused = false, results;
this.assert = function assert(value, desc) {
var li = document.createElement("li");
li.className = value ? "pass" : "fail";
li.appendChild(document.createTextNode(desc));
results.appendChild(li);
if (!value) {
li.parentNode.parentNode.className = "fail";
}
return li;
};
this.test = function test(name, fn) {
queue.push(function () {
results = document.getElementById("results");
results = assert(true, name).
appendChild(document.createElement("ul"));
fn();
});
runTest();
};
function runTest() {
if (!paused && queue.length) {
queue.shift()();
if (!paused) {
resume();
}
}
}
this.pause = function () {
paused = true;
};
this.resume = function resume() {
paused = false;
setTimeout(runTest, 1);
}
})();
window.onload = function (ev) {
test("First async test", function () {
pause();
setTimeout(function () {
assert(true, "First async completed!");
resume();
}, 1000);
});
test("Second async test", function () {
pause();
setTimeout(function () {
assert(true, "Second async test completed!");
resume();
}, 1000);
});
}
JavaScript基础笔记（十三）测试和调试的更多相关文章
- JavaScript基础笔记集合（转）
JavaScript基础笔记集合 JavaScript基础笔记集合 js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译 js存放的位置 html脚本必须放在&l ...
- JavaScript基础笔记二
一.函数返回值1.什么是函数返回值 函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...
- JavaScript基础笔记一
一.真假判断 真的:true.非零数字.非空字符串.非空对象 假的:false.数字零.空字符串.空对象.undefined 例: if(0){ alert(1) }else{ alert(2) } ...
- JavaScript基础笔记（一）基本概念
基本概念 一.语法 一)区分大小写 二)标识符 书写规则同Java 三)注释 略 四)严格模式 1.在整个脚本中启用严格模式:在顶部添加 "use strict" 2.指定函数在严 ...
- Javascript基础知识小测试（一）
这里罗列了<你不知道的js>上卷的一些知识点以及小问题,如果你想巩固一下js那么就和我一起来看看吧. 如果你能不看书就回答上80%的问题说明你js的这一部分学得还不错,再接再厉. 作用域和 ...
- JavaScript基础笔记（十四）最佳实践
最佳实践 一)松散耦合 1.解耦HTML/JavaScript: 1)避免html种使用js 2)避免js种创建html 2.解耦CSS/JS 操作类 3.解耦应用逻辑和事件处理 以下是要牢记的应用和 ...
- JavaScript基础笔记（十）表单脚本
表单脚本 一.表单基础知识 JavaScript中表单对应的是HTMLFormElement类型,该类型继承自HTMLElement类型. 通过document.forms可以获得所有表单元素,通过数 ...
- JavaScript基础笔记（八）DOM扩展
DOM扩展 一.选择符API Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询. 一)querySelector() 在Document和Element类型实例 ...
- JavaScript基础笔记1220
JavaScript笔记1.JavaScript关键词2.JavaScript标识符 必须以字母,下划线(_)或美元符($)开始. 后续的字符可以是字母.数字.下划线或者美元符 (数字是不允许作为首字 ...
随机推荐
- CentOS6.8安装MySQL5.7.20时报Curses library not found解决
报错如下: CMakeErroratcmake/readline.cmake:83(MESSAGE): Curseslibrarynotfound.Pleaseinstallappropriatepa ...
- appium+python测试app使用相对坐标定位元素
我们获取到的是绝对坐标,如果换一个屏幕分辨率不同的手机那这个坐标自然会发生变化,要实现不同手机均能实现点击同一控件自然要用到相对坐标了,具体方法如下: 1.获取当前空间的绝对坐标(x1,y1),开启指 ...
- C/C++中二进制与文本方式打开文件的区别
二进制与文本文件主要有两个大的区别: 1.换行符的区别: Windows平台下 对于Windows文本文件,它们使用回车和换行来表示换行符:如果以“文本”方式打开文件,当读取文件的时候,系统会将所有 ...
- C++ Primer 笔记——IO类
1.C++语言并未定义任何输入输出语句,取而代之,包含了一个全面的标准库来提供IO机制. 由上图能够知道,I/O操作的基类是ios_base,各个类的用途例如以下: <iostream> ...
- 设置IDEA中的web
- StackService.Redis 应用
如今StackService.Redis已经转向商业版本.4.0以下的低版本依然免费和开源. 吴双,Redis系列命令拾遗分享 http://www.cnblogs.com/tdws/tag/NoSq ...
- Idea设置行注释不显示在行首
如图:idea使用ctrl+/注释时候,//都在行首,强迫症表示受不了 解决方法如图
- [转] 简述js中 for in 与 for of 区别
for in是ES5标准,遍历key. for of是ES6标准,遍历value. for (var key in arr){ console.log(arr[key]); } for (var va ...
- （6）.NET CORE微服务 Micro-Service ---- AOP框架
AOP 框架基础 要求懂的知识:AOP.Filter.反射(Attribute). 如果直接使用 Polly,那么就会造成业务代码中混杂大量的业务无关代码.我们使用 AOP (如果不了解 AOP,请自 ...
- Ant之build.xml详解
Ant之build.xml详解 关键字: ant build.xml Ant的概念 可能有些读者并不连接什么是Ant以及入可使用它,但只要使用通过Linux系统得读者,应该知道make这个命令.当编译 ...