axios 封装
1
import Axios from "axios";
当前权限管理流程
  1. 默认初始化所有路由数据，并未添加路由表
  2. 通过后台数据筛选路路由添加路由表
  3. 其实还好菜单信息完全配置在后台只维护映射，前端添加
    后端同时添加映射信息（麻烦点）
1
2
3
4
5
6
7
8
9
10
11
12
graph LR

初始化==>sToken{是否有token}
sToken-->|无| 跳转登录页面
sToken-->|有| sRouter{是否有权限路由}
sRouter-->|有| 正常路由跳转
sRouter-->|无| rRouter{请求路由}

rRouter-->|失败| 报错
rRouter-->|成功| fRouter[筛选路由]
fRouter--> rsRouter[重组路由收据]
rsRouter--> 正常跳转
框架权限管理流程
配置路由本身有角色信息
1
2
3
4
5
6
7
8
9
10
11
graph LR

初始化==>sToken{是否有token}
sToken-->|无| 跳转登录页面
sToken-->|有| sRouter{是否路由存在}
sRouter-->|有| 正常路由跳转
sRouter-->|无| userInfo{请求用户信息}
userInfo-->|失败| 抛出异常
userInfo--> fRouter[筛选路由]
fRouter--> rsRouter[重组路由收据]
rsRouter--> 正常跳转
新路由想法（参考网络）
  1. 前端添加数据结构，后端维护相应简单的数据结构
  2. 页面中转
vue.config.js
  • 复写
    • 清除已有数据
  • 修改
暂定
  1. 入口
  2. 配置
  3. 路由
  4. api
  5. 权限
  6. utils
  7. 请求
  8. 鉴权
  9. 异常上报
  10. 按需引入
可视化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
graph LR

start[初始化]-->mountC[加载组件]
start-->mountS[初始化状态]
start-->mountP[加载缓存]
mountC-->begin[开始]
mountS-->begin[开始]
mountP-->begin[开始]
begin-->view[初始化界面]
view-->addDrag[添加拖动]

drag[拖动]-->drop[放置]
drop-->over[添加over事件]
over-->clone[克隆组件]
clone-->key[添加唯一key]
over--> 显示边框
点击-->attr[根据唯一key切换状态]
attr-->store[调整更改store]
store-->界面变化
save-->prev[保存状态]
prev-->reload[重新加载状态]

手写代码及原理

  1. 节流

    • 原理: 解决页面频繁计算；定义间隔，不到时间直接返回
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function throtter(func, delay) {
      let lockFlg = false;
      return (...args) => {
        if (lockFlg) return;
        func(...args);
        lockFlg = true;
        setTimeout(() => {
          lockFlg = false;
        }, delay);
      };
    }

  2. 防抖

    • 原理：解决频繁请求；定义间隔，重复请求清空定时器
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function debounce(func ,delay, immediately){
      let timer = null
      return (...args)=>{
        clearTimeout(timer)
        if(immediately){
          func(..args)
        }
        timer = setTimeout(()=>{
          func()
        },delay)
      }
    }

  3. 柯里化

    • 原理: 函数参数收集直到参数收集完成后执行
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function currying(func, ...args) {
      let len = func.length;
      return (...arg) => {
        arg.unshift(...args);
        if (arg.length < len) {
          return currying(func, ...arg);
        }
        return func(...arg);
      };
    }
    • 原理: 收集参数，不传参数时执行（处理不定参数情况）
    1
    2
    3
    4
    5
    6
    7
    8
    function currying1(func, ...args) {
      return (...arg) => {
        if (arg.length > 0) {
          return args.push(...arg);
        }
        return func(...args);
      };
    }

  4. apply

    • 原理：鸭子模型改变调用者
    1
    2
    3
    4
    5
    6
    function apply(obj = window, args = []) {
      obj.fn = this;
      const res = obj.fn(...args);
      delete obj.fn;
      return res;
    }

  5. bind

    • 原理：返回闭包，需处理 new 以及二次绑定
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function bind(obj = window, args = []) {
      const _Fn = this;
      return function F(..._args) => {
        if(this instanceof F){
          return new _Fn(...args, ..._args)
        }
        return _Fn.apply(obj, args.concat(_args))
      };
    }

  6. call

    • 原理：鸭子模型改变调用者
    1
    2
    3
    4
    5
    6
    function call(obj = window, ...arg) {
      obj.fn = this;
      const res = obj.fn(...args);
      delete obj.fn;
      return res;
    }

  7. jsonp

    • 原理： 动态添加 script 标签，定义全局回调
    • 回调后删除 节点以及函数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    function jsonp(url, data, callBack) {
      const dataString = url.indexOf('?') === -1 ? '?' : '&';
      const callbackName = `jsonpCB${Date.now()}`;
      url += `${dataString}callback=${callbackName}`;
      const jsNode = document.createElement('script');
      jsNode.url = url;
      window[callbackName] = function(result) {
        delete window[callbackName];
        document.body.removeChild(jsNode);
        callBack(result);
      };
      jsNode.addEventListener(
        'error',
        () => {
          document.body.removeChild(jsNode);
          delete window[callbackName];
          callBack(result);
        },
        false
      );
      document.body.appendChild(jsNode);
    }

  8. cookie

    • cookie 属性
      • maxage
      • path
      • domain
      • secure
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function Cookie() {
  let options = {
    maxage: "max-age",
    path: "path",
    domain: "domain",
    secure: "secure"
  }

  set(key,value, option){
    if(!option) return  document.cookie = `${key}=${value}`
    let opt = []
    opt.push(`${key}=${value}`)
    for(k in option) {
      opt.push(`${options[k]}=${option[k]}`)
    }
    return document.cookie = opt.join(";")
  }

  get(key){
    let opt = document.cookie.split(";").map(v=>{v.trim()})
    let cookie = {}
    for(v of opt){
      let t = v.split('=')
      cookie[t[0]] = t[1]
    }
    return cookie(key)
  }
}

