前端常见面试题总结(持续更新中~~~)

promise

是什么

Promise 是一个对象,一般作为构造函数来使用(new Promise),它里面有 3 种状态,pending(处理中)、fulfilled(成功)、rejected(失败)。

怎么用

拿到一个 Promise 实例后,具有 then 和 catch 方法,一般 then 里面拿到成功的结果,catch 拿到失败的结果。

解决了什么问题

它主要解决了回调地狱的问题,但是 Promise 并不能简化代码。

有什么替代方案

所以我一般工作的时候都会配合 async/await 来使用,这样既解决了回调地狱又简化了代码。


rem

是什么

REM 是一个相对于根元素(HTML)字体大小的一个单位。

怎么用

一般我们会做移动端适配

1、引入 flexible.js,它默认划分了 10 份

2、所以基准值设置为 75px(把量取到的设计稿的宽度都除以 75 转成 REM)

3、因为 flexible 它能根据不同设备的宽度动态的计算出根元素的字体大小,这样呢?根元素的字体大小都变了,所以所有使用 REM 做单位的元素自然就跟着变了。

解决了什么问题

解决了移动端适配的问题。

有什么替代方案

vw/vh


1、用户登录成功后,获取用户信息,用户信息里面包含当前用户的==权限标识==。

await store.dispatch('user/getUserInfo')

2、根据当前==权限标识==筛选出有权限的路由(动态路由)。

const routes = await store.dispatch('permission/filterRoutes', roles.menus)

3、之后做了 2 件事情。

4、第 1 件事情,把筛选出的有权限的路由通过 addRoutes 添加到了 router 实例,目的:为了能够通过地址栏能访问。

router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }])

5、第 2 件事情,把筛选出的有权限的路由存到了 Vuex 一份,目的:为了侧边栏能够使用。

// 在这个 action 里面做的
const routes = await store.dispatch('permission/filterRoutes', roles.menus)

6、已经添加了路由实例,为什么不直接从路由实例获取呢?因为通过 addRoutes 后续添加的路由确实访问不到,官方建议放到 Vuex 一份。

内存泄露

不在使用的对象,却没有被垃圾回收(Garbage Collection),就是内存泄露。

什么情况下可能会造成内存泄露

  1. 无意的全局变量
// 无意的全局变量,会造成内泄漏
function fn() {
    obj = {
        age: 18,
    }
}
// 函数都已经调用完毕了,内部的对象却没有释放掉
fn()
console.log(obj)
function fn() {
    this.obj = {
        age: 18,
    }
}
fn()
  1. DOM 引用
<button id="btn">btn</button>
<script>
    const oBtn = document.querySelector('#btn')
    oBtn.onclick = function () {
        console.log(1)
    }
    document.body.removeChild(oBtn)

    oBtn.click()
    oBtn.onclick()
</script>

解决

oBtn = null // 手动释放

什么是webpack

webpack是一个打包模块化JavaScript的工具,在webpack里一切文件皆模块,通过loader转换文件,通过plugin注入钩子,最后输出由多个模块组合成的文件,webpack专注构建模块化项目,webpack可以看作是模块打包机:它做的事情是,分析你的项目结构,找到javaScript模块以及其他的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其打包为合适的格式以供浏览器使用

上一篇:仿TheNorthFace官网 购物车效果


下一篇:DOM操作应用高级