一.詳解瀏覽器事件捕獲與冒泡
1. 事件委托/事件代理
捕獲階段-->目標階段-->冒泡階段
window.addEventListener('click',function(e){
console.log('window捕獲',e.target.nodeName,e.currentTarget.nodeName)
},true)
- 第三個參數為true，則監(jiān)聽捕獲事件寡喝，不傳或者傳false糙俗，則監(jiān)聽冒泡事件
-
e.target指的是點擊的元素，e.currentTarget指的是當前觸發(fā)事件的元素
2. 阻止事件的傳播
e.stopPropagation()真正的作用是阻止事件的傳播预鬓，既可以阻止事件的捕獲也可以阻止事件的冒泡
面試題：
現(xiàn)在有一個頁面巧骚，這個頁面上有許多元素，div格二、p劈彪、button等
每個元素都有自己的click事件，都不相同
現(xiàn)在有一個新需求顶猜，一個用戶進入這個頁面的時候沧奴，會有一個狀態(tài)：banned，我們可以在全局上拿到這個狀態(tài)：window.banned长窄，
為true的話表示當前用戶被封禁滔吠，用戶點擊頁面的任何元素都不執(zhí)行原有邏輯，而是alert彈窗挠日，提示你被封禁了疮绷；
為false的話表示有操作權限。
請問：如何實現(xiàn)肆资？
答：
方案一：在最外層的一個元素上綁定上一個捕獲事件矗愧，即addEventListener里的第三個參數為true，如果window.banned為true則e.stopPropagation()。
//const body = document.getElementsByTagName('body')
window.addEventListener('click',function(e){
if(window.banner){
e.stopPropagation()
alert('你被封禁了')
return
}
...
},true)
方案二：window.banner為true的時候展示一個全屏的最高層級（即：z-index:99999）的div遮罩唉韭，遮住整個頁面夜涕。
3.阻止默認事件
e.preventDefault()
這個沒啥好說的
4.兼容性問題
addEventListener --> firefox、Chrome属愤、高版本IE女器、safari、opera
attachEvent --> IE7住诸、IE8驾胆，除了政府網站，大部分公司不會再去針對他們做兼容了
IE瀏覽器里沒有事件捕獲贱呐，只有事件冒泡
針對兼容性做一下封裝
class BomEvent{
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(){
// 這是處于ie7或8的一個環(huán)境丧诺，不支持箭頭函數，所以這里做一下綁定
handler.call(element)
})
} else {
this.element[`on${type}`]=handler
}
}
removeEvent(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
}
}
}
// IE瀏覽器里沒有事件捕獲奄薇，只有事件冒泡
function stopPropagation(event){
if(event.stopPropagation){
event.stopPropagation() //標準w3c瀏覽器
}else{
event.cancelBubble = true // IE
}
}
function preventDefault(event){
if(event.preventDefault){
event.preventDefault()
}else{
event.returnValue = false
}
}
二：瀏覽器請求相關內容Ajax與fetch
原生ajax：
const xhr = new XMLHttpRequest()
xhr.open('GET','http://domain/service') //建立連接驳阎，并沒有發(fā)送請求
//監(jiān)聽狀態(tài)
xhr.onreadystatechange = function(){
// 表示請求還沒有完成
if(xhr.readyState !== 4){
return
}else if(xhr.status === 200){
// 請求成功
console.log(xhr.responseText)
}else{
//報錯了
console.error(`HTTP error,status=${xhr.status},errorText = ${xhr.statusText}`)
}
}
// 超時時間
xhr.timeout = 3000
xhr.ontimeout = ()=>{
console.log('請求超時')
}
// 上傳進度條
xhr.upload.onprogress = p => {
const percent = Math.round((p.loaded / p.total)*100) + '%'
}
xhr.send() //發(fā)送請求
fetch:瀏覽器新增的fetch，內部封裝了promise
fetch('http://domain/service',{
method: 'GET',
credentials: 'same-origin' // 同域的請求會帶上cookie
}).then(response => {
if(response.ok){
//請求成功
return response.json()
}
throw new Error(' http error')
}).then(json => {
console.log(json)
}).catch(error => {
console.error(error)
// 統(tǒng)一的錯誤管理
// 接收fetch出現(xiàn)的錯誤
// 接收請求錯誤信息
})
fetch不能直接通過catch來獲取請求錯誤信息馁蒂，而是要通過判斷response.ok來返回出錯誤信息再通過catch來抓到錯誤信息
fetch自身不支持設置請求超時呵晚，我們自己來封裝一個
function fetchTimeout(url,init.timeout=3000){
return new Promise((resolve,reject)=>{
fetch(url,init).then(resolve).catch(reject)
setTimeOut(reject,timeout)
})
}
中斷一個請求
//用于中斷請求
const controller = new AbortController()
fetch('http://domain/service',{
method: 'GET',
credentials: 'same-origin', // 同域的請求會帶上cookie
signal:controller.sianal
}).then(response => {
if(response.ok){
//請求成功
return response.json()
}
throw new Error(' http error')
}).then(json => {
console.log(json)
}).catch(error => {
console.error(error)
})
controller.abort()//用于中斷請求
請求頭request-header
referer：表示來源，你是從哪一個頁面過來這個頁面的沫屡，標識訪問路徑
user-agent：用來判斷環(huán)境饵隙，設備標識
響應頭response-header
access-control-allow-origin:跨域
用于做域名限制，跨域
access-control-allow-origin:/* ,不做限制
-
content-encoding: 是一個實體消息首部沮脖，用于對特定媒體類型的數據進行壓縮金矛。當這個首部出現(xiàn)的時候，它的值表示消息主體進行了何種方式的內容編碼轉換倘潜。這個消息首部用來告知客戶端應該怎樣解碼才能獲取在
Content-Type中標示的媒體類型內容绷柒。<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="js" cid="n20" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">Content-Encoding: gzip
Content-Encoding: compress
Content-Encoding: deflate
Content-Encoding: identity
Content-Encoding: br</pre> set-cookie:響應首部
Set-Cookie被用來由服務器端向客戶端發(fā)送 cookie。
status狀態(tài)碼
響應分為五類：信息響應(100–199)涮因，成功響應(200–299)，重定向(300–399)伺绽，客戶端錯誤(400–499)和服務器錯誤 (500–599)养泡。
請求成功。成功的含義取決于HTTP方法：
GET：資源已被提取并在消息正文中傳輸奈应。
HEAD：實體標頭位于消息正文中澜掩。
POST：描述動作結果的資源在消息體中傳輸。
TRACE：消息正文包含服務器收到的請求消息
該請求已成功杖挣，并因此創(chuàng)建了一個新的資源肩榕。這通常是在POST請求，或是某些PUT請求之后返回的響應惩妇。
重定向株汉。
被請求的資源已永久移動到新位置筐乳，并且將來任何對此資源的引用都應該使用本響應返回的若干個 URI 之一。如果可能乔妈，擁有鏈接編輯功能的客戶端應當自動把請求的地址修改為從服務器反饋回來的地址蝙云。
臨時重定向。
請求的資源現(xiàn)在臨時從不同的 URI 響應請求路召。由于這樣的重定向是臨時的勃刨，客戶端應當繼續(xù)向原有地址發(fā)送以后的請求。只有在Cache-Control或Expires中進行了指定的情況下股淡，這個響應才是可緩存的身隐。
304：協(xié)商緩存，服務器文件未修改
面試題
vue/react創(chuàng)建的單頁面應用（spa）唯灵，生成的index.html如果要做緩存應該做什么緩存贾铝？
答：協(xié)商緩存
