写在前面

自我思考

基础概念

get和post请求区别

1.url 体现区别，get请求能在URL上体现，post不可以。 2.长度限制，get请求有长度限制，但并非HTTP协议的限制，是浏览器和web服务器的限制，因此不同浏览器和web服务器限制成都不一样。 3.缓存区别, get请求一般用于查询，可以不用每次都与数据库交互，利用缓存机制，post请求一般用于增删改操作，必须与数据库就行操作，所以不可用于缓存。

跨域和解决方法

解决：

1.webpack 配置proxy,原理是webpack内部起了node服务正向代理，服务器 之间不需要代理 2.nginx 反向代理， nginx 配置跳板机， 前端请求跳板机，nginx 转发请求目标服务器。 3.在目标服务器http相应头 配置允许跨域： Access-control-Allow-origin: '允许跨域的域名或者*'

模块化发展历程

作用：主要用于抽离公共代码，隔离作用域，避免变量冲突等。 IIFE：立即执行函数，在一个独立的作用域中执行代码，不会污染全局作用域和避免变量冲突。 AMD： 用requireJS 来编写模块化，特点：依赖必须提前声明。 CMD： 使用seaJS 来编写模块化，特点：支持动态引入依赖文件。 CommonJS: nodeJS 内置的模块化。 ES6的modules： es6引入的模块化。

TCP三次握手

第一次：client -> server 服务端知道客户端有发送能力 第二次：server -> client 客户端知道服务端游发送能力 第三次：client -> server 让服务端知道客户端接受能力没问题 其中，为了保证后续的握手是为了应答上一个握手，每次握手都会带一个标识 seq，后续的ACK都会对这个seq进行加一来进行确认。

函数柯里化

将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。

const add = function add(x) {
    return function (y) {
        return x + y
    }
}
const add1 = add(1)
add1(2) === 3

节流防抖

解释： 防抖： 每次有请求是继续延长时间，如：输入框输入请求，延迟1秒钟，一秒内还有请求继续延迟 节流：固定个时间请求。

function debounce(fn, interval, immediate) {
  //fn为要执行的函数
  //interval为等待的时间
  //immediate判断是否立即执行
  var timeout;  //定时器
  return function () { //返回一个闭包
    var context = this, args = arguments; //先把变量缓存
    var later = function () {  //把稍后要执行的代码封装起来
      timeout = null; //成功调用后清除定时器
      if (!immediate) fn.apply(context, args); //不立即执行时才可以调用
    };
    var callNow = immediate && !timeout;  //判断是否立即调用，并且如果定时器存在，则不立即调用
    clearTimeout(timeout);  //不管什么情况，先清除定时器，这是最稳妥的
    timeout = setTimeout(later, interval);  //延迟执行
    if (callNow) fn.apply(context, args);  //如果是第一次触发，并且immediate为true，则立即执行
  };
};

var throttle = function (fn, interval = 500) { //fn为要执行的函数，interval为延迟时间
  var _self = fn,  //保存需要被延迟执行的函数引用
    timer,  //定时器
    firstTime = true;  //是否第一次调用
  return function () { //返回一个函数，形成闭包，持久化变量
    var args = arguments, //缓存变量
      _me = this;
    if (firstTime) { //如果是第一次调用，不用延迟执行
      _self.apply(_me, args);
      return firstTime = false;
    }
    if (timer) { //如果定时器还在，说明上一次延迟执行还没有完成
      return false;
    }
    timer = setTimeout(function () { //延迟一段时间执行
      clearTimeout(timer);
      timer = null;
      _self.apply(_me, args);
    }, interval);
  };
};

讲讲Redux原理

store: 存放数据的仓库，通过redux提供的createStore生成stroe state: 数据源一个store可以有多一个state action: 一个对象，其中必须包括type属性，用来告诉store如何操作state store.dispatch: 接受一个action, 告诉store改变state reducer: reducer是一个纯函数，store 接受到action后要返回一个新的state，这个计算过程就叫做reducer.

箭头函数和普通函数区别

1.this指向， 箭头函数不绑定this, 会自动捕获上下文的this 2.箭头函数不能作为构造函数，也就不能new 3.箭头函数不绑定arguments，用...解决 4.箭头函数没有原型属性 5.箭头函数不能当作Generator函数，不能使用yield关键字

javascript 单线程

问：说一下javascript的单线程模型

