题目目录
ajax fetch axios 的区别
ajax 是一种技术称呼,即使用 JS 进行异步请求,不是具体的 API 和库。基于当时 JS 规范,异步请求主要使用 XMLHttpRequest 这个底层 API 。
- fetch 是新的异步请求 API ,可代替 XMLHttpRequest。
- axios 是第三方库。
// 用 XMLHttpRequest 实现 ajax:
function ajax(url, successFn) {
const xhr = new XMLHttpRequest()
xhr.open("GET", url, false)
xhr.onreadystatechange = function () {
// 这里的函数异步执行,可参考之前 JS 基础中的异步模块
if (xhr.readyState == 4) {
if (xhr.status == 200) {
successFn(xhr.responseText)
}
}
}
xhr.send(null)
}
// 用 fetch 实现一个 ajax
function ajax(url) {
return fetch(url).then(res => res.json())
}
节流和防抖
防抖和节流都用于处理频繁触发的操作,优化操作体验。
防抖是限制执行次数,多次密集的触发只执行一次。如输入搜索框。
节流是限制执行次数,有节奏的执行。如拖拽回调/上传进度的回调。
触发频率:
- 防抖,不固定。
- 节流,固定。
场景:
- 防抖,结果式,即一次调用即可。
- 节流,过程式,即需要持续一个过程,一次不够。
// 实现防抖
function debounce(fn, delay = 200) {
let timer = 0
return function () {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, arguments) // 透传 this 和参数
timer = 0
}, delay)
}
}
// 实现节流
function throttle(fn, delay = 100) {
let timer = 0
return function () {
if (timer) return
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = 0
}, delay)
}
}
箭头函数的缺点
箭头函数的缺点:
- arguments 参数
- 无法改变 this
不适用的场景:
- 对象方法
- 对象原型
- 构造函数
- 动态上下文的回调函数
- Vue 生命周期和methods
for…in 和 for…of 的区别
for…in 遍历 key , for…of 遍历 value。
for…in 可以遍历对象,for…of 不可以。
for…of 可以遍历 Map/Set ,for…in 不可以。
for…of 可遍历 generator ,for…in 不可以。
- for…in 遍历一个对象的可枚举属性,如对象、数组、字符串。针对属性,所以获得 key
- for…of 遍历一个可迭代对象,如数组、字符串、Map/Set 。针对一个迭代对象,所以获得 value
连环问:for await…of
用于遍历异步请求的可迭代对象。
JS 严格模式
- 全局变量必须声明
- 禁止使用 with
- 创建 eval 作用域
- 禁止 this 指向全局作用域
- 函数参数不能重名
Vue computed 和 watch 区别
- computed 就已有数据产出新数据,有缓存
- watch 监听已有数据
Vue 组件通讯
- 父子组件通讯
props
emits
this.$emit
$attrs
(也可以通过v-bind="$attrs"
向下级传递)$parent
$refs
- 多级组件上下级
provide
inject
- 跨级、全局
- 自定义事件
- Vuex
Vuex中mutation和action的区别
- mutation
- 建议原子操作,每次只修改一个数据,不要贪多
- 必须是同步代码,方便查看 devTools 中的状态变化
- action
- 可包含多个 mutation
- 可以是异步操作
px、%、em、rem、vw/vh 的区别
- px:像素,基本单位,绝对单位(其他的都是相对单位)。
- %:相对于父元素的尺寸。
- em:相对于当前元素的
font-size
。
首行缩进可以使用text-indent: 2em
。 - rem = root em
相对于根元素的font-size
。可以根据媒体查询,设置根元素的font-size
,实现移动端适配。 - vw 屏幕宽度的 1%
- vh 屏幕高度的 1%
- vmin 两者最小值
- vmax 两者最大值
offsetHeight、clientHeight 、scrollHeight区别
- offsetHeight: border + padding + content
- clientHeight: padding + content
- scrollHeight: padding + 实际内容的高度
- scrollTop scrollLeft:DOM 内部元素滚动的距离
HTMLCollection 和 NodeList 的区别
HTMLCollection 和 NodeList 的区别,Node 和 Element 的区别
DOM 结构是一棵树,树的所有节点都是 Node ,包括:document,元素,文本,注释,fragment 等。
- HTMLCollection 是 Element 集合,NodeList 是 Node 集合
- Node 是所有 DOM 节点的基类,Element 是 html 元素的基类
TCP 连接 三次握手 四次挥手
握手,是建立连接。挥手,就是告别,就是关闭连接。
三次握手:
过程
- 客户端发包,服务端收到。服务端确认:客户端的发送能力是正常的。
- 服务端发包,客户端收到。客户端确认:服务端的接收能力是正常的。
- 客户端发包,服务端收到。服务端确认:客户端即将给我发送数据,我要准备接收。
四次挥手:
过程
- 客户端发包,服务端接收。服务端确认:客户端已经请求结束
- 服务端发包,客户端接收。客户端确认:服务端已经收到,我等待它关闭
- 服务端发包:客户端接受。客户端确认:服务端已经发送完成,可以关闭
- 客户端发包,服务端接收。服务端确认:可以关闭了
跨域为何需要 options 请求?
浏览器同源策略,默认限制跨域请求。跨域的解决方案:
- jsonp
- CORS
options 请求就是对 CORS 跨域请求之前的一次预检查,检查成功再发起正式请求,是浏览器自行处理的。