浏览器内置JS、事件模型及请求

BOM
location

location.href = 'http://www.baidu.com:8080/test?name=123#connent'
location.protocol = 'http:' //协议
location.host = 'www.baidu.com:8080' //域名:端口号
location.hostname = 'www.baidu.com' //域名
location.port = '8080' //端口号
location.pathname = '/test'
location.search = '?name=123'
location.hash = '#connent'
location.origin = 'http://www.baidu.com:8080'

location.assign(url)  //会触发页面加载并跳转到url地址(若没有完整origin，则在origin后面添加)
        .replace(url) //加载新url地址页面，但用户返回时不会再跳转到该页面
        .reload(true/false) //重新加载，true强制从服务器重新获取，false从缓存中读取。默认值为false
        .toString()

history

history.state //存储获取当前页面状态
       .replaceState //替换当前状态

navigator

navigator.userAgent //浏览器的user-agent信息
         .appName  //获取浏览器的名称
         .appVersion //获取浏览器的平台和版本信息
         .platform //获取运行浏览器的操作系统平台

js实现剪切板

function handleCopy(data) {
  let clipBoard = navigator.clipboard;
  //写入文本至操作系统剪贴板
  clipBoard.writeText(data).then(() => {
    console.log("复制成功！");
  });
  //写入任意数据（比如图片）至操作系统剪贴板用 clipBoard.write()
  //从剪贴板读取文本
  clipBoard.readText().then((clipText) => {
    console.log(clipText);
  });
}

screen

window.innerHeight //窗口的内部高度(包括水平滚动条的高度)
window.innerWidth  //窗口的内部宽度(包括垂直滚动条的高度)

clientHeight //height+padding
clientWidth  //width+padding

offsetHeight //height+padding+border
offsetWidth //width+padding+border

scrollHeight //元素内容的高度，包括溢出的不可见内容(height+padding)
scrollWidth  //元素内容的高度，包括溢出的不可见内容(width+padding)

getBoundingClientRect() //返回元素的大小及其相对于视口的位置
   el.getBoundingClientRect().top
   el.getBoundingClientRect().left
   el.getBoundingClientRect().bottom
   el.getBoundingClientRect().right
//兼容性 - IE会多出2像素

事件模型（冒泡/捕获）

element.addEventListener('event',function,useCaption) //useCaption默认为flase(冒泡)，true为捕获

event.stopPropagation() //阻止事件传播
event.preventDefault() //阻止默认事件
event.stopImmediatePropagation() //阻止事件传播，同时相同元素的相同事件类型的监听事件也不再执行

实现一个多浏览器兼容的事件绑定 vs addEventListener(Mozilla/Firefox)

/*1.attachEvent以on开头
 * 2.执行顺序 attachEvent - 后绑定先执行；addEventListener - 先绑定先执行
 * 3.解绑 dettachEvent vs removeEventListener
 * 4.阻断 e.cancelBubble = true vs e.stopPropagation()
 * 5.阻断默认事件 e.returnValue vs e.preventDefault */
class bindEvent{
	 constructor() {
    this.element = element;
  }
  addEventListener(type, handle) {
    if (this.element.addEventListener) {
      this.element.addEventListener(type, handle, false);
    } else if (this.element.attachEvent) {
      const element = this.element;
      this.element.attachEvent("on" + type, () => {
        handle.call(element);
      });
    } else {
      this.element["on" + type] = handle;
    }
  }
  removeEventListener(type, handle) {
    if (this.element.removeEventListener) {
      this.element.removeEventListener(type, handle, false);
    } else if (this.element.dettachEvent) {
      const element = this.element;
      this.element.attachEvent("on" + type, () => {
        handle.call(element);
      });
    } else {
      this.element["on" + type] = null;
    }
  }
  static stopPropagation(e) {
    if (e.stopPropagation) {
      e.stopPropagation();
    } else {
      e.cancelBubble = true;
    }
  }
  static preventDefault(e) {
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
    }
  }
}

性能优化 - 事件代理

// 获取父元素
let oBox = document.getElementById("box");
// 绑定点击事件处理程序
oBox.addEventListener("click", function (event) {
  // 获取触发事件的具体子元素
  var target = event.target;
  // 判断子元素的类型
  if (target.nodeName === "BUTTON") {
    // 执行相应的操作
    console.log("点击了按钮：" + target.innerText);
  }
});

网络(请求)

//实例化
const xhr = new XMLHttpRequest();
//发送 初始化连接 - open初始化连接不会发起真正的请求
xhr.open(method, url, async);
//发送请求
//post - body请求体
//get - 可以为空
//需要encodeURIComponent进行转码
xhr.send(data);
//接收(0:尚未调用open 1:已调用open 2:已调用send 3:已接受请求返回数据 4:已完成请求)
xhr.readyStatus;
xhr.onreadystatechange = () => {
  if (xhr.readyStatus === 4) {
    if (xhr.status === 200) {
      //...
    }
  }
};
//超时
xhr.timeout = 1000;
//超时触发方法
xhr.ontimeout = () => {};

手写ajax封装

function ajax(options) {
  const { url, methods, async, data, timeout } = options;
  //实例化
  const xhr = new XMLHttpRequest();

  return new Promise((resolve, reject) => {
    //成功
    xhr.onreadystatechange = () => {
      if (xhr.readyStatus === 4) {
        if (xhr.status === 200) {
          resolve && resolve(xhr.responseText);
        } else {
          reject && reject();
        }
      }
    };
    //失败/超时
    xhr.timeout = timeout;
    xhr.ontimeout = () => reject && reject("超时");
    xhr.onerror = () => reject && reject(err);
    //处理传参
    let _param = [];
    let encodeData;
    if (data instanceof Object) {
      for (let key in data) {
        _param.push(
          encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
        );
      }
      encodeData = _param.join("&");
    }
    //处理url
    if (methods === "get") {
      const index = url.indexof("?");
      if (index === -1) {
        url += "?";
      } else if (index !== url.length - 1) {
        url += "&";
      }
      url += encodeData;
    }
    //连接
    xhr.open(methods, url, async);
    if (methods === "get") {
      xhr.send(null);
    } else {
      xhr.setRequestHeader(
        "Content-type",
        "application/x-www-form-urlencoded;chartset=UTF-8"
      );
      xhr.send(encodeData);
    }
  });
}

跨域：CORS、iframe、JSONP、webpack代理

状态码
200 OK：请求成功。服务器成功地返回请求的数据。
400 Bad Request：请求无效。服务器无法理解请求的语法。
401 Unauthorized：未经授权。请求需要用户验证。
403 Forbidden：禁止访问。服务器拒绝请求。
404 Not Found：未找到。无法找到请求的资源。
500 Internal Server Error：内部服务器错误。服务器遇到错误，无法完成请求。