答：js只在一个线程上运行，也就是说JavaScript同时只能执行一个任务。 好处就是执行起来相对简单，坏处就是会造成任务堵塞，和CPU资源浪费。

问：javascript为什么采用单线程

答：历史原因，js在语言设计之初就定下的规范，js的设计者在设计这门语言的就不想让js过于复杂，举个例子，如果js多线程的话可能会出现两个线程同时操作一个dom,这时候浏览器又要判断执行哪一个，是否又要引用锁的机制，所以避免过于复杂，JavaScript一开始就是单线程模型。

说一下JavaScript 的事件循环

JS引擎单线程，浏览器提供多个辅助线程来执行js主线程中遇到的异步任务。

先说一下js的单线程模型，事件循环是JS的一个机制，并不是JS内部的一个方法什么的，首先JS除了主线程之外，JS引擎提供了多个任务队列来执行主任务的一些异步任务，主线程在执行的过程中遇到遇到异步任务的话，会放到异步队列中去执行，然后继续执行主任务，直到当前的主任务执行完了，再去看异步队列中有没有完成的任务，有的话，继续拿到主任务中去执行，在这个过程中又遇到异步的话，继续放到异步队列中，知道任务执行完。这样一个过程就叫事件循环。

前面说到有多个任务队列，是根据异步任务产生的，异步任务也有优先级的，所有任务队列分为两种，一个是微任务队列，一个是宏任务队列，微任务的优先级要高于宏任务，所以当主任务执行完，先执行微任务，在执行宏任务，微任务主要是Promise，MutationObserver(监听dom变化)，剩下的定时器，ajax等都是宏任务。

说一下JavaScript 的原型链

首先原型链是JS实现继承的一种方式。 一个实例对象要调用属性或方法时，JS会先从自身的属性和方法上找，然后在其构造函数的原型上找，在在原型的原型上，直至找到object.prototype为止。

比如：let a = [], 调用a.toString, 若a对象下没有toString方法则 -> a.proto.toString -> Object.toString为止，这样的链式调用就叫做原型链

es6新特性

let/const 、变量解构、Promise、Set和map数据类型 、 class、模块化、anysc/await、symbol、generator函数

generator函数

Promise

关于微前端：

为什么用微前端

整理中

微前端解决了什么

整理中

菜单配置，主从服务吊起

整理中

为什么选择qiankun而不是飞冰

整理中

React

说一下React生命周期

三个阶段：

1. 挂载时: 首次实例化组件被挂载时，主要的生命周期有：constructor, render,componentDidMount
2. 更新时: 当组件的props或者state 更新时执行， componentDidUpdate和一个静态方法，返回最新的state
3. 卸载时: 当组件卸载或销毁时，componentsWillUnmount

React Hooks

useState: 接受一个初始值返回一个新的state和一个更新state的函数。

useEffect: 接受两个参数，一个包含命令式和有可能有副作用代码的函数以及一个依赖值数组。 执行时机：在浏览器绘制之后并且保证在任何新的渲染之前执行。如果想在绘制之前执行可以使用useLayoutEffect代替

useContext: 接受一个context对象（Racet.creatContext返回值）返回该context的当前值。

额外的Hooks(如下)：大多数是useState和useEffect的变体，在某些特殊情况下用起来更好。

useReducer: 类似于redux机制，接受一个reducer和一个initialState,返回一个state和dispatch方法。 在某些场景下代替uesState，比如：state逻辑复杂并且包含多个子值，或者下一个state依赖于上一个state.

useMemo和uesCallback: 作用：用法类似都是用于减少渲染次数，达到优化性能的作用。 useMemo(() => fn, [deps]) = useCallback(fn, [deps]) 他们唯一的区别是：useCallback是根据依赖项（deps）缓存第一个参数callback。useMemo是根据依赖项（deps）缓存第一个参数callback执行后的值。

说一下虚拟DOM

虚拟dom本质就是一个JS对象，虚拟dom存在一的意义在于最小化dom改变，然后批处理dom变化，在必要的时候在重新渲染页面。 diff 分为三类比较： 1.相同类型节点比较：只会对属性进行重设，从而实现节点的转变 2.不同类型节点比较：会直接删除旧的节点，创建新的节点代替。 3.列表节点比较：开发手动添加key,帮助react定位到正确的节点，减少dom操作次数。