构建工具／grunt／gulp／parcel／webpack

  1. Grunt
    1.1 Grunt介绍

阿里

  1. 使用过的 koa2 中间件
    • koa-body
    • koa-route
  2. koa-body 原理
    • 分部根据不同返回数据类型，分发不同处理器
    • co-body
  3. 介绍自己写过的中间件
    • 权限校验
  4. 有没有涉及到 Cluster
  5. 介绍 pm2
  6. master 挂了的话 pm2 怎么处理
  7. 如何和 MySQL 进行通信
  8. React 声明周期及自己的理解
    • defaultPropus
  9. 如何配置 React-Router
  10. 路由的动态加载模块
  11. 服务端渲染 SSR
  12. 介绍路由的 history
  13. 介绍 Redux 数据流的流程
  14. Redux 如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理
  15. 多个组件之间如何拆分各自的 state，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护， 如何思考这块
  16. 使用过的 Redux 中间件
  17. 如何解决跨域的问题
  18. 常见 Http 请求头
  19. 移动端适配 1px 的问题
  20. 介绍 flex 布局
  21. 其他 css 方式设置垂直居中
  22. 居中为什么要使用 transform（为什么不使用 marginLeft/Top）
  23. 使用过 webpack 里面哪些 plugin 和 loader
  24. webpack 里面的插件是怎么实现的
  25. dev-server 是怎么跑起来
  26. 项目优化
  27. 抽取公共文件是怎么配置的
  28. 项目中如何处理安全问题
  29. 怎么实现 this 对象的深拷贝

网易

  1. 介绍 redux，主要解决什么问题

    1. 事件回溯
    2. 跨组件数据共享
    3. 组件通信

  2. 文件上传如何做断点续传

  3. 表单可以跨域吗

    1. 可以跨域
    2. 表单提交完成刷行页面且不会把结果返回给 js
    3. 保证兼容性

  4. promise、async 有什么区别

    1. promise 解决回调地域问题
    2. async 优雅解决异步数据返回同步处理

  5. 搜索请求如何处理（防抖）

    1. 保证最后一次发送有效

  6. 搜索请求中文如何请求

    1. url 编码

  7. 介绍观察者模式

    1. 发布订阅模式，订阅事件，事件触发变动后通知所有订阅着

  8. 介绍中介者模式

    1. 代理模式–多对多转换成一对多

  9. 观察者和订阅-发布的区别，各自用在哪里

  10. 介绍 react 优化

    1. this 绑定
      1. 构造函数 初始化
      2. render render 重新绑定一便
      3. 组件上箭头函数 重新生成函数
    2. shouldComponentUpdate
      1. 深层比较是否需要渲染，避免不必要渲染
      2. 定制
    3. 使用 Immutable
    4. key 优化
    5. 状态管理

  11. 介绍 http2.0

    1. 二进制分帧
      1. 最小通信单位 分帧
      2. 所有帧共享 8 字节首部
      3. 多个帧组成消息
      4. 流
    2. 首部压缩
    3. 流量控制
    4. 多路复用

  12. 通过什么做到并发请求

    1. ajax

  13. http1.1 时如何复用 tcp 连接

  14. 介绍 service worker

  15. 介绍 css3 中 position:sticky

    1. 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
    2. 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了 top: 50px，那么在 sticky 元素到达距离相对定位的元素顶部 50px 的位置时固定，不再向上移动。
    3. 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于 viewport 来计算元素的偏移量

  16. Redux 请求中间件如何处理并发

  17. 介绍 Promise，异常捕获

  18. 介绍 position 属性包括 CSS3 新增

  19. 浏览器事件流向

    1. 事件捕获
      1. 是从 document 元素开始，越高级的父级元素越早接收到事件，因此这是一个从上而下的过程。
    2. 事件冒泡
      1. 相反

  20. 介绍事件代理以及优缺点

    1. 优点
      1. 可以大量节省内存占用，减少事件注册
      2. 可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适
    2. 缺点
      1. 可能会出现事件误判。

  21. React 组件中怎么做事件代理

    1. React 并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点 document 上为每种事件添加唯一的 Listener，然后通过事件的 target 找到真实的触发元素。

  22. React 组件事件代理的原理

    1. 在根节点 document 上为每种事件添加唯一的 Listener，然后通过事件的 target 找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件，React 都会触发对应的事件处理函数。这就是所谓的 React 模拟事件系统。

  23. 介绍 this 各种情况

  24. 前端怎么控制管理路由

    1. Hjax
    2. Pjax

  25. 使用路由时出现问题如何解决

  26. React 怎么做数据的检查和变化

    1. 手动 setState

