浏览器相关

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 文件，如果要做缓存的话，适合做什么缓存？

协商缓存

FFYY-7216 3-浏览器相关