LOADING

BOM

2022/1/23

BOM 提供了一系列的对象和函数,提供和浏览器本身相关的操作

window

全局对象
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/window

API 含义 备注
[open()](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open) 打开一个新的浏览器窗口 返回新窗口的 window 对象
[close()](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/close) 关闭浏览器窗口 只能关闭使用 open 打开的浏览器窗口
setTimeout() 设置一个计时器
在一段时间后自动执行某个函数 参数 1:函数,无参,this 指向 window

参数 2:时间,毫秒
返回:计时器的 ID |
| clearTimeout() | 清除指定 ID 的计时器 | 传入计时器的 ID |
| setInterval() | 设置一个计时器
每隔一段时间自动执行某个函数 | 参数 1:函数,无参,this 指向 window
参数 2:时间,毫秒
返回:计时器的 ID |
| clearInterval() | 清除指定 ID 的计时器 | 传入计时器的 ID |
| [alert()](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/alert) | 弹出提示框 | 不同的操作系统外观有差异 |
| [confirm()](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/confirm) | 弹出确认框 | 不同的操作系统外观有差异 |

我们经常只使用一个计时器,当重复开启多个时,这样处理

var timerId;

// 开始(继续)
function start() {
  if (timerId) {
    // 当前已经有计时器了
    return;
  }
  timerId = setInterval(function () {
    console.clear();
    console.log(new Date().toLocaleString());
  }, 1000);
}

// 停止
function stop() {
  clearInterval(timerId);
  timerId = null;
}

window.location

提供地址栏的相关操作

API 含义 备注
Location.href 获取或设置页面当前地址 设置地址回导致页面跳转
[Location.protocol](https://developer.mozilla.org/en-US/docs/Web/API/Location/protocol) 获取或设置地址中的协议部分
[Location.host](https://developer.mozilla.org/zh-CN/docs/Web/API/Location/host) 获取或设置地址中的主机名和端口号
[Location.hostname](https://developer.mozilla.org/zh-CN/docs/Web/API/Location/hostname) 获取或设置地址中的主机名

| [Location.port](https://developer.mozilla.org/en-US/docs/Web/API/Location/port)
| 获取或设置地址中的端口号 | |
| [Location.pathname](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname)
| 获取或设置地址中的路径部分 | |
| [Location.search](https://developer.mozilla.org/zh-CN/docs/Web/API/Location/search) | 获取或设置地址中的参数部分 | |
| [Location.hash](https://developer.mozilla.org/zh-CN/docs/Web/API/Location/hash) | 获取或设置地址中的 hash 部分 | |
| [Location.reload()](https://developer.mozilla.org/zh-CN/docs/Web/API/Location/reload) | 刷新页面 | |

window.history

提供当前窗口历史记录的操作

API 含义 备注
[History.back()](https://developer.mozilla.org/zh-CN/docs/Web/API/History/back) 后退
[History.forward()](https://developer.mozilla.org/zh-CN/docs/Web/API/History/forward) 前进
[History.go()](https://developer.mozilla.org/zh-CN/docs/Web/API/History/go) 根据相对当前页面的偏移量,
进入指定的记录页
[History.pushState()](https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState) 在历史记录中添加一条记录 页面不刷新
[History.replaceState()](https://developer.mozilla.org/zh-CN/docs/Web/API/History/replaceState) 替换当前记录 页面不刷新

JSON

JavaScript Object Notation JS 对象表示法
JSON 和 JS 对象的格式一样,只不过 JSON 字符串中的属性名必须加双引号
其他的和 JS 语法一致

json –> js 对象

JSON.parse()
可以将以 JSON 字符串转换为 js 对象
它需要一个 JSON 字符串作为参数,会将该字符串转换为 JS 对象并返回

var o = JSON.parse(json);

JS 对象 —> JSON

JSON.stringify()
可以将一个 JS 对象转换为 JSON 字符串
需要一个 js 对象作为参数,会返回一个 JSON 字符串
var str = JSON.stringify(obj3);