浏览器相关
https://segmentfault.com/a/1190000014212576
浏览器内置对象详解BOM
window:bom对象的核心，js 访问浏览器的接口
location：提供当前窗口的位置信息
navigation：浏览器系统信息
screen：浏览器外部显示器的信息
history：浏览器上网历史信息
window对象
alert()
confitm()
prompt()
open()
onerror();
- 窗口位置
screenLeft、screenTop - 定时器
setTimeout，setInterval
Location 对象
hash：
host：
hostname：
href：
pathname：
search：
Navigation 对象
接口表示用户代理的状态和表示，允许脚本查询它和注册自己进行一些活动
History 对象
保存这用户上网的历史记录，从窗口被打开的那一刻，history 对象是用窗口的浏览历史用文档和文档状态列表的形式表示
go()
back()
forward()
length
pushState
onPopState
浏览器事件模型
浏览器事件捕获，冒泡
事件捕获是由外层道最里层，事件冒泡是由最里层到最外层 window
面试题
- 事件委托/事件代理
问题1：包含几个阶段
捕获阶段->目标阶段->冒泡阶段
window-body-input-body-window
window.addEventListener('click',function(e){
//e.target.nodeName:指当前点击的元素
//e.currentTarget.nodeName 绑定事件监听的元素
e.stopPropagation()//组织事件的传播
console.log('window捕获',e.target.nodeName,e.currentTarget.nodeName)
})
[图片上传失败...(image-ec4cac-1641199197686)]
addEventListener('click',()=>{},true)
问题2：第三个参数，如果是 true 代表在捕获阶段执行，如果是 false或者不填，代表在冒泡阶段执行，默认值是冒泡
阻止事件的传播
e.stopPropagation()；
阻止的是事件的传播，冒泡或者捕获都可以阻止
问题4：场景设计题目：页面中有 div button span 都有点击事件，有一个状态 window.banned，如果被封禁了，那么所有点击事件都失效，如果没被封禁在，则正常执行，如何操作？
在 window 里面判断，如果 banned 为TRUE，则执行 e.stopPropagation()，
原理是左右的事件都要经过 window 的捕获阶段，在这个阶段执行
阻止默认行为
e.preventDefault();//阻止默认事件，例如：点击 a 标签会跳转，点击表单提交按钮会提交
兼容性
addEventListener -- firefox chrome ie 高版本 safari opera
attachEvent-- ie7
class DomEvent(){
constructor(element){
this.element = element;
}
addEvent(type,handler){
if(this.element.addEventListener){
this.element.addEventListener(type,handler,false)
}else if(this.element.attachEvent){
this.element.attachEvent(`on${type}`,function(){
handler.call(element);
})
}else {
this.element[`on${type}`] = hanlder
}
}
//removeEvent:类似，只不过api 不同
}
tip 类数组
类数组想要调用数组上的方法：
Array.prototype.indexOf.call(leishuzu,target)
或者 Array.from(leishuzu)
ajax 和 fetch API
XMLHTTPRequest
如何使用：
const xhr = new XMLHttpRequest();
xhr.open('GET','http://xxxx/servicex');
// 先监听状态
xhr.onreadystatechange = function(){
if(xhr.readDtate !== 4){
return;
}
if(xhr.status === 200){
console.log(xhr.responseText);
}else{
console.error('error')
}
}
xhr.timeout = 3000;
xhr.ontimeout = () => {
console.log('chaoshi')
}
//然后再发送请求
xhr.send();
fetch
fetch内部封装了 promise，示例代码：
fetch('http://domain/',{
method:'GET'
}).then(response => {
if(response.ok){
//success
return response.json();
throw new Error('error');
}
}).then(json =>{
console.log(json)
}).catch(error => {
console.log(error)
})
fetch 本身不支持设置超时，可以自己封装一个
function fetchTimeout(url,init,timeout=3000){
return new Promise((resolve,reject) => {
fetch(url,init).then(resolve).catch(reject);
setTimeout(reject,timeout)
})
}
// 课后作业：封装一个通用的异步函数的超时逻辑
请求头
method：请求方法
path：请求路径
cookie
为什么 cdn 域名和业务域名不一样？
安全问题，不想暴露业务给 cdn 厂商
cdn request header 携带了更多资源
referer：判断当前浏览器从那个页面来
user-agent：
response header
access-control-allow-origin:限制跨域
content-encoding:gzip
set-cookie: login ，设置 cookie
status
200 get 成功
201 post 成功
301 永久重定向
302 临时重定向
304 协商缓存 服务器文件未修改
400 客户端请求有语法错误，不能被服务器识别
403 服务器受到请求，但是拒绝提供服务，可能是跨域
404 请求的资源不存在
405 请求的method不允许
500 服务器发生不可预期的错误
last-modified:最后修改时间
etag
面试题：vue&react 都会存在一个 index.html 文件，如果要做缓存的话，适合做什么缓存？
协商缓存
网友评论