滴滴

  1. react-router 怎么实现路由切换
  2. react-router 里的标签和 a 标签有什么区别
    1. 对比,Link 组件避免了不必要的重渲染
  3. a 标签默认事件禁掉之后做了什么才实现了跳转
    1. history.replace 或者 history.push
  4. React 层面的性能优化
    1. 在父组件因状态的变化更改，而子组件并没有状态变化时, 不让子组件 render shouldComponentUpdate(nextProps, nextState) React.PureComponent 替换 React.Component
  5. 整个前端性能提升大致分几类
  6. import { Button } from ‘antd’，打包的时候只打包 button，分模块加载，是怎么做到的
    1. babel-plugin-import 把每个打包成一个
  7. 使用 import 时，webpack 对 node_modules 里的依赖会做什么
  8. JS 异步解决方案的发展历程以及优缺点
    1. settimneout
    2. 事件监听 事件驱动
    3. 回调函数
    4. promise
    5. Generator
    6. async
  9. Http 报文的请求会有几个部分
  10. cookie 放哪里，cookie 能做的事情和存在的价值
    1. 硬盘
    2. 存小数据
  11. cookie 和 token 都存放在 header 里面，为什么只劫持前者
  12. cookie 和 session 有哪些方面的区别
  13. React 中 Dom 结构发生变化后内部经历了哪些变化
  14. React 挂载的时候有 3 个组件，textComponent、composeComponent、domComponent，区别和关系，Dom 结构发生变化时怎么区分 data 的变化，怎么更新，更新怎么调度，如果更新的时候还有其他任务存在怎么处理
  15. key 主要是解决哪一类的问题，为什么不建议用索引 index（重绘）
  16. Redux 中异步的请求怎么处理
  17. Redux 中间件是什么东西，接受几个参数（两端的柯里化函数）
  18. 柯里化函数两端的参数具体是什么东西
  19. 中间件是怎么拿到 store 和 action，然后怎么处理
  20. state 是怎么注入到组件的，从 reducer 到组件经历了什么样的过程
  21. koa 中 response.send、response.rounded、response.json 发生了什么事，浏览器为什么能识别到它是一个 json 结构或是 html
  22. koa-bodyparser 怎么来解析 request
  23. webpack 整个生命周期，loader 和 plugin 有什么区别
  24. 介绍 AST（Abstract Syntax Tree）抽象语法树
  25. 安卓 Activity 之间数据是怎么传递的
  26. 安卓 4.0 到 6.0 过程中 WebView 对 js 兼容性的变化
  27. WebView 和原生是如何通信
  28. 跨域怎么解决，有没有使用过 Apache 等方案

今日头条

  1. 对 async、await 的理解，内部原理
    1. yard 的语法糖
  2. 介绍下 Promise，内部实现
  3. 清除浮动
  4. 定位问题（绝对定位、相对定位等）
  5. 从输入 URL 到页面加载全过程
  6. tcp3 次握手
  7. tcp 属于哪一层（1 物理层 -> 2 数据链路层 -> 3 网络层(ip)-> 4 传输层(tcp) -> 5 应用层 (http)）
  8. redux 的设计思想
  9. 接入 redux 的过程
  10. 绑定 connect 的过程
  11. connect 原理
  12. webpack 介绍
  13. == 和 === 的区别，什么情况下用相等 ==
  14. bind、call、apply 的区别
  15. 动画的了解
  16. 介绍下原型链（解决的是继承问题吗）
  17. 对跨域的了解

