以下是本人面试后总结出来的面试知识点：

1.1. 模块化

\1. ES6

\2. Commonjs

1.2. 构建工具

\1. Webpack核心思想：模块化打包

\2. Webpack基本配置: entry, output, module&rules, plugins, devServer, devtool, resolve

\3. 打包各种资源: JS / CSS/img/html/…

\4. 加分项: 自定义webpack打包环境, Webpack性能优化

1.3. 前后台交互

\1. 原生ajax请求 xhr/fetch

\2. ajax请求跨域问题

\3. ajax请求库axios的理解和使用

\4. axios的二次封装

\5. 加分项: axios的核心实现源码分析

1.4. 框架

\1. jQuery

(1) 整体理解

(2) jQuery核心函数

(3) jQuery核心对象

\2. Vue

(1) Vue基本核心语法

(2) Vue-router

(3) Vuex

(4) MVVM实现原理

\3. React

(1) React基本核心语法

(2) React-router

(3) Redux

2. JS异步编程

2.1. 前置知识

\1. JS语言的执行环境是"单线程", 也就是我们写的所有js代码都是在一个线程(主线程)上执行

\2. 理解单线程:

(1) 就是指一次只能完成一件任务。

(2) 如果有多个任务，就必须排队，前一个任务完成，再执行后面一个任务，以此类推

\3. js执行任务的2种模式

(1) 同步（Synchronous）

① 后一个任务等待前一个任务结束，然后再执行，

② 程序的执行顺序与任务的排列顺序是一致的、同步的

(2) 异步（Asynchronous）

① 每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，

② 后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

\4. 为什么需要异步JS?

(1) 浏览器端:

① 耗时很长的操作都应该异步执行，避免浏览器失去响应

② 给时机让浏览器能去更新界面, 响应用户操作

(2) Node端:

① "异步模式"是唯一的模式，执行环境是单线程的

② 处理请求的回调函数/数据库操作/文件读写操作都必须是异步处理, 否则处理多个请求时很快就会失去响应

\5. JS常用的异步编码方式

(1) 回调函数

(2) 事件机制

(3) 消息订阅与发布 / 全局事件总线

(4) Promise

(5) async & await

2.2. 回调函数

\1. 异步编程最基本的方法, 所有模式都是在此基础上进行封装扩展而来

\2. 回调函数的执行模式:

(1) 异步执行

(2) 同步执行

\3. 异步回调的缺点:

(1) 不利于代码的阅读和维护，各个部分之间高度耦合。

(2) 容易导致回调地狱问题

2.3. 事件监听

\1. 事件驱动模式:

(1) 任务的执行不取决于代码定义的顺序，而取决于某个事件是否发生

(2) 事件监听函数定义时不会执行, 只有当事件发生(分发事件)后才执行

\2. 分类:

(1) 原生DOM事件

(2) 自定义事件

\3. 操作:

(1) 在某个元素/组件对象上绑定特定事件监听

(2) 在某个元素/组件对象上分发事件

\4. 特点:

(1) 针对某个DOM元素绑定监听和分发事件

(2) 针对某个组件对象绑定监听和分发事件

2.4. 消息订阅/发布与全局事件总线

\1. 消息订阅/发布:

订阅全局消息

发布全局消息

\2. 全局事件总线:

绑定事件监听

分发事件

\3. 特点:

分发事件后, 所有同名的事件监听回调都会调用

2.5. Promise

\1. 实现异步编程新的通用解决方案

\2. 相对于纯回调的优势

(1) 指定异步回调函数的方式更灵活(可以在启动异步任务后,甚至可以在任务完成后)

(2) 通过then的链式调用解决回调地狱的问题

\3. 不足: 还需要指定回调函数

2.6. async/await

\1. 基于promise的语法糖, 简化了promise对象的使用(不再使用回调函数编码)

\2. 以同步编码方式实现的异步流程

\3. 是js异步编程的终极解决方案(基本上可以这样说)

2.7. JS事件循环机制

\1. js是单线程运行的

\2. js的回调函数可以异步执行, 也可以同步执行

\3. js通过event-loop机制实现了js的单线程异步执行

(1) JS引擎解析执行js代码总是在主线程执行(WebWorks除外)

