1. 浏览器事件模型
- 事件的捕获和冒泡
- addEventListener & removeEventListener
- 兼容IE7 8 attachEvent
- 事件代理/事件委托
事件代理/事件委托
将孩子的事件监听委托给父亲，优化同类型监听绑定带来的大量内存消耗
// 每一个子节点单独绑定
const liList = document.querySelectorAll('li')
for (let i = 0; i < liList.length; i++) {
liList[i].addEventListener('click', (e) => {
alert(i + '' + liList[i].innerHtml)
})
}
// 委托父亲节点来绑定事件
const ul = document.querySelector('ul')
ul.addEventListener('click', (e) => {
const liList = document.querySelectorAll('li')
const index = Array.prototype.indexOf.call(liList, e.target)
if (index >= 0) {
alert(`${index}, ${e.target.innerHTML}`)
}
})
2. 浏览器请求相关
2.1 XML 请求
const xhr = new XMLHttpRequest()
xhr.open('GET', 'https://baidu.com')
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) {
return
}
if (xhr.state === 200) {
console.log(xhr.responseText)
} else {
console.log('HTTP error', xhr.status, xhr.statusText)
}
}
// xhr.timeout = 1000
// xhr.ontimeout = () => {
// console.log(xhr.responseURL)
// }
// xhr.upload.onprogress = p => {
// console.log (Math.round((p.loaded / p.total) * 100) + '%')
// }
xhr.send()
2.2 fetch
使用 promise 来实现 timeout，统一的状态管理十分好用
fetch('https://domain/service', {
method: 'GET',
credentials: 'same-origin'
}).then(response => {
if (response.ok) {
return response.json()
}
throw new Error('http error')
}).then(json => {
console.log(json)
}).catch(e => {
console.log(e)
})
function fetchTimeout (url, opts, timeout) {
return new Promise((resolve, reject) => {
fetch(url, opts).then(resolve).catch(reject)
// 时间到了执行 resolve， 后面 fetch 就算执行到 resolve 也不会扭转状态了
setTimeout(reject, timeout)
})
}
中止 fetch，AbortController 与 fetch 搭配使用
AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求
const controller = new AbortController()
fetch('http://domain/service', {
method: 'GET',
signal: controller.signal
})
.then(res => res.json)
.then(json => console.log(json))
.catch(error => console.log(error))
controller.abort()
2.3 ajax
手写 ajax
interface IOptions {
url: string;
method: 'GET' | 'POST';
timeout?: number;
data?: any;
}
function objToQuery (obj: Record<string, any>) {
const arr = []
for (let key in obj) {
arr.push(`${key}=${encodeURIComponent(obj[key])}`)
}
return arr.join('&')
}
function ajax (options: IOptions = {
url: '',
method: 'GET'
}) {
return new Promise((resolve, reject) => {
let xhr
let timer
if ((window as any).XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
xhr.onreadystatechange = () => {
if (xhr.readState === 4) {
if (xhr.state >= 200 && xhr.state < 300 || xhr.state === 304) {
resolve(xhr.responseText)
} else {
reject(xhr.state + ' ' + xhr.stateText)
}
clearTimeout(timer)
}
}
if (options.method.toUpperCase() === 'GET') {
xhr.open('GET', options.url + '?' + objToQuery(options.data), true)
xhr.send()
} else if (options.method.toUpperCase() === 'POST') {
xhr.open('POST', options.url, true)
xhr.setRequestHeader('ContentType', 'application/x-www-form-urlencoded')
xhr.send(options.data)
}
if (options.timeout) {
timer = setTimeout(() => {
reject('http timeout')
xhr.abort()
}, options.timeout);
}
})
}
2.4 请求头
2.4.1 cookie
为什么常见的 CDN 域名和业务域名不一样？
// www.baidu.com 业务域名
// cdn.aa-baidu.com cdn 域名
为了不携带 cookie
- 安全问题。公司不想把携带用户信息的 cookie 给到三方厂商
- cdn 本意为了加速静态文件的加载，与用户态无关，本不需要 cookie，所以不携带 cookie 可以减少请求头的体积。
- 避免静态资源加载阻塞了服务端请求。HTTP 1.1 / 1.0 同源请求并发限制 chrome、IE、Safari 为 6
2.4.2 referer 来源
2.4.3 user-agent 判断 webview
User-Agent 首部包含了一个特征字符串，用来让网络协议的对端来识别发起请求的用户代理软件的应用类型、操作系统、软件开发商以及版本号。
2.5 响应头
access-control-allow-origin: *
content-encoding: gzip
set-cookie
2.6 status
200 success
201 created 用于 POST 请求成功
301 永久重定向
302 临时重定向
304 协商缓存，服务器文件未修改
last-modified: 文件最后一次修改时间
etag: 计算 hash 来判断文件是否修改
强缓存
Cache-Control: max-age=1000 秒
expires 过期时间 (客户端时间和服务端时间可能有偏差)
优先级
Cache-Control > expires > Etag > Last-Modified