有赞

  1. Linux 754 介绍
  2. 介绍冒泡排序，选择排序，冒泡排序如何优化
  3. transform 动画和直接使用 left、top 改变位置有什么优缺点
  4. 如何判断链表是否有环
  5. 介绍二叉搜索树的特点
  6. 介绍暂时性死区
    1. 声明只在作用域块中有效，不受外部影响
    2. 在声明前不可调用，会抛异常
  7. ES6 中的 map 和原生的对象有什么区别
    1. object 的键的类型是 字符串;
    2. map 的键的类型是 可以是任意类型;
  8. 观察者和发布-订阅的区别
  9. react 异步渲染的概念,介绍 Time Slicing 和 Suspense
  10. 16.X 声明周期的改变
  11. 16.X 中 props 改变后在哪个生命周期中处理
  12. 介绍纯函数
    1. 返回结果只依赖于参数
      1. 同样输入–相同返回
    2. 函数没有副作用
  13. 前端性能优化
    1. 图片选取(不同类型，大小，适用均不同，合理选取)
    2. 图片合并
    3. 懒加载
    4. 减少网络请求
    5. 图片 base64 编码
    6. js 异步加载
    7. 开启缓存
    8. 本地缓存
    9. 服务器渲染
  14. pureComponent 和 FunctionComponent 区别
    1. pureComponent 是官方实现的基本防止重复渲染的方式
      1. 适用于对组件包装
    2. FunctionComponent 直接渲染
      1. 适用于无状态组件
  15. 介绍 JSX
    1. 就是 js 与 xml 结合的一种编写方式
    2. 减少原生 render 编写方式
    3. 类似语法糖
    4. 最终编译成 render 方法
  16. 如何做 RN 在安卓和 IOS 端的适配
  17. RN 为什么能在原生中绘制成原生组件（bundle.js）
  18. 介绍虚拟 DOM
  19. 如何设计一个 localStorage，保证数据的实效性
  20. 如何设计 Promise.all()
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function all(arr){
       return new Promise((resolve, reject)=>{
          let len = arr.length
          let result = []
          let resoleAll = (idx, res)=>{
             result[idx] = res
             if(--len === 0){
                resole(result)
             }
          }
          arr.forEach((i,idx)=>{
             i.then((res)=>{
                resoleAll(idx, res)
             })
          })
       })
    }

  21. 介绍高阶组件
  22. sum(2, 3)实现 sum(2)(3)的效果
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function curry(func, ...args){
       let len = func.length
       return (..._args)=>{
          args = args.concat(_args)
          if(args.length < len){
             return curry(func, ...args)
          }
          return func(args)
       }
    }
  23. react 性能优化
  24. 两个对象如何比较

挖财

  1. JS 的原型
  2. 变量作用域链
  3. call、apply、bind 的区别
  4. 防抖和节流的区别
  5. 介绍各种异步方案
  6. react 生命周期
  7. 介绍 Fiber
  8. 前端性能优化
  9. 介绍 DOM 树对比
  10. react 中的 key 的作用
  11. 如何设计状态树
  12. 介绍 css，xsrf
  13. http 缓存控制
  14. 项目中如何应用数据结构
  15. native 提供了什么能力给 RN
  16. 如何做工程上的优化
  17. shouldComponentUpdate 是为了解决什么问题
  18. 如何解决 props 层级过深的问题
  19. 前端怎么做单元测试
  20. webpack 生命周期
  21. webpack 打包的整个过程
  22. 常用的 plugins
  23. pm2 怎么做进程管理，进程挂掉怎么处理
  24. 不用 pm2 怎么做进程管理

沪江

  1. 介绍下浏览器跨域
  2. 怎么去解决跨域问题
  3. jsonp 方案需要服务端怎么配合
  4. Ajax 发生跨域要设置什么（前端）
  5. 加上 CORS 之后从发起到请求正式成功的过程
  6. xsrf 跨域攻击的安全性问题怎么防范
  7. 使用 Async 会注意哪些东西
  8. Async 里面有多个 await 请求，可以怎么优化（请求是否有依赖）
  9. Promise 和 Async 处理失败的时候有什么区别
  10. Redux 在状态管理方面解决了 React 本身不能解决的问题
  11. Redux 有没有做过封装
  12. react 生命周期，常用的生命周期
  13. 对应的生命周期做什么事
  14. 遇到性能问题一般在哪个生命周期里解决
  15. 怎么做性能优化（异步加载组件…）
  16. 写 react 有哪些细节可以优化
  17. React 的事件机制（绑定一个事件到一个组件上）
  18. 介绍下事件代理，主要解决什么问题
  19. 前端开发中用到哪些设计模式
  20. React/Redux 中哪些功能用到了哪些设计模式
  21. JS 变量类型分为几种，区别是什么
  22. JS 里垃圾回收机制是什么，常用的是哪种，怎么处理的
  23. 一般怎么组织 CSS（Webpack）

