常见的浏览器对象

1.1 window

BOM的核心，js访问浏览器的接口，ES规定的 global 对象

1. alert() confirm() prompt() open() onerror() onload()

2. screenLeft screenTop screenX(火狐) screenY(火狐) moveBy(x, y) moveTo(x, y)

3. innerWidth innerHeight outerWidth outerHeight resizeTo(width, height) resizeBy(width, height)

4. setTimeout() setInterval()

1.2 navigation

识别客户端浏览器的标准

以Chrome为例

1. appName 浏览器名称

'Mozilla'

2. appVersion 浏览器版本

'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36'

2. platform 浏览器所在的系统平台

'Win32'

3. onLine 浏览器是否连接了因特网

true

4. 🔥 userAgent 浏览器的用户代理字符串。会有很多信息

'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36'

5. plugins 检测插件

6. cookieEnabled

true

1.3 history

保存用户上网的历史记录

1. go(param: string | number)

2. back()

3. forward()

4. length

5. pushState() 添加一条历史记录，不刷新页面

6. replaceState() 替换当前的历史记录，不刷新页面

7. popState事件。历史记录发生改变时触发，调用history.pushState()或者history.replaceState()不会触发popstate事件

8. hashChange事件。当页面的hash值改变的时候触发，常用于构建单页面应用

1.4 location

提供当前窗⼝中的加载的⽂档有关的信息和⼀些导航功能。既是 window 对象属性，也是 document的对象属性

以chrome为例：www.baidu.com/s?wd=beauty…

1. hash: '#aa'

2. host: 'www.baidu.com'

3. hostName: 'www.baidu.com'

4. href: 'www.baidu.com/s?wd=beauty…'

5. pathName: '/s'

6. port: '' (获取不到)

7. protocol: 'https'

8. search: '?wd=beauty'

9. origin: 'www.baidu.com'

1.5 performace

可以看到性能指标的地方，用来做浏览器性能分析

1. timing

各种时间

2. memory

2 浏览器事件捕获，冒泡

1. addEventListener 第三个参数

target.addEventListener(type, handler, {capture, once, passive})
target.addEventListener(type, handler, useCapture)

当第三个参数为对象时

• capture: 默认值为false（即 使用事件冒泡）. 是否使用事件捕获；

• once: 默认值为false. 是否只调用一次，if true，会在调用后自动销毁listener

• passive: if true, 意味着listener永远不远调用preventDefault方法，如果又确实调用了的话，浏览器只会console一个warning，而不会真的去执行preventDefault方法。根据规范，默认值为false. 但是chrome, Firefox等浏览器为了保证滚动时的性能，在document-level nodes(Window, Document, Document.body)上针对touchstart和touchmove事件将passive默认值改为了true， 保证了在页面滚动时不会因为自定义事件中调用了preventDefault而阻塞页面渲染。

当第三个参数为 boolean 时

• 默认false，true：捕获阶段调用，false：冒泡阶段调用

2. 阻止事件传播

e.stopPropagation

• stopImmediatePropagation()

如果有多个相同类型事件的事件监听函数绑定到同⼀个元素，当该类型的事件触发时，它们会按照被添加的顺序执⾏。如果其中某个监听函数执⾏了 event.stopImmediatePropagation() ⽅法，则当前元素剩下的监听函数将不会被执⾏。

3. 阻止默认行文

e.preventDefault

3 ajax 和 fetch api

3.1 ajax

1. XMLHttpRequest

let xhr = new XMLHttpRequest();

2. open()

xhr.open('GET', 'http://domain/service');

3. onreadystatechange

xhr.onreadystatechange = function () {
  // request completed?
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // request successful - show response
    console.log(xhr.responseText);
  } else {
    // request error
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

4. upload.onprogress

xhr.upload.onprogress = p => {
  console.log(Math.round((p.loaded / p.total) * 100) + '%');
}

3.2 fetch

fetch 返回一个 promise 对象

1. 当响应为 http 错误码时，不会 reject，只是 ok --> false。只有在网络问题，和请求无法完成时 reject。

fetch(
  'http://domain/service', {
    method: 'GET'
  }
)
.then(response => {
  if (response.ok) {
    return response.json();
  }
  throw new Error('Network response was not ok.');
})
.then(json => console.log(json))
.catch(error => console.error('error:', error));

2. 不会自动携带 cookies，需要将 credentials 属性 设置为 same origin

fetch(
  'http://domain/service', {
    method: 'GET',
    credentials: 'same-origin'
  }
)

3. 不支持超时设置，可以通过封装 Promise 实现

function fetchTimeout(url, init, timeout = 3000) {
  return new Promise((resolve, reject) => {
    fetch(url, init)
      .then(resolve)
      .catch(reject);
    setTimeout(reject, timeout);
  })
}

4. 需要借⽤AbortController中⽌fetch

const controller = new AbortController();

fetch(
  'http://domain/service', {
    method: 'GET',
    signal: controller.signal
  })
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(error => console.error('Error:', error));

controller.abort();