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等)，并将其打包为合适的格式以供浏览器使用