饿了么

  1. 小程序里面开页面最多多少
  2. React 子父组件之间如何传值
  3. Emit 事件怎么发，需要引入什么
  4. 介绍下 React 高阶组件，和普通组件有什么区别
  5. 一个对象数组，每个子对象包含一个 id 和 name，React 如何渲染出全部的 name
  6. 在哪个生命周期里写
  7. 其中有几个 name 不存在，通过异步接口获取，如何做
  8. 渲染的时候 key 给什么值，可以使用 index 吗，用 id 好还是 index 好
  9. webpack 如何配 sass，需要配哪些 loader
  10. 配 css 需要哪些 loader
  11. 如何配置把 js、css、html 单独打包成一个文件
  12. div 垂直水平居中（flex、绝对定位）
  13. 两个元素块，一左一右，中间相距 10 像素
  14. 上下固定，中间滚动布局如何实现
  15. [1, 2, 3, 4, 5]变成[1, 2, 3, a, b, 5]
  16. 取数组的最大值（ES5、ES6）
  17. apply 和 call 的区别
  18. ES5 和 ES6 有什么区别
  19. some、every、find、filter、map、forEach 有什么区别
  20. 上述数组随机取数，每次返回的值都不一样
  21. 如何找 0-5 的随机数，95-99 呢
  22. 页面上有 1 万个 button 如何绑定事件
  23. 如何判断是 button
  24. 页面上生成一万个 button，并且绑定事件，如何做（JS 原生操作 DOM）
  25. 循环绑定时的 index 是多少，为什么，怎么解决
  26. 页面上有一个 input，还有一个 p 标签，改变 input 后 p 标签就跟着变化，如何处理
  27. 监听 input 的哪个事件，在什么时候触发

携程

  1. 手写两道算法题
  2. 对 React 看法，有没有遇到一些坑
  3. 对闭包的看法，为什么要用闭包
  4. 手写数组去重函数
  5. 手写数组扁平化函数
  6. 介绍下 Promise 的用途和性质
  7. Promise 和 Callback 有什么区别
  8. React 生命周期

喜马拉雅

  1. ES6 新的特性
  2. 介绍 Promise
  3. Promise 有几个状态
  4. 说一下闭包
  5. React 的生命周期
  6. componentWillReceiveProps 的触发条件是什么
  7. React16.3 对生命周期的改变
  8. 介绍下 React 的 Filber 架构
  9. 画 Filber 渲染树
  10. 介绍 React 高阶组件
  11. 父子组件之间如何通信
  12. Redux 怎么实现属性传递，介绍下原理
  13. React-Router 版本号
  14. 网站 SEO 怎么处理
  15. 介绍下 HTTP 状态码
  16. 403、301、302 是什么
  17. 缓存相关的 HTTP 请求头
  18. 介绍 HTTPS
  19. HTTPS 怎么建立安全通道
  20. 前端性能优化（JS 原生和 React）
  21. 用户体验做过什么优化
  22. 对 PWA 有什么了解
  23. 对安全有什么了解
  24. 介绍下数字签名的原理
  25. 前后端通信使用什么方案
  26. RESTful 常用的 Method
  27. 介绍下跨域
  28. Access-Control-Allow-Origin 在服务端哪里配置
  29. csrf 跨站攻击怎么解决
  30. 前端和后端怎么联调

兑吧

  1. localStorage 和 cookie 有什么区别
  2. CSS 选择器有哪些
  3. 盒子模型，以及标准情况和 IE 下的区别
  4. 如何实现高度自适应
  5. prototype 和——proto——区别
  6. __construct 是什么
  7. new 是怎么实现的
  8. promise 的精髓，以及优缺点
  9. 如何实现 H5 手机端的适配
  10. rem、flex 的区别（root em）
  11. em 和 px 的区别
  12. React 声明周期
  13. 如何去除 url 中的#号
  14. Redux 状态管理器和变量挂载到 window 中有什么区别
  15. webpack 和 gulp 的优缺点
  16. 如何实现异步加载
  17. 如何实现分模块打包（多入口）
  18. 前端性能优化（1js css；2 图片；3 缓存预加载； 4 SSR； 5 多域名加载；6 负载均衡）
  19. 并发请求资源数上限（6 个）
  20. base64 为什么能提升性能，缺点
  21. 介绍 webp 这个图片文件格式
  22. 介绍 koa2
  23. Promise 如何实现的
  24. 异步请求，低版本 fetch 如何低版本适配
  25. ajax 如何处理跨域
  26. CORS 如何设置
  27. jsonp 为什么不支持 post 方法
  28. 介绍同源策略
  29. React 使用过的一些组件
  30. 介绍 Immuable
  31. 介绍下 redux 整个流程原理
  32. 介绍原型链
  33. 如何继承

