持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第12天,点击查看活动详情
今天学习的是JS出现异常时的处理以及BOM简单的介绍
异常处理
当我们的代码执行后如果出现并没有出现我们的预想情况,可以通过以下操作,找出异常代码的位置
1. 异常捕获
try-catch
try{
//这里写可能出现异常的代码
}catch(err){
//这里写出现异常后的处理代码
}
- 语句 try 和 catch 是成对出现的。
- 如果在 try 中出现了错误,try 里面出现错误的语句后面的代码都不再执行,直接跳转到 catch 中,catch 处理错误信息,然后再执行后面的代码。
- 如果 try 中没有出现错误,则不会执行 catch 中的代码,执行完 try 中的代码后直接执行后面的代码。
- 通过 try-catch 语句进行异常捕获之后,代码将会继续执行,而不会中断。
throw
创建自定义错误,常与try-catch一起使用
throw语句抛出一个错误,当错误发生,js会停止执行并抛出错误信息
throw "Too big" //抛出文本,也可抛出数字
BOM浏览器对象模型
提供独立于内容而与浏览器窗口进行交互的对象,核心对象是window
- 把浏览器当做一个对象看
- 是浏览器厂商在各自浏览器定义的,兼容性较差
1. 构成
包含DOM,是浏览器对象模型
1.1 window对象是浏览器的顶级对象
- 是JS访问浏览器窗口的一个接口
- 是全局对象,定义在全局作用域的变量,函数都会变成window对象的 属性和方法
window下的一个特殊属性window.name
2. window对象的常见事件
2.1 窗口加载事件
window.onload = function(){}
//或者
window.addEventListener("load",function(){});
window.onload是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
有了 window.onload 就可以把 JS 代码写到页面元素的上方,因为 onload 是等页面内容全部加载完毕,再去执行处理函数。
window.onload 传统注册事件方式 只能写一次,如果有多个,会以最后一个 window.onload 为准。
如果使用 addEventListener 则没有限制
document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等
2.2 调整窗口大小事件
window.onresize = function(){}
window.addEventListener("resize",function(){});
我们经常利用这个事件完成响应式布局,window.innerWidth当前屏幕宽度
2.3 pageshow
页面显示时触发,在重新加载页面是,pageshow会在load事件触发
3. 定时器
3.1 setTimeout()定时器
window.setTimeout(调用函数, [延迟的毫秒数]);
-
window可以省略
-
这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
-
默认为零
-
因为定时器可能有很多,所以我们经常给定时器赋值一个标识符 如:
var time1 = setTimeout(callback, 2000);
3.2 clearTimeout()
取消先前通过调用setTimeout()建立的定时器
- window可省略
- 里面的参数就是定时器的标识符
3.4 setInterval()定时器
window.setInterval(回调函数, [间隔的毫秒数]);
setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数
- window可省略
- 格式与第一类一样
- 第一次执行也是间隔毫秒后执行
3.5 停止clearInterval()
window.clearInterval(intervalID)
注意:
标志符的声明需要在停止定时器的作用域内,可以先赋个null
3.6 this
- 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
- 方法调用中谁调用this指向谁
- 构造函数中this指向构造函数的实例