BOM（个人学习笔记）

BOM

个人学习笔记总结

一. 总结

1. 定义

浏览器对象模型，提供了与浏览器窗口进行交互的对象，核心对象是window

与DOM区别

DOM：把文档当对象，顶级对象document，内容是操作页面元素

BOM：把浏览器当对象，顶级对象window，内容是浏览器窗口交互的对象

2. window对象常见事件

• load：页面全部加载完毕后执行

  window.onload()：只能执行一次，若有多个则只执行最后一个window.addEventListener(‘load’,function(){})：可多次执行

• DOMContentLoaded：所有DOM全部加载完毕，不包括图片、链接等

• resize：调整窗口大小事件，屏幕宽度（window.innerWidth）

3. 定时器

定时器—>回调函数

• setTimeout：几秒后执行（广告5秒自动关闭）
• setInterval：每隔几秒执行一次（倒计时，轮播图）

4. JS执行机制

• 特点：单线程，JS是为处理页面中用户的交互，以及操作DOM。

• 改进：HTML5提出Web Worker标准，允许JS创建多个线程。于是有同步和异步

  • 同步任务：同步任务都在主线程上执行，形成一个执行栈
  • 异步任务：通过回调函数实现，三种类型
    1. 普通事件：click、resize等
    2. 资源加载：load、error
    3. 定时器：setInterval、setTimeout

• 执行机制：

  1. 先执行执行栈中的同步任务
  2. 异步任务（回调函数）放入任务队列中
  3. 待执行栈中所有同步任务执行完毕，系统将按次序读取任务队列中的异步任务，异步任务结束等待，进入执行栈，开始执行

  总结起来就是，同步任务在主车道，异步任务在应急车道，主车道的车都走完，应急车道的车才开往主车道

5. location对象

• URL

  统一资源定位符，互联网资源的地址

• location对象属性

• location对象方法

  

6. navigator对象

下面代码可以判断用户使用哪个终端打开页面，实现PC和H5跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MOQBrowser|JUC| Fennec|wOSBrowser|BrowserNG| WebOS|Symbian|windows Phone)/i))) {
    window.location.href = "";//手机
} else (
	window.location.href = "";//电脑
}

7. history对象

8. 本地存储

• 存：localStorage.setItem(‘键’,‘值’)
• 取：localStorage.getItem(‘键’)
• 删：localStorage.removeItem(‘键’)

注意：

本地只能存储字符串

如何转换？

• 复杂转 JSON：JSON.stringify(复杂数据类型)
• JSON 转复杂：JSON.parse(JSON字符串)