微医

  1. 介绍 JS 数据类型，基本数据类型和引用数据类型的区别
  2. Array 是 Object 类型吗
  3. 数据类型分别存在哪里
  4. var a = {name: “前端开发”}; var b = a; a = null 那么 b 输出什么
  5. var a = {b: 1}存放在哪里
  6. var a = {b: {c: 1}}存放在哪里
  7. 栈和堆的区别
  8. 垃圾回收时栈和堆的区别
  9. 数组里面有 10 万个数据，取第一个元素和第 10 万个元素的时间相差多少
  10. 栈和堆具体怎么存储
  11. 介绍闭包以及闭包为什么没清除
  12. 闭包的使用场景
  13. JS 怎么实现异步
  14. 异步整个执行周期
  15. Promise 的三种状态
  16. Async/Await 怎么实现
  17. Promise 和 setTimeout 执行先后的区别
  18. JS 为什么要区分微任务和宏任务
  19. Promise 构造函数是同步还是异步执行，then 呢
  20. 发布-订阅和观察者模式的区别
  21. JS 执行过程中分为哪些阶段
  22. 词法作用域和 this 的区别
  23. 平常是怎么做继承
  24. 深拷贝和浅拷贝
  25. loadsh 深拷贝实现原理
  26. ES6 中 let 块作用域是怎么实现的
  27. React 中 setState 后发生了什么
  28. setState 为什么默认是异步
  29. setState 什么时候是同步的
  30. 为什么 3 大框架出现以后就出现很多 native（RN）框架（虚拟 DOM）
  31. 虚拟 DOM 主要做了什么
  32. 虚拟 DOM 本身是什么（JS 对象）
  33. 304 是什么
  34. 打包时 Hash 码是怎么生成的
  35. 随机值存在一样的情况，如何避免
  36. 使用 webpack 构建时有无做一些自定义操作
  37. webpack 做了什么
  38. a，b 两个按钮，点击 aba，返回顺序可能是 baa，如何保证是 aba（Promise.then）
  39. node 接口转发有无做什么优化
  40. node 起服务如何保证稳定性，平缓降级，重启等
  41. RN 有没有做热加载
  42. RN 遇到的兼容性问题
  43. RN 如何实现一个原生的组件
  44. RN 混原生和原生混 RN 有什么不同
  45. 什么是单页项目
  46. 遇到的复杂业务场景
  47. Promise.all 实现原理

寺库

  1. 介绍 Promise 的特性，优缺点
  2. 介绍 Redux
  3. RN 的原理，为什么可以同时在安卓和 IOS 端运行
  4. RN 如何调用原生的一些功能
  5. 介绍 RN 的缺点
  6. 介绍排序算法和快排原理
  7. 堆和栈的区别
  8. 介绍闭包
  9. 闭包的核心是什么
  10. 网络的五层模型
  11. HTTP 和 HTTPS 的区别
  12. HTTPS 的加密过程
  13. 介绍 SSL 和 TLS
  14. 介绍 DNS 解析
  15. JS 的继承方法
  16. 介绍垃圾回收
  17. cookie 的引用为了解决什么问题
  18. cookie 和 localStorage 的区别
  19. 如何解决跨域问题
  20. 前端性能优化

宝宝树

  1. 使用 canvas 绘图时如何组织成通用组件
  2. formData 和原生的 ajax 有什么区别
  3. 介绍下表单提交，和 formData 有什么关系
  4. 介绍 redux 接入流程
  5. rudux 和全局管理有什么区别（数据可控、数据响应）
  6. RN 和原生通信
  7. 介绍 MVP 怎么组织
  8. 介绍异步方案
  9. promise 如何实现 then 处理
  10. koa2 中间件原理
  11. 常用的中间件
  12. 服务端怎么做统一的状态处理
  13. 如何对相对路径引用进行优化
  14. node 文件查找优先级
  15. npm2 和 npm3+有什么区别

