浏览器内置JS对象&事件&请求
BOM - 【Browser】浏览器对象功能区域的相关操作
location - 跳转 / 读取路由数据
location.href => 'https://www.baidu.com/search?class=browser#comments'
location.protocol => 'https';
location.host => 'www.baidu.com';
location.origin => 'https://www.baidu.com';
location.port => '8080';
location.pathname => '/search/';
location.search = '?class=browser';
location.hash => '#comments'; // 单页路由 | iframe通信location.assign('...') // 跳转到指定的path, 替换pathname的值
location.replace('...')// 效果同上，同时替换浏览历史
location.reload() // 刷新
locatoin.toString() // 返回当前地址字符串面试方向
1. location本身的api操作
2. 路由相关 跳转 / 参数 / 操作 => 场景：history | hash
3. url处理 - 正则 or 手写处理【history】
history.state => 存储当前页面的状态history.pushState() // 流转到指定状态页面
history.replaceState() // 替换当前的状态// 手写location对象
navigator
navigator.userAgent
获取当前用户基础信息 UA读取信息 => 数据采集 / 流量监控 / 浏览器兼容性优化 剪切板 / 键盘 => 如何做剪切板 / 监听键盘输入
screen
// 表示显示区域 -- 屏幕// 判断区域大小
1. window 视窗判断：
全局入口window.innerHeightwindow.innerWidth文本处获取(元素本身的宽高)document.documentElement.clientHeightdocument.documentElement.clientWidthdocument.body.clientHeightdocument.body.clientWidth网页size类型 =>
offsetHeight / offsetWidth = clientHeight + 边框 + 滚动条document.documentElement.offsetHeightdocument.documentElement.offsetWidthdocument.body.offsetHeightdocument.body.offsetWidth 定位类型 =>
scrollLeft / scrollTop - 相对概念 距离常规位置（左上角）滚动距离
offsetLeft / offsetTop - 距离常规位置的距离document.documentElement.offsetHeightdocument.documentElement.offsetWidthdocument.body.offsetHeightdocument.body.offsetWidth 集大成者
el.getBoundingClientRect() - .top / .left / .bottom / .right
* 兼容性 - 在IE中会多2px
event事件模型
<div><p>Click</p>
</div>
// 冒泡（由深到浅） p => div => body => HTML => document
// 捕获（由浅入深） document => HTML => body => div => p// 监听事件 事件名，监听到后的回调，是否捕获
el.addEventListener(eventName, function, useCapture)// 1. 如何阻止事件的传播
event.stopPropagation();
// 阻止默认事件的传播 => 无法阻止默认事件的发生【例如a标签跳转...】// 2. 如何阻止默认事件传播
event.preventDefault(); // 3. 阻止相同节点绑定多个同类事件 => 兼容 & 性能
event.stopImmediatePropagation();// 4. 手写，实现一个多浏览器兼容的事件绑定
// attachEvent vs addEventListener
// 区别：
// a. 传参 attachEvent使用onXXX addEventListener用字符串
// b. 执行顺序, attachEvent - 后绑定 先执行
// addEventListener - 先绑定 先执行
// c. 解绑不同 detachEvent vs removeEventListener
// d. 阻断不同 e.cancelBubble = true vs e.stopPropagation();
// e. 阻断默认事件 e.returnValue = false vs e.preventDefault();/** 手写代码 */
class BindEvent {constructor(element) {this.element = element;}addEventListenerr = (type, handler) => {if (this.element.addEventListener) {this.element.addEventListener(type, handler, false);} else if (this.element.attachEvent) {const element = this.element;this.element.attachEvent('on' + type, () => {handler.call(element);})} else {this.element['on' + type] = handler;}}removeEventListener = (type, handler) => {if (this.element.removeEventListener) {this.element.removeEventListener(type, handler, false);} else if (this.element.detachEvent) {this.element.detachEvent('on' + type, handler);} else {this.element['on' + type] = null;}}static stopPropagation(event) {if (event.stopPropagation) {event.stopPropagation();} else {event.cancelBubble = true;}}static preventDefault(event) {if (event.preventDefault) {event.preventDefault();} else {event.returnValue = false;}}}// 5. 性能 - 事件代理
<ul class="list"><li></li><li></li><li></li>
</ul>const list = document.querySelector('.list');function onClick(event) {let event = event || window.event;if (event.target.nodeName.toLowerCase() === 'li') {const liList = this.querySelector('li');const index = [...liList].indexOf(event.target);}
}list.addEventListener('click', onClick, false);
网络层
// 实例化
const xhr = new XMLHttpRequest();// 初始化连接 建立连接
xhr.open(method, url, async)// end发送请求
xhr.send(data); // data - encodeURIComponent// 接收
xhr.reradyStatus
// 0 - 尚未调用open方法
// 1 - 已经调用了open
// 2 - 已经send
// 3 - 已经收到请求的返回数据了
// 4 - 请求已完成
xhr.onreadystateChange = () => {if (xhr.readyStatus === 4) {if (xhr.status >= 200 && xhr.status <= 300 ||xhr.status === 304) {console.log('success', xhr.responseText);}}
}// 超时时间
xhr.timeout = 1000;
xhr.ontimeout = () => {// 超时操作
}// 面试方向
1. Restful - GET POST PUT DELETE
2. 跨域 - CORS / JSONP
3. 状态码 => 3xx (浏览器缓存概念) => 强缓存 / 协商缓存