(2) 浏览器有在分线程执行的对应管理模块(浏览器是多线程执行的)

① 定时器

② DOM事件监听

③ ajax请求

④ Promise

⑤ MutationObserver

(3) JS引擎有专门的回调队列, 缓存待执行的回调函数

① 宏队列

② 微队列

2.8. Promise深入理解

\1. 如何改变promise的状态?

\2. 一个promise指定多个成功/失败回调函数, 都会调用吗?

\3. promise.then()返回的新promise的结果状态由什么决定?

(1) 返回一个非promise值 resolved

(2) 抛出异常 rejected

(3) 返回一个promise

① 成功了 resolved

② 失败了 rejected

③ pending pending

\4. 改变promise状态和指定回调函数谁先谁后?

\5. promise如何串连多个操作任务?

\6. promise异常传(穿)透?

\7. 中断promise链

2.9. 自定义Promise

\1. 定义整体结构

\2. Promise构造函数的实现

\3. promise.then()/catch()的实现

\4. Promise.resolve()/reject()的实现

\5. Promise.all/race()的实现

\6. Promise.resolveDelay()/rejectDelay()的实现

\7. ES6 class版本

3. 前后台交互

3.1. 接口的理解/测试/模拟

\1. 前后台交互接口: 请求地址 / 请求方式 / 请求参数格式 / 响应数据格式

\2. 测试接口: 使用postman

\3. 模拟(mock)接口: 使用mockjs / json-server / webpack / node&express

3.2. ajax请求

\1. 区别ajax请求与一般的HTTP请求

\2. 原生ajax请求: XHR与fetch

\3. XHR的基本编码流程

3.3. 解决ajax跨域问题的常见技巧

\1. JSONP： json with padding（垫子）

\2. CORS: 服务器端设置响应头： Access-Control-Allow-Origin: www.taobao.com

\3. 代理

3.4. axios的理解和使用

3.4.1. axios的特点

(1) 基于xhr/http包 + promise的异步ajax请求库

(2) 浏览器端/node端都可以使用

(3) 支持请求／响应拦截器

(4) 支持请求取消

(5) 请求/响应数据转换

(6) 批量发送多个请求

3.4.2. axios的常用语法

axios(config): 通用/最本质的发任意类型请求的方式

axios(url[, config]): 可以只指定url发get请求

axios.request(config): 等同于axios(config)

axios.get(url[, config]): 发get请求

axios.delete(url[, config]): 发delete请求

axios.post(url[, data, config]): 发post请求

axios.put(url[, data, config]): 发put请求

axios.create([config]): 创建一个新的axios(它没有下面的功能)

axios.defaults.xxx: 请求的默认全局配置

axios.interceptors.request.use(): 添加请求拦截器

axios.interceptors.response.use(): 添加响应拦截器

axios.Cancel(): 用于创建取消请求的错误对象

axios.CancelToken(): 用于创建取消请求的token对象

axios.isCancel(): 是否是一个取消请求的错误

axios.all(promises): 用于批量执行多个异步请求

axios.spread(): 用来指定接收所有成功数据的回调函数的方法

3.5. axios的二次封装

\1. 请求loading

\2. token处理: 通过请求头携带token数据, 对token进行校验处理

\3. 异步请求成功的数据不是response, 而是response.data

\4. 统一处理请求异常

\5. 对请求体参数进行urlencode处理, 而不使用默认的json方式(后台接口不支持)

3.6. axios的核心实现分析

3.6.1. instance与axios的区别?

\1. 相同:

(1) 都是一个能发任意请求的函数: request(config)

(2) 都有发特定请求的各种方法: get()/post()/put()/delete()

(3) 都有默认配置和拦截器的属性: defaults/interceptors

\2. 不同:

(1) 默认配置不一样, 且相互之间是独立的

(2) instance没有axios后面添加的一些方法: create()/CancelToken()/all()

3.6.2. axios运行的整体流程?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WPu30d97-1647229293205)(file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg)]

3.6.3. axios的请求/响应拦截器是什么?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JEvGrOvJ-1647229293207)(file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image004.jpg)]

\1. 请求拦截器:

在真正发送请求前执行的回调函数

可以对请求进行检查或配置进行特定处理