海康威视

  1. knex 连接数据库响应回调
  2. 介绍异步方案
  3. 如何处理异常捕获
  4. 项目如何管理模块
  5. 前端性能优化
  6. JS 继承方案
  7. 如何判断一个变量是不是数组
  8. 变量 a 和 b，如何交换
  9. 事件委托
  10. 多个标签生成的 Dom 结构是一个类数组
  11. 类数组和数组的区别
  12. dom 的类数组如何转成数组
  13. 介绍单页面应用和多页面应用
  14. redux 状态树的管理
  15. 介绍 localstorage 的 API

蘑菇街

  1. html 语义化的理解
  2. b 和 strong 的区别
  3. 对闭包的理解
  4. 工程中闭包使用场景
  5. 介绍 this 和原型
  6. 使用原型最大的好处
  7. react 设计思路
  8. 为什么虚拟 DOM 比真实 DOM 性能好
  9. react 常见的通信方式
  10. redux 整体的工作流程
  11. redux 和全局对象之间的区别
  12. Redux 数据回溯设计思路
  13. 单例、工厂、观察者项目中实际场景
  14. 项目中树的使用场景以及了解
  15. 工作收获

酷家乐

  1. react 生命周期
  2. react 性能优化
  3. 添加原生事件不移除为什么会内存泄露
  4. 还有哪些地方会内存泄露
  5. setInterval 需要注意的点
  6. 定时器为什么是不精确的
  7. setTimeout(1)和 setTimeout(2)之间的区别
  8. 介绍宏任务和微任务
  9. promise 里面和 then 里面执行有什么区别
  10. 介绍 pureComponet
  11. 介绍 Function Component
  12. React 数据流
  13. props 和 state 的区别
  14. 介绍 react context
  15. 介绍 class 和 ES5 的类以及区别
  16. 介绍箭头函数和普通函数的区别
  17. 介绍 defineProperty 方法，什么时候需要用到
  18. for..in 和 object.keys 的区别
  19. 介绍闭包，使用场景
  20. 使用闭包特权函数的使用场景
  21. get 和 post 有什么区别

百分点

  1. React15/16.x 的区别
  2. 重新渲染 render 会做些什么
  3. 哪些方法会触发 react 重新渲染
  4. state 和 props 触发更新的生命周期分别有什么区别
  5. setState 是同步还是异步
  6. 对无状态组件的理解
  7. 介绍 Redux 工作流程
  8. 介绍 ES6 的功能
  9. let、const 以及 var 的区别
  10. 浅拷贝和深拷贝的区别
  11. 介绍箭头函数的 this
  12. 介绍 Promise 和 then
  13. 介绍快速排序
  14. 算法：前 K 个最大的元素

海风教育

  1. 对 react 看法，它的优缺点
  2. 使用过程中遇到的问题，如何解决的
  3. react 的理念是什么（拿函数式编程来做页面渲染）
  4. JS 是什么范式语言(面向对象还是函数式编程)
  5. koa 原理，为什么要用 koa(express 和 koa 对比)
  6. 使用的 koa 中间件
  7. ES6 使用的语法
  8. Promise 和 async/await 和 callback 的区别
  9. Promise 有没有解决异步的问题（promise 链是真正强大的地方）
  10. Promise 和 setTimeout 的区别（Event Loop）
  11. 进程和线程的区别（一个 node 实例就是一个进程，node 是单线程，通过事件循环来实现异步）
  12. 介绍下 DFS 深度优先
  13. 介绍下观察者模式
  14. 观察者模式里面使用的数据结构(不具备顺序 ，是一个 list)

Docker进阶与实战 (容器技术系列)

引入概念

  1. docker 客户端

  2. 通过命令行访问

  3. 开发过程通过 restfullapi 进行访问

  4. 概述为提供docker 访问的一系列工具以及 api

  5. docker daemon

  6. 可理解为 docker server

  7. 也就是 docker运行引擎

  8. 提供外部访问接口响应访问结果的服务引擎

  9. docker 容器

  10. 容器以镜像为基础，同时为镜像提供一个标准和隔离的执行环境

  11. docker 镜像

  12. 运行环境的物理资源

  13. 层级可复用 减小磁盘开销

  14. 通过Dockerfile 定制镜像

  15. docker commit 生成镜像

  16. registry

  17. 远程镜像仓库，提供镜像的管理下载服务器

容器

  1. 容器组成
  2. cgroup 资源控制
    1. 用于隔离进程对资源的使用
  3. namespace 访问隔离
  4. rootfs 文件系统隔离
  5. 容器引擎 生命周期控制

