3-浏览器详解

浏览器对象

  • window 对象
    1.关注 window.onerror，用于前端错误收集和上报，ps 阿里云有免费的日志服务，可以收集前端错误，上报到阿里云服务器
    2.使用 setTimeout 替换 setInterval 用于定时器，setInterval 缺点是不能控制间隔时间，有可能浏览器重新获得焦点后会执行多次
    3.innerWidth 和 innerHeight 可以获取浏览器窗口的宽高，有些浏览器不支持，比如 IE，可以使用 document.body.clientWidth 和 document.body.clientHeight 获取

  • location 对象
    1.关注 location.href，用于获取当前页面的 url 和替换当前页面的 url，可回退
    2.关注 location.replace，用于替换当前页面的 url，不可回退

  • navigator 对象
    1.关注 navigator.userAgent，用于获取当前浏览器的 userAgent
    2.关注 navigator.language，用于获取当前浏览器的语言
    3.关注 navigator.onLine，用于获取当前网络是否连接

  • history 对象
    1.关注 history.pushState，用于替换当前页面的 url，可回退
    2.关注 history.replaceState，用于替换当前页面的 url，不可回退

事件模型

分为捕获阶段、目标阶段、冒泡阶段，捕获阶段是从最外层的元素开始，冒泡阶段是从最内层的元素开始。事件委托是事件模型应用的最常见场景。

  • addEventListener 第三个参数 useCapture
    是否在捕获阶段触发

e.targe 属性，返回事件的目标元素
e.currentTarget 属性，绑定监听事件的元素
e.stopPropagation 阻止事件传播，不仅仅是阻止事件冒泡
e.preventDefault 阻止事件默认行为，比如默认会跳转到 href 属性的链接

ajax 及 fetch API 详解

  • 使用 XMLHttpRequest 封装一个 ajax 函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function ajax(url, options) {
  const xhr = new XMLHttpRequest();
  xhr.open(options.method, url, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        options.success(xhr.responseText);
      } else {
        options.error(xhr.status);
      }
    }
  };
  if (options.method === "GET") {
    xhr.send(null);
  } else {
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(options.data);
  }
}
  • fetch
    1.不会主动设置 cookie，需要自己设置，使用 credentials 属性配置
    2.错误不会 reject，使用 response.ok 判断是否 404、500 等异常
    3.不支持设置超时
    4.支持 abort