2020年8月面试题6则
一、函数柯里化是什么? 有什么应用场景?
函数柯里化(currying)是一种编程技术,所做到的是:
- 把原本接收多个参数的函数变为只接受一个参数的函数,并返回一个接收剩余参数的函数。
应用场景:
- 封装一些含有环境判断的方法时,函数柯里化可以帮助我们减少判断条件执行的次数。
例如在封装原生 js 的 addEvent(添加监听事件) 方法时,根据当前浏览器环境使用兼容浏览器版本的 api。
使用函数柯里化,返回一个方法,达到一次判断,多处使用的效果。
var addEvent = function(ele, type, fn, isCapture) {
if(window.addEventListener) {
ele.addEventListener(type, fn, isCapture)
} else if(window.attachEvent) {
ele.attachEvent("on" + type, fn)
}
}
var addEvent = (function() {
if(window.addEventListener) {
return function(ele, type, fn, isCapture) {
ele.addEventListener(type, fn, isCapture)
}
} else if(window.attachEvent) {
return function(ele, type, fn) {
ele.attachEvent("on" + type, fn)
}
}
})()
- 在封装节流、防抖、bind 此类返回值是函数的方法时会用到函数柯里化
- 可用于 vue、react、小程序中的事件传参,在事件绑定时就执行回调函数传参,根据传参值返回真正的事件 callback 函数
<div onCick={handleClick( value )} />
<script>
handleClick = value => e => {
console.log( value, e )
}
</script>
二、webpack 是怎么处理 vue 格式的文件的?
- webpack 是使用 vue-loader 处理 vue 格式的文件的,
- 在 15 版本之后,如果要使用 vue-loader ,需要配合自带的插件 VueLoaderPlugin 一起使用
三、vue 如何在用户没登录的时候重定向到登录界面?
- 前端鉴权可以使用路由守卫,给相应需要登陆权限的路由配置 beforeEnter,判断本地是否存在 token 之类的登录信息,进行路由的重定向
- 后端可以判断请求头中携带的 cookie 或 自定义 header 中是否存在 token,解密 token 判断是否给出响应,是否重定向
四、怎么用 useEffect 模拟生命周期函数?
useEffect 有两个参数,第一个是回调函数,第二个是依赖项数组
- 不写第二个参数时,组件每次渲染后都会触发回调函数,可以模拟类组件的 componentDidUpdate
- 第二个参数为空时,只有在组件第一次渲染时才会执行回调,可以模拟类组件的 componentDidMount
- 回调的返回值也是一个回调方法,会在 useEffect 被移除时执行,可以模拟 componentWillUnmount
useEffect(() => {
// 相当于 componentDidMount
window.addEventListener('resize', onChange, false)
return () => {
// 相当于 componentWillUnmount
window.removeEventListener('resize', onChange, false)
}
}, [])
useEffect(() => {
// 相当于 componentDidUpdate
document.title = count
})
五、useCallback 是干什么的?使用 useCallback 有什么好处?
- useCallback 是一个 react 处理回调方法的 Hook,传入一个回调函数和他的依赖项数组,返回该函数的 memoized 版本
- 可以给回调方法设置依赖项,在依赖项没有发生变化的情况下,避免函数无意义的重复声明,提高代码效率
六、能简单说下 redux-saga 的工作流程吗?
- 配置 redux-saga
- 引入 redux-saga 包的 createSagaMiddleware 方法,创建 sagaMiddleware
- 在创建 store 对象时,使用 applyMiddleware 设置中间件
- 使用 sagaMiddleware 的 run 方法执行一个异步函数,函数中使用 takeEvery 监听异步 action,派发给对应的处理方法
- 使用 redux-saga
- 在组件中派发异步 action
- 异步 action 被 takeEvery 拦截到,执行对应的异步方法
- 异步操作结束后,使用 redux-saga 中的 put 方法派发扁平的 action,交给 reducer 进行处理