镜像

  1. 常用操作
  2. docker images
  3. docker pull
  4. docker save -o name src
  5. docker load -i name
  6. docker import 导入文件生成镜像
  7. docker export 导出文件
  8. docker commit 增量生成镜像
  9. docker build 通过dockerfile 生成镜像
  10. docker ship
  11. docker run 运行容器
  12. docker ps 列出容器
  13. docker inspect 列出容器和镜像详细信息

js部分

js 基础

  1. 基本类型

    1. 原始类型（值传递）
      1. string
      2. number
      3. null
      4. undefined
      5. boolean
      6. symbol
    2. 对象（地址传递）
    3. 函数（地址传递）

  2. 类型判断

    1. typeOf
      1. 除了 null 其他都能是正确类型
      2. 除原始类型以及函数外都是 object
    2. instanceOf
      1. 不能正确处理原始类型
      2. 原型连
      3. 不能准确判断类型

  3. 类型转换

    1. 转换布尔值
      1. 除 null undefined 空窜 0 false NaN 都是 true
    2. 转换数字
      1. 空数组 0 数组只有一个数值 转换为数值
      2. 空字符串 0
      3. 对象 转化为 NaN
      4. “1”–> 1 Object –> NaN true –> 1 false –> 0 Null –> 0 “any”–> NaN
    3. 转换字符串
      1. Object –> [Object Object] Array –> Array.join(‘,’)
    4. 对象转换为 原始类型
      1. 判断 valueOf() 是否转化为原始类型 如果不是调用 toString() 方法
      2. 所以 空数组转换为 0 情况
    5. 加法转换
      1. 如果一方为字符串 另一方也会转换为字符串
      2. 如果不是字符串或则数值会通过 转化为原始类型顺序处理
    6. 比较转换
      1. === 基础类型不进行转换 直接比较，任意一个条件不满足就是不同
      2. == 进行以下转换（转换为相同类型再进行比较）
        1. 都是对象则地址比较
        2. 一方为原始类型则另一方转换为原始类型比较
        3. 编码比较 unicode

  4. this

    1. 指向调用函数
    2. 指向apply函数
    3. 指向bind函数（只能绑定一次）返回闭包

  5. 闭包

    1. 一个函数可访问另一函数作用域内的局部变量

  6. 拷贝

    1. 深拷贝

      1. JSON处理

        1. 因为转换成字符串，所以 undefined function symbol 无法复制 循环引用处理不来

      2. MessageChannel 可以处理不包含函数的 对象深拷贝

        1
        2
        3
        4
        5
        6
        7
        8

        function deepClone(obj){
           return new Promise((resolve)=>{
              const {port1, port2} = new MessageChanel()
              port1.onmessage = msg=> resolve(msg.data)
              port2.postMessage(obj)
           })
        }

      3. deepCopy

    2. 浅拷贝（只拷贝一层）
      1. Object.assign() 展开符
      2. Array.slice()

  7. 原型链

    1. 多个对象通过__proto__ 链接起来
    2. child.proto = 构造函数.prototype = 原型;原型.proto = 父级原型;原型.constructor = 构造函数
    3. 原型的 constructor 属性指向构造函数，构造函数又通过 prototype 属性指回原型
    4. Function.proto.constructor === Function === Function.prototype
    5. 对象里有_proto_这个属性。它指向原型，由它连接对象和原型组成原型链，同时原型里又有prototype属性，该属性里有一个constructor又指向回对象的构造函数形成一个闭环

  8. 模块化

    1. 优点
      1. 解决命名冲突
      2. 提高复用性
      3. 提高可维护性
    2. amd
      1. 依赖前置
      2. 先加载所有模块
    3. cmd
      1. 依赖后置
      2. 需要时引用
    4. CommonJS
      1. module.exports === exports
      2. exports 是module.exports的引用，不可直接赋值

  9. setInterval通常来说不

    1. 建议使用 setInterval。第一，它和 setTimeout 一样，不能保证在预期的时间执行任务。第二，它存在执行累积的问题，请看以下伪代码

  10. 事件循环

    1. macroTask（jobs）
      1. 宏任务 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering
    2. microTask（task）
      1. 微任务 process.nextTick ，promise ，MutationObserver
    3. 6个阶段
      1. timer 执行 setTimeout 与 setInterval
      2. io 执行 I/O 操作
      3. idle, prepare
      4. poll
        1. 回到 timer 阶段执行回调
        2. 执行 I/O 回调

  11. 手写bind

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function bind(){
       const _this = this
       const args = Array.from(arguments).slice()
       return function F(){
          if(this instanceOf F){
             return new _this(...args, ...arguments)
          }
          _this.apply(args.shift(), args.concat(arguments))
       }
    }