成功的回调函数, 传递的默认是config(也必须是)

失败的回调函数, 传递的默认是error

\2. 响应拦截器

在请求得到响应后执行的回调函数

可以对响应数据进行特定处理

成功的回调函数, 传递的默认是response

失败的回调函数, 传递的默认是error

3.6.4. axios的请求/响应数据转换器是什么?

\1. 请求转换器: 对请求头和请求体数据进行特定处理的函数

if (utils.isObject(data)) {

setContentTypeIfUnset(headers, ‘application/json;charset=utf-8’);

return JSON.stringify(data);

}

\2. 响应转换器: 将响应体json字符串解析为js对象或数组的函数

response.data = JSON.parse(response.data)

4. Webpack打包项目

4.1. webpack的理解

\1. 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具

\2. 当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。

4.2. webpack的几个核心概念

\1. 入口**(entry)**: 打包依赖图的入口js

\2. 输出**(output)**: 打包生成的bundle

\3. loader: webpack 只能理解 JS 和 JSON 文件, loader打包其它类型模块

\4. 插件**(plugin)**: 用来处理各种各样的任务(webpack和loader处理不了)

\5. 模式**(mode)**: 用于启用 webpack 内置的一系列配置

4.3. webpack常用一级配置

\1. entry

\2. output

\3. module & rules

\4. plugins

\5. mode

\6. devServer

\7. devtool

\8. resolve

\9. optimization

4.4. 说说几个常见的loader

\1. babel-loader

\2. css-loader/style-loader/less-loader/stylus-loader/ sass-loader/postcss-loader

\3. file-loader / url-loader

\4. eslint-loader

\5. vue-loader/vue-style-loader

4.5. 说说几个常见的plugin

\1. html-webpack-plugin

\2. copy-webpack-plugin

\3. clean-webpack-plugin

\4. optimize-css-assets-webpack-plugin

\5. webpack-bundle-analyzer

\6. webpack.HotModuleReplacementPlugin

4.6. 区别plugin与loader

\1. loader: 用于加载特定类型的资源文件, webpack本身只能打包js, 如果打包css就需要css-loader/style-loader, 如果打包图片就需要file-loader/url-loader

\2. plugin: 用来扩展webpack其它方面的功能, 如页面引入打包文件需要html-webpack-plugin, 删除文件需要clean-webpack-plugin

4.7. 区别module，chunk 和 bundle ?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6KvGfNsW-1647229293208)(file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image006.jpg)]

\1. module: 我们手写下一个一个的文件

\2. webpack开始打包后, 会根据文件引用关系生成内存中的几个 chunk 文件

\3. 保存到本地的是bundle文件, 一般一个chunk对应一个bundle, 但也可能一个chunk对应多个bundle(拆分样式打包)

\4. 拆分js是在生成chunk前, 所以拆分出的js都是一个单独的chunk

\5. 拆分css是在生成chunk后, 所以拆分出的css与js共用一个chunk

4.8. 区别webpackPrefetch与webpackPreload

webpack4添加的魔法注释功能, 可以使用preload-webpack-plugin@next进行处理

\1. webpackPreload:

(1) 同时并行请求加载, 针对当前就需要的bundle文件

(2)

\2. webpackPrefetch:

(1) 空闲时才请求加载, 针对其它路由需要的bundle文件

(2)

4.9. 区别hash、chunkhash、contenthash

\1. 理解

(1) hash整体模块文件内容的md5值

(2) chunkhash当前chunk内容的md5值

(3) contenthash当前bundle内容的md5值

\2. 使用

(1) js/css/img使用contenthash

(2) img/audio/video使用hash时本质还是用的contenthash

3. 注意

用hash****有什么问题?

用chunkhash****有什么问题?

4.10. 区别source-map 中inline与eval, cheap与module

\1. Inline

(1) 生成全部的source map后整体内联到打包文件中

(2) 更新代码时完全重新生成source map

\2. eval

(1) 以模块为单位生成source map内联到打包文件中

(2) 更新代码时只会重新生成相应的source map

(3) 主要是更新打包速度快于inline

\3. cheap

(1) 只记录代码行号, 不记录列号

(2) 只映射自定义模块

\4. module