数据监控和数据埋点

一、数据监控分类

(1)数据监控

数据监控，顾名思义就是监听用户的行为。常见的数据监控包括：

PV/UV:PV(page view)，即页面浏览量或点击量。UV:指访问某个站点或点击某条新闻的不同IP地址的人数
用户在每一个页面的停留时间
用户通过什么入口来访问该网页
用户在相应的页面中触发的行为

统计这些数据是有意义的，比如我们知道了用户来源的渠道，可以促进产品的推广，知道用户在每一个页面停留的时间，可以针对停留较长的页面，增加广告推送等等。

(2)性能监控

性能监控指的是监听前端的性能，主要包括监听网页或者说产品在用户端的体验。常见的性能监控数据包括：

不同用户，不同机型和不同系统下的首屏加载时间
白屏时间
http等请求的响应时间
静态资源整体下载时间
页面渲染时间
页面交互动画完成时间

这些性能监控的结果，可以展示前端性能的好坏，根据性能监测的结果可以进一步的去优化前端性能，比如兼容低版本浏览器的动画效果，加快首屏加载等等。

(3)异常监控

此外，产品的前端代码在执行过程中也会发生异常，因此需要引入异常监控。及时的上报异常情况，可以避免线上故障的发上。虽然大部分异常可以通过try catch的方式捕获，但是比如内存泄漏以及其他偶现的异常难以捕获。常见的需要监控的异常包括：

Javascript的异常监控
样式丢失的异常监控

二、常见的埋点方案

1. 代码埋点

代码埋点是最早的埋点方式，根据业务的分析需求，将埋点的采集代码加入到应用端。按照埋点实施方，又分为前端(客户端)埋点和后端(服务端)埋点两种类型。

1）客户端埋点

由前端开发手动定义数据采集时机、内容等将数据采集的代码代码段加入到前端业务代码中，当用户在前端产生对应行为时，触发数据采集代码。

优点：

按需埋点，采集数据更全面，几乎可覆盖所有数据采集场景
行为数据和业务数据可充分联合分析

缺点：

延迟上报，数据丢失率高(5%-10%)
需要客户端发版，用户端更新App
埋点开发工作量大
埋点流程需要多方协作，容易漏埋、错埋

适用场景：

全面分析用户在客户端的操作行为，对于一些电商交易类的产品，需要把行为和业务数据充分结合分析

2）服务端埋点

由服务端开发将埋点采集代码加入到后端服务请求中，当用户前端操作请求服务端数据时，按照约定规则触发埋点代码

优点

按需埋点，采集数据更全面，几乎可覆盖所有数据采集场景
行为数据和业务数据可充分联合分析
数据采集实时上报，准确性高，丢失率低
服务端更新，不需要客户端发版或用户更新版本

缺点

纯前端操作不触发服务请求的按钮点击无法采集数据
埋点开发工作量大
埋点流程需要多方协作，容易漏埋、错埋

适用场景：

对于一些非点击、不可见的行为，或者要获取用户身份信息、更多的业务相关的属性信息。如果前后端都可以采集到，优先后端埋点

2. 全埋点

全埋点也有称之为无埋点或无痕埋点的，主要是将埋点采集代码封装成标准的SDK，应用端接入后，按照SDK的采集规则自动化地进行数据采集和上报

优点：

接入SDK后，可自动采集数据，无需按需开发，节省开发成本
页面可见元素均可自动采集，数据更全面
埋点流程简单，业务使用埋点系统自助定义事件，新增埋点需求无需业务开发参与

缺点

动态页面或页面不可见行为数据无法采集
和业务强相关的属性信息采集困难
数据全部采集，数据存储压力大

适用场景：

业务场景简单，如工具、应用类的产品，或者业务发展初期，产品快速迭代需求比精细化分析优先级更高，只需要分析简单的PV、UV

3. 可视化埋点

默认不采集数据，当数据分析人员通过设备连接用户行为分析工具的数据接入管理界面，在页面可视化定义需要采集的位点后下发采集请求，采集代码生效

优点：

默认不上报数据，可视化圈选才按需触发埋点，节约存储和传输成本
业务可视化圈选，埋点操作简单方便

缺点

数据只在埋点圈选定义之后才有，历史数据无法回溯
只能覆盖基本的点击、展示等用户行为，和业务强相关的属性信息采集困难

适用场景：

业务场景简单，如工具、应用类的产品，或者业务发展初期，产品快速迭代需求比精细化分析优先级更高，只需要分析简单的PV、UV

三、sdk设计

SDK的设计

在开始设计之前，先看一下SDK怎么使用。

import StatisticSDK from 'StatisticSDK';
// 全局初始化一次
window.insSDK = new StatisticSDK('uuid-12345');
<button onClick={()=>{
  window.insSDK.event('click','confirm');
  ...// 其他业务代码
}}>确认</button>

首先把SDK实例挂载到全局，之后在业务代码中调用，这里的新建实例时需要传入一个id，因为这个埋点监控系统往往是给多个业务去使用的，通过id去区分不同的数据来源。

首先实现实例化部分：

class StatisticSDK {
  constructor(productID){
    this.productID = productID;
  }
}

数据发送

数据发送是一个最基础的api，后面的功能都要基于此进行。通常这种前后端分离的场景会使用AJAX的方式发送数据，但是这里使用图片的src属性。原因有两点：

没有跨域的限制，像srcipt标签、img标签都可以直接发送跨域的GET请求，不用做特殊处理。
兼容性好，一些静态页面可能禁用了脚本，这时script标签就不能使用了。

但要注意，这个图片不是用来展示的，我们的目的是去「传递数据」，只是借助img标签的的src属性，在其url后面拼接上参数，服务端收到再去解析。

class StatisticSDK {
  constructor(productID){
    this.productID = productID;
  }
  send(baseURL,query={}){
    query.productID = this.productID;
    let queryStr = Object.entries(query).map(([key, value]) => `${key}=${value}`).join('&')
    let img = new Image();
    img.src = `${baseURL}?${queryStr}`
  }
}

img标签的优点是不需要将其append到文档，只需设置src属性便能成功发起请求。

通常请求的这个url会是一张1X1px的GIF图片，网上的文章对于这里为什么返回图片的是一张GIF都是含糊带过，这里查阅了一些资料并测试了：

1.同样大小，不同格式的的图片中GIF大小是最小的，所以选择返回一张GIF，这样对性能的损耗更小。

2.如果返回204，会走到img的onerror事件，并抛出一个全局错误;如果返回200和一个空对象会有一个CORB的告警。

3.当然如果不在意这个报错可以采取返回空对象，事实上也有一些工具是这样做的。

有一些埋点需要真实的加到页面上，比如垃圾邮件的发送者会添加这样一个隐藏标志来验证邮件是否被打开，如果返回204或者是200空对象会导致一个明显图片占位符。

<img src="http://www.example.com/logger?event_id=1234">1.

更优雅的web beacon

这种打点标记的方式被称web beacon(网络信标)。除了gif图片，从2014年开始，浏览器逐渐实现专门的API，来更优雅的完成这件事：Navigator.sendBeacon。

使用很简单。

Navigator.sendBeacon(url,data)

相较于图片的src，这种方式的更有优势：

不会和主要业务代码抢占资源，而是在浏览器空闲时去做发送。
并且在页面卸载时也能保证请求成功发送，不阻塞页面刷新和跳转。

现在的埋点监控工具通常会优先使用sendBeacon，但由于浏览器兼容性，还是需要用图片的src兜底。

用户行为监控

上面实现了数据发送的api，现在可以基于它去实现用户行为监控的api。

class StatisticSDK {
  constructor(productID){
    this.productID = productID;
  }
  // 数据发送
  send(baseURL,query={}){
    query.productID = this.productID;
      let queryStr = Object.entries(query).map(([key, value]) => `${key}=${value}`).join('&')
      let img = new Image();
      img.src = `${baseURL}?${queryStr}`
  }
  // 自定义事件
  event(key, val={}) {
    let eventURL = 'http://demo/'
    this.send(eventURL,{event:key,...val})
  }
  // pv曝光
  pv() {
    this.event('pv')
  }
}

用户行为包括自定义事件和pv曝光，也可以把pv曝光看作是一种特殊的自定义行为事件。

页面性能监控

页面的性能数据可以通过performance.timing这个API获取到，获取的数据是单位为毫秒的时间戳。

上面的不需要全部了解，但比较关键的数据有下面几个，根据它们可以计算出FP/DCL/Load等关键事件的时间点：

页面首次渲染时间：FP(firstPaint)=domLoading-navigationStart。
DOM加载完成：DCL(DOMContentEventLoad)=domContentLoadedEventEnd-navigationStart。
图片、样式等外链资源加载完成：L(Load)=loadEventEnd-navigationStart。

上面的数值可以跟performance面板里的结果对应。

回到SDK，我们只用实现一个上传所有性能数据的api就可以了：

class StatisticSDK {
  constructor(productID){
    this.productID = productID;
    // 初始化自动调用性能上报
    this.initPerformance()
  }
  // 数据发送
  send(baseURL,query={}){
    query.productID = this.productID;
      let queryStr = Object.entries(query).map(([key, value]) => `${key}=${value}`).join('&')
      let img = new Image();
      img.src = `${baseURL}?${queryStr}`
  }
  // 性能上报
  initPerformance(){
    let performanceURL = 'http://performance/'
    this.send(performanceURL,performance.timing)
  }
}

并且，在构造函数里自动调用，因为性能数据是必须要上传的，就不需要用户每次都手动调用了。

错误告警监控

错误报警监控分为JS原生错误和React/Vue的组件错误的处理。

JS原生错误

除了try catch中捕获住的错误，我们还需要上报没有被捕获住的错误——通过error事件和unhandledrejection事件去监听。

error

error事件是用来监听DOM操作错误DOMException和JS错误告警的，具体来说，JS错误分为下面8类：

InternalError: 内部错误，比如如递归爆栈。
RangeError: 范围错误，比如new Array(-1)。
EvalError: 使用eval()时错误。
ReferenceError: 引用错误，比如使用未定义变量。
SyntaxError: 语法错误，比如var a = 。
TypeError: 类型错误，比如[1,2].split(‘.’)。
URIError: 给 encodeURI或 decodeURl()传递的参数无效，比如decodeURI(‘%2’)。
Error: 上面7种错误的基类，通常是开发者抛出。

也就是说，代码运行时发生的上述8类错误，都可以被检测到。

unhandledrejection

Promise内部抛出的错误是无法被error捕获到的，这时需要用unhandledrejection事件。

回到SDK的实现，处理错误报警的代码如下：

class StatisticSDK {
  constructor(productID){
    this.productID = productID;
    // 初始化错误监控
    this.initError()
  }
  // 数据发送
  send(baseURL,query={}){
    query.productID = this.productID;
      let queryStr = Object.entries(query).map(([key, value]) => `${key}=${value}`).join('&')
      let img = new Image();
      img.src = `${baseURL}?${queryStr}`
  }
  // 自定义错误上报
  error(err, etraInfo={}) {
    const errorURL = 'http://error/'
    const { message, stack } = err;
    this.send(errorURL, { message, stack, ...etraInfo})
  }
  // 初始化错误监控
  initError(){
    window.addEventListener('error', event=>{
      this.error(error);
    })
    window.addEventListener('unhandledrejection', event=>{
      this.error(new Error(event.reason), { type: 'unhandledrejection'})
    })
  }
}

和初始化性能监控一样，初始化错误监控也是一定要做的，所以需要在构造函数中调用。后续开发人员只用在业务代码的try catch中调用error方法即可。

React/Vue组件错误

成熟的框架库都会有错误处理机制，React和Vue也不例外。

React的错误边界

错误边界是希望当应用内部发生渲染错误时，不会整个页面崩溃。我们提前给它设置一个兜底组件，并且可以细化粒度，只有发生错误的部分被替换成这个「兜底组件」，不至于整个页面都不能正常工作。

它的使用很简单，就是一个带有特殊生命周期的类组件，用它把业务组件包裹起来。

这两个生命周期是getDerivedStateFromError和componentDidCatch。

代码如下：

// 定义错误边界
class ErrorBoundary extends React.Component {
  state = { error: null }
  static getDerivedStateFromError(error) {
    return { error }
  }
  componentDidCatch(error, errorInfo) {
    // 调用我们实现的SDK实例
    insSDK.error(error, errorInfo)
  }
  render() {
    if (this.state.error) {
      return <h2>Something went wrong.</h2>
    }
    return this.props.children
  }
}
...
<ErrorBoundary>
  <BuggyCounter />
</ErrorBoundary>1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.

回到SDK的整合上，在生产环境下，被错误边界包裹的组件，如果内部抛出错误，全局的error事件是无法监听到的，因为这个错误边界本身就相当于一个try catch。所以需要在错误边界这个组件内部去做上报处理。也就是上面代码中的componentDidCatch生命周期。

Vue的错误边界

vue也有一个类似的生命周期来做这件事，不再赘述：errorCaptured。

Vue.component('ErrorBoundary', {
  data: () => ({ error: null }),
  errorCaptured (err, vm, info) {
    this.error = `${err.stack}\n\nfound in ${info} of component`
    // 调用我们的SDK，上报错误信息
    insSDK.error(err,info)
    return false
  },
  render (h) {
    if (this.error) {
      return h('pre', { style: { color: 'red' }}, this.error)
    }
    return this.$slots.default[0]
  }
})
...
<error-boundary>
  <buggy-counter />
</error-boundary>

现在我们已经实现了一个完整的SDK的骨架，并且处理了在实际开发时，react/vue项目应该怎么接入。

参考文献：

https://www.51cto.com/article/706364.html

前端面试题大全（算法）

前端面试题类目分类

HTML5 + CSS3
JavaScript
Vue + Vue3
React
Webpack
服务端

考点频率：♥︎ 、 ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎ ♥︎

算法

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 算法中时间复杂度，空间复杂度的理解？如何计算？

一、前言

算法（Algorithm）是指用来操作数据、解决程序问题的一组方法。对于同一个问题，使用不同的算法，也许最终得到的结果是一样的，但在过程中消耗的资源和时间却会有很大的区别

衡量不同算法之间的优劣主要是通过时间和空间两个维度去考量：

时间维度：是指执行当前算法所消耗的时间，我们通常用「时间复杂度」来描述。
空间维度：是指执行当前算法需要占用多少内存空间，我们通常用「空间复杂度」来描述

通常会遇到一种情况，时间和空间维度不能够兼顾，需要在两者之间取得一个平衡点是我们需要考虑的

一个算法通常存在最好、平均、最坏三种情况，我们一般关注的是最坏情况

最坏情况是算法运行时间的上界，对于某些算法来说，最坏情况出现的比较频繁，也意味着平均情况和最坏情况一样差

二、时间复杂度

时间复杂度是指执行这个算法所需要的计算工作量，其复杂度反映了程序执行时间「随输入规模增长而增长的量级」，在很大程度上能很好地反映出算法的优劣与否

一个算法花费的时间与算法中语句的「执行次数成正比」，执行次数越多，花费的时间就越多

算法的复杂度通常用大O符号表述，定义为T(n) = O(f(n))，常见的时间复杂度有：O(1)常数型、O(log n)对数型、O(n)线性型、O(nlogn)线性对数型、O(n^2)平方型、O(n^3)立方型、O(n^k)k次方型、O(2^n)指数型，如下图所示：

从上述可以看到，随着问题规模n的不断增大，上述时间复杂度不断增大，算法的执行效率越低，由小到大排序如下：

Ο(1)＜Ο(log n)＜Ο(n)＜Ο(nlog n)＜Ο(n2)＜Ο(n3)＜…＜Ο(2^n)＜Ο(n!)

注意的是，算法复杂度只是描述算法的增长趋势，并不能说一个算法一定比另外一个算法高效，如果常数项过大的时候也会导致算法的执行时间变长

关于如何计算时间复杂度，可以看看如下简单例子：

function process(n) {
  let a = 1
  let b = 2
  let sum = a + b
  for(let i = 0; i < n; i++) {
    sum += i
  }
  return sum
}

该函数算法需要执行的运算次数用输入大小n的函数表示，即 T(n) = 2 + n + 1，那么时间复杂度为O(n + 3)，又因为时间复杂度只关注最高数量级，且与之系数也没有关系，因此上述的时间复杂度为O(n)

又比如下面的例子：

function process(n) {
 let count = 0
  for(let i = 0; i < n; i++){
    for(let i = 0; i < n; i++){
      count += 1
    }
  }
}

循环里面嵌套循环，外面的循环执行一次，里面的循环执行n次，因此时间复杂度为 O(n*n*1 + 2) = O(n^2)

对于顺序执行的语句，总的时间复杂度等于其中最大的时间复杂度，如下：

function process(n) {
  let sum = 0
  for(let i = 0; i < n; i++) {
    sum += i
  }
  for(let i = 0; i < n; i++){
    for(let i = 0; i < n; i++){
      sum += 1
    }
  }
  return sum
}

上述第一部分复杂度为O(n)，第二部分复杂度为O(n^2)，总复杂度为max(O(n^2), O(n)) = O(n^2)

又如下一个例子：

function process(n) {
  let i = 1; // ①
  while (i <= n) {
     i = i * 2; // ②
  }
}

循环语句中以2的倍数来逼近n，每次都乘以2。如果用公式表示就是1 * 2 * 2 * 2 … * 2 <=n，也就是说2的x次方小于等于n时会执行循环体，记作2^x <= n，于是得出x<=logn

因此循环在执行logn次之后，便结束，因此时间复杂度为O(logn)

同理，如果一个O(n)循环里面嵌套O(logn)的循环，则时间复杂度为O(nlogn)，像O(n^3)无非也就是嵌套了三层O(n)循环

三、空间复杂度

空间复杂度主要指执行算法所需内存的大小，用于对程序运行过程中所需要的临时存储空间的度量

除了需要存储空间、指令、常数、变量和输入数据外，还包括对数据进行操作的工作单元和存储计算所需信息的辅助空间

下面给出空间复杂度为O(1)的示例，如下

let a = 1
let b = 2
let c = 3

上述代码的临时空间不会随着n的变化而变化，因此空间复杂度为O(1)

let arr []
for(i=1; i<=n; ++i){
  arr.push(i)
}

上述可以看到，随着n的增加，数组的占用的内存空间越大

通常来说，只要算法不涉及到动态分配的空间，以及递归、栈所需的空间，空间复杂度通常为O(1)，一个一维数组a[n]，空间复杂度O(n)，二维数组为O(n^2)

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对数据结构的理解？有哪些？区别？

一、是什么

数据结构是计算机存储、组织数据的方式，是指相互之间存在一种或多种特定关系的数据元素的集合

前面讲到，一个程序 = 算法 + 数据结构，数据结构是实现算法的基础，选择合适的数据结构可以带来更高的运行或者存储效率

数据元素相互之间的关系称为结构，根据数据元素之间关系的不同特性，通常有如下四类基本的结构：

集合结构：该结构的数据元素间的关系是“属于同一个集合”
线性结构：该结构的数据元素之间存在着一对一的关系
树型结构：该结构的数据元素之间存在着一对多的关系
图形结构：该结构的数据元素之间存在着多对多的关系，也称网状结构

由于数据结构种类太多，逻辑结构可以再分成为：

线性结构：有序数据元素的集合，其中数据元素之间的关系是一对一的关系，除了第一个和最后一个数据元素之外，其它数据元素都是首尾相接的
非线性结构：各个数据元素不再保持在一个线性序列中，每个数据元素可能与零个或者多个其他数据元素发生关联

二、有哪些

常见的数据结构有如下：

数组
栈
队列
链表
树
图
堆
散列表

数组

在程序设计中，为了处理方便，一般情况把具有相同类型的若干变量按有序的形式组织起来，这些按序排列的同类数据元素的集合称为数组

栈

一种特殊的线性表，只能在某一端插入和删除的特殊线性表，按照先进后出的特性存储数据

先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据

队列

跟栈基本一致，也是一种特殊的线性表，其特性是先进先出，只允许在表的前端进行删除操作，而在表的后端进行插入操作

链表

是一种物理存储单元上非连续、非顺序的存储结构，数据元素的逻辑顺序是通过链表中的指针链接次序实现的

链表由一系列结点（链表中每一个元素称为结点）组成，结点可以在运行时动态生成

一般情况，每个结点包括两个部分：一个是存储数据元素的数据域，另一个是存储下一个结点地址的指针域

树

树是典型的非线性结构，在树的结构中，有且仅有一个根结点，该结点没有前驱结点。在树结构中的其他结点都有且仅有一个前驱结点，而且可以有两个以上的后继结点

图

一种非线性结构。在图结结构中，数据结点一般称为顶点，而边是顶点的有序偶对。如果两个顶点之间存在一条边，那么就表示这两个顶点具有相邻关系

堆

堆是一种特殊的树形数据结构，每个结点都有一个值，特点是根结点的值最小（或最大），且根结点的两个子树也是一个堆

散列表

若结构中存在关键字和K相等的记录，则必定在f(K)的存储位置上，不需比较便可直接取得所查记录

三、区别

上述的数据结构，之前的区别可以分成线性结构和非线性结构：

线性结构有：数组、栈、队列、链表等
非线性结构有：树、图、堆等

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对栈、队列的理解？应用场景？

一、栈

栈（stack）又名堆栈，它是一种运算受限的线性表，限定仅在表尾进行插入和删除操作的线性表

表尾这一端被称为栈顶，相反地另一端被称为栈底，向栈顶插入元素被称为进栈、入栈、压栈，从栈顶删除元素又称作出栈

所以其按照先进后出的原则存储数据，先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据，具有记忆作用

关于栈的简单实现，如下：

class Stack {
  constructor() {
    this.items = [];
  }

  /**
   * 添加一个（或几个）新元素到栈顶
   * @param {*} element 新元素
   */
  push(element) {
    this.items.push(element)
  }

  /**
   * 移除栈顶的元素，同时返回被移除的元素
   */
  pop() {
    return this.items.pop()
  }

  /**
   * 返回栈顶的元素，不对栈做任何修改（这个方法不会移除栈顶的元素，仅仅返回它）
   */
  peek() {
    return this.items[this.items.length - 1]
  }

  /**
   * 如果栈里没有任何元素就返回true,否则返回false
   */
  isEmpty() {
    return this.items.length === 0
  }

  /**
   * 移除栈里的所有元素
   */
  clear() {
    this.items = []
  }

  /**
   * 返回栈里的元素个数。这个方法和数组的length属性很类似
   */
  size() {
    return this.items.length
  }
}

关于栈的操作主要的方法如下：

push：入栈操作
pop：出栈操作

二、队列

跟栈十分相似，队列是一种特殊的线性表，特殊之处在于它只允许在表的前端（front）进行删除操作，而在表的后端（rear）进行插入操作

进行插入操作的端称为队尾，进行删除操作的端称为队头，当队列中没有元素时，称为空队列

在队列中插入一个队列元素称为入队，从队列中删除一个队列元素称为出队。因为队列只允许在一端插入，在另一端删除，所以只有最早进入队列的元素才能最先从队列中删除，故队列又称为先进先出

简单实现一个队列的方式，如下：

class Queue {
    constructor() {
        this.list = []
        this.frontIndex = 0
        this.tailIndex = 0
    }
    enqueue(item) {
        this.list[this.tailIndex++] = item
    }
    unqueue() {
        const item  = this.list[this.frontIndex]
        this.frontIndex++        
        return item
    }
}

上述这种入队和出队操作中，头尾指针只增加不减小，致使被删元素的空间永远无法重新利用

当队列中实际的元素个数远远小于向量空间的规模时，也可能由于尾指针已超越向量空间的上界而不能做入队操作，出该现象称为”假溢”

在实际使用队列时，为了使队列空间能重复使用，往往对队列的使用方法稍加改进：

无论插入或删除，一旦rear指针增1或front指针增1 时超出了所分配的队列空间，就让它指向这片连续空间的起始位置，这种队列也就是循环队列

下面实现一个循环队列，如下：

class Queue {
    constructor(size) {
        this.size = size; // 长度需要限制, 来达到空间的利用, 代表空间的长度
        this.list = [];
        this.font = 0; // 指向首元素
        this.rear = 0;  // 指向准备插入元素的位置
    }
    enQueue() {
        if (this.isFull() == true) {
            return false
        }
        this.rear = this.rear % this.k;
        this._data[this.rear++] = value;
        return true
    }
    deQueue() {
        if(this.isEmpty()){
            return false;
        }
        this.font++;
        this.font = this.font % this.k;
        return true;
    }
    isEmpty() {
        return this.font == this.rear - 1;
    }
    isFull() {
        return this.rear % this.k == this.font;
    }
}

上述通过求余的形式代表首尾指针增1 时超出了所分配的队列空间

三、应用场景

栈

借助栈的先进后出的特性，可以简单实现一个逆序数处的功能，首先把所有元素依次入栈，然后把所有元素出栈并输出

包括编译器的在对输入的语法进行分析的时候，例如"()"、"{}"、"[]"这些成对出现的符号，借助栈的特性，凡是遇到括号的前半部分，即把这个元素入栈，凡是遇到括号的后半部分就比对栈顶元素是否该元素相匹配，如果匹配，则前半部分出栈，否则就是匹配出错

包括函数调用和递归的时候，每调用一个函数，底层都会进行入栈操作，出栈则返回函数的返回值

生活中的例子，可以把乒乓球盒比喻成一个堆栈，球一个一个放进去（入栈），最先放进去的要等其后面的全部拿出来后才能出来（出栈），这种就是典型的先进后出模型

队列

当我们需要按照一定的顺序来处理数据，而该数据的数据量在不断地变化的时候，则需要队列来帮助解题

队列的使用广泛应用在广度优先搜索种，例如层次遍历一个二叉树的节点值（后续将到）

生活中的例子，排队买票，排在队头的永远先处理，后面的必须等到前面的全部处理完毕再进行处理，这也是典型的先进先出模型

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对链表的理解？常见的操作有哪些？

一、是什么

链表（Linked List）是一种物理存储单元上非连续、非顺序的存储结构，数据元素的逻辑顺序是通过链表中的指针链接次序实现的，由一系列结点（链表中每一个元素称为结点）组成

每个结点包括两个部分：一个是存储数据元素的数据域，另一个是存储下一个结点地址的指针域

节点用代码表示，则如下：

class Node {
  constructor(val) {
    this.val = val;
    this.next = null;
  }
}

data 表示节点存放的数据
next 表示下一个节点指向的内存空间

相比于线性表顺序结构，操作复杂。由于不必须按顺序存储，链表在插入的时候可以达到O(1)的复杂度，比另一种线性表顺序表快得多，但是查找一个节点或者访问特定编号的节点则需要O(n)的时间，而线性表和顺序表相应的时间复杂度分别是O(logn)和O(1)

链表的结构也十分多，常见的有四种形式：

单链表：除了头节点和尾节点，其他节点只包含一个后继指针
循环链表：跟单链表唯一的区别就在于它的尾结点又指回了链表的头结点，首尾相连，形成了一个环
双向链表：每个结点具有两个方向指针，后继指针(next)指向后面的结点，前驱指针(prev)指向前面的结点，其中节点的前驱指针和尾结点的后继指针均指向空地址NULL
双向循环链表：跟双向链表基本一致，不过头节点前驱指针指向尾迹诶单和尾节点的后继指针指向头节点

二、操作

关于链表的操作可以主要分成如下：

遍历
插入
删除

遍历

遍历很好理解，就是根据next指针遍历下去，直到为null，如下：

let current = head
while(current){
 console.log(current.val)
  current = current.next
}

插入

向链表中间插入一个元素，可以如下图所示：

可以看到，插入节点可以分成如下步骤：

存储插入位置的前一个节点
存储插入位置的后一个节点
将插入位置的前一个节点的 next 指向插入节点
将插入节点的 next 指向前面存储的 next 节点

删除

向链表任意位置删除节点，如下图操作：

从上图可以看到删除节点的步骤为如下：

获取删除节点的前一个节点
获取删除节点的后一个节点
将前一个节点的 next 指向后一个节点
向删除节点的 next 指向为null

如果想要删除制定的节点，示意代码如下：

while (current != node){
  pervious = current;
  current = current.next;
  nextNode = current.next;
}
pervious.next = nextNode

同样如何希望删除节点处理行为一致，可以在头节点前面添加一个虚拟头节点

三、应用场景

缓存是一种提高数据读取性能的技术，在硬件设计、软件开发中都有着非常广泛的应用，比如常见的CPU缓存、数据库缓存、浏览器缓存等等

当缓存空间被用满时，我们可能会使用LRU最近最好使用策略去清楚，而实现LRU算法的数据结构是链表，思路如下：

维护一个有序单链表，越靠近链表尾部的结点是越早之前访问的。当有一个新的数据被访问时，我们从链表头部开始顺序遍历链表

如果此数据之前已经被缓存在链表中了，我们遍历得到这个数据的对应结点，并将其从原来的位置删除，并插入到链表头部
如果此数据没在缓存链表中
- 如果此时缓存未满，可直接在链表头部插入新节点存储此数据
- 如果此时缓存已满，则删除链表尾部节点，再在链表头部插入新节点

由于链表插入删除效率极高，达到O(1)。对于不需要搜索但变动频繁且无法预知数量上限的数据的情况的时候，都可以使用链表

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对集合的理解？常见的操作有哪些？

一、是什么

集合（Set），指具有某种特定性质的事物的总体，里面的每一项内容称作元素

在数学中，我们经常会遇到集合的概念：

有限集合：例如一个班集所有的同学构成的集合
无限集合：例如全体自然数集合

在计算机中集合道理也基本一致，具有三大特性：

确定性：于一个给定的集合，集合中的元素是确定的。即一个元素，或者属于该集合，或者不属于该集合，两者必居其一
无序性：在一个集合中，不考虑元素之间的顺序，只要元素完全相同，就认为是同一个集合
互异性：集合中任意两个元素都是不同的

二、操作

在ES6中，集合本身是一个构建函数Set，用来生成 Set 数据结构，如下：

const s = new Set();

关于集合常见的方法有：

add()：增
delete()：删
has()：改
clear()：查

add()

添加某个值，返回 Set 结构本身

当添加实例中已经存在的元素，set不会进行处理添加

s.add(1).add(2).add(2); // 2只被添加了一次

体现了集合的互异性特性

delete()

删除某个值，返回一个布尔值，表示删除是否成功

s.delete(1)

has()

返回一个布尔值，判断该值是否为Set的成员

s.has(2)

clear()

清除所有成员，没有返回值

s.clear()

关于多个集合常见的操作有：

并集
交集
差集

并集

两个集合的共同元素，如下图所示：

代码实现方式如下：

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

交集

两个集合A 和 B，即属于A又属于B的元素，如下图所示：

用代码标识则如下：

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

差集

两个集合A 和 B，属于A的元素但不属于B的元素称为A相对于B的差集，如下图所示：

代码标识则如下：

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// （a 相对于 b 的）差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

三、应用场景

一般情况下，使用数组的概率会比集合概率高很多

使用set集合的场景一般是借助其确定性，其本身只包含不同的元素

所以，可以利用Set的一些原生方法轻松的完成数组去重，查找数组公共元素及不同元素等操作

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对树的理解？相关的操作有哪些？

一、是什么

在计算机领域，树形数据结构是一类重要的非线性数据结构，可以表示数据之间一对多的关系。以树与二叉树最为常用，直观看来，树是以分支关系定义的层次结构

二叉树满足以下两个条件：

本身是有序树
树中包含的各个结点的不能超过 2，即只能是 0、1 或者 2

如下图，左侧的为二叉树，而右侧的因为头结点的子结点超过2，因此不属于二叉树：

同时，二叉树可以继续进行分类，分成了满二叉树和完成二叉树：

满二叉树：如果二叉树中除了叶子结点，每个结点的度都为 2

完成二叉树：如果二叉树中除去最后一层节点为满二叉树，且最后一层的结点依次从左到右分布

二、操作

关于二叉树的遍历，常见的有：

前序遍历
中序遍历
后序遍历
层序遍历

前序遍历

前序遍历的实现思想是：

访问根节点
访问当前节点的左子树
若当前节点无左子树，则访问当前节点的右子

根据遍历特性，递归版本用代码表示则如下：

const preOrder = (root) => {
  if(!root){ return }
  console.log(root)
  preOrder(root.left)
  preOrder(root.right)
}

如果不使用递归版本，可以借助栈先进后出的特性实现，先将根节点压入栈，再分别压入右节点和左节点，直到栈中没有元素，如下：

const preOrder = (root) => {
  if(!root){ return }
  const stack = [root]
  while (stack.length) {
    const n = stack.pop()
    console.log(n.val)
    if (n.right) {
      stack.push(n.right)
    }
    if (n.left) {
      stack.push(n.left)
    }
  }
}

中序遍历

前序遍历的实现思想是：

访问当前节点的左子树
访问根节点
访问当前节点的右子

递归版本很好理解，用代码表示则如下：

const inOrder = (root) => {
  if (!root) { return }
  inOrder(root.left)
  console.log(root.val)
  inOrder(root.right)
}

非递归版本也是借助栈先进后出的特性，可以一直首先一直压入节点的左元素，当左节点没有后，才开始进行出栈操作，压入右节点，然后有依次压入左节点，如下：

const inOrder = (root) => {
  if (!root) { return }
  const stack = [root]
  let p = root
  while(stack.length || p){
    while (p) {
      stack.push(p)
      p = p.left
    }
    const n = stack.pop()
    console.log(n.val)
    p = n.right
  }
}

后序遍历

前序遍历的实现思想是：

访问当前节点的左子树
访问当前节点的右子
访问根节点

递归版本，用代码表示则如下：

const postOrder = (root) => {
  if (!root) { return }
  postOrder(root.left)
  postOrder(root.right)
  console.log(n.val)
 }

后序遍历非递归版本实际根全序遍历是逆序关系，可以再多创建一个栈用来进行输出，如下：

const preOrder = (root) => {
  if(!root){ return }
  const stack = [root]
  const outPut = []
  while (stack.length) {
    const n = stack.pop()
    outPut.push(n.val)
    if (n.right) {
      stack.push(n.right)
    }
    if (n.left) {
      stack.push(n.left)
    }
  }
  while (outPut.length) {
    const n = outPut.pop()
    console.log(n.val)
  }
}

层序遍历

按照二叉树中的层次从左到右依次遍历每层中的结点

借助队列先进先出的特性，从树的根结点开始，依次将其左孩子和右孩子入队。而后每次队列中一个结点出队，都将其左孩子和右孩子入队，直到树中所有结点都出队，出队结点的先后顺序就是层次遍历的最终结果

用代码表示则如下：

const levelOrder = (root) => {
    if (!root) { return [] }
    const queue = [[root, 0]]
    const res = []
    while (queue.length) {
        const n = queue.shift()
        const [node, leval] = n
        if (!res[leval]) {
            res[leval] = [node.val]
        } else {
            res[leval].push(node.val)
        }
        if (node.left) { queue.push([node.left, leval + 1]) }
        if (node.right) { queue.push([node.right, leval + 1]) }
    }
    return res
};

三、总结

树是一个非常重要的非线性结构，其中二叉树以二叉树最常见，二叉树的遍历方式可以分成前序遍历、中序遍历、后序遍历

同时，二叉树又分成了完成二叉树和满二叉树

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对堆的理解？如何实现？应用场景？

一、是什么

堆(Heap)是计算机科学中一类特殊的数据结构的统称

堆通常是一个可以被看做一棵完全二叉树的数组对象，如下图：

总是满足下列性质：

堆中某个结点的值总是不大于或不小于其父结点的值
堆总是一棵完全二叉树

堆又可以分成最大堆和最小堆：

最大堆：每个根结点，都有根结点的值大于两个孩子结点的值
最小堆：每个根结点，都有根结点的值小于孩子结点的值

二、操作

堆的元素存储方式，按照完全二叉树的顺序存储方式存储在一个一维数组中，如下图：

用一维数组存储则如下：

[0, 1, 2, 3, 4, 5, 6, 7, 8]

根据完全二叉树的特性，可以得到如下特性：

数组零坐标代码的是堆顶元素
一个节点的父亲节点的坐标等于其坐标除以2整数部分
一个节点的左节点等于其本身节点坐标 * 2 + 1
一个节点的右节点等于其本身节点坐标 * 2 + 2

根据上述堆的特性，下面构建最小堆的构造函数和对应的属性方法：

class MinHeap {
  constructor() {
    // 存储堆元素
    this.heap = []
  }
  // 获取父元素坐标
  getParentIndex(i) {
    return (i - 1) >> 1
  }
  
  // 获取左节点元素坐标
  getLeftIndex(i) {
    return i * 2 + 1
  }
  
 // 获取右节点元素坐标
  getRightIndex(i) {
    return i * 2 + 2
  }
  
  // 交换元素
  swap(i1, i2) {
    const temp = this.heap[i1]
    this.heap[i1] = this.heap[i2]
    this.heap[i2] = temp
  }
  
  // 查看堆顶元素
  peek() {
    return this.heap[0]
  }
  
  // 获取堆元素的大小
  size() {
    return this.heap.length
  }
}

涉及到堆的操作有：

插入
删除

插入

将值插入堆的底部，即数组的尾部，当插入一个新的元素之后，堆的结构就会被破坏，因此需要堆中一个元素做上移操作

将这个值和它父节点进行交换，直到父节点小于等于这个插入的值，大小为k的堆中插入元素的时间复杂度为O(logk)

如下图所示，22节点是新插入的元素，然后进行上移操作：

删除

常见操作是用数组尾部元素替换堆顶，这里不直接删除堆顶，因为所有的元素会向前移动一位，会破坏了堆的结构

然后进行下移操作，将新的堆顶和它的子节点进行交换，直到子节点大于等于这个新的堆顶，删除堆顶的时间复杂度为O(logk)

整体如下图操作：

时间复杂度

关于堆的插入和删除时间复杂度都是Olog(n)，原因在于包含n个节点的完全二叉树，树的高度不会超过log2n

堆化的过程是顺着节点所在路径比较交换的，所以堆化的时间复杂度跟树的高度成正比，也就是Olog(n)，插入数据和删除堆顶元素的主要逻辑就是堆化

三、总结

堆是一个完全二叉树
堆中每一个节点的值都必须大于等于(或小于等于)其子树中每个节点的值
对于每个节点的值都大于等于子树中每个节点值的堆，叫作“大顶堆”
对于每个节点的值都小于等于子树中每个节点值的堆，叫作“小顶堆”
根据堆的特性，我们可以使用堆来进行排序操作，也可以使用其来求第几大或者第几小的值

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对图的理解？相关操作有哪些？

一、是什么

在计算机科学中，图是一种抽象的数据类型，在图中的数据元素通常称为结点，V是所有顶点的集合，E是所有边的集合

如果两个顶点v, w，只能由v向w，而不能由w向v，那么我们就把这种情况叫做一个从 v 到 w 的有向边。v 也被称做初始点，w也被称为终点。这种图就被称做有向图

如果v和w是没有顺序的，从v到达w和从w到达v是完全相同的，这种图就被称为无向图

图的结构比较复杂，任意两个顶点之间都可能存在联系，因此无法以数据元素在存储区中的物理位置来表示元素之间的关系

常见表达图的方式有如下：

邻接矩阵
邻接表

邻接矩阵

通过使用一个二维数组G[N][N]进行表示N个点到N-1编号，通过邻接矩阵可以立刻看出两顶点之间是否存在一条边，只需要检查邻接矩阵行i和列j是否是非零值，对于无向图，邻接矩阵是对称的

邻接表

存储方式如下图所示：

在javascript中，可以使用Object进行表示，如下：

const graph = {
  A: [2, 3, 5],
  B: [2],
  C: [0, 1, 3],
  D: [0, 2],
  E: [6],
  F: [0, 6],
  G: [4, 5]
}

图的数据结构还可能包含和每条边相关联的数值（edge value），例如一个标号或一个数值（即权重，weight；表示花费、容量、长度等）

二、操作

关于的图的操作常见的有：

深度优先遍历
广度优先遍历

首先构建一个图的邻接矩阵表示，如下面的图：

用代码表示则如下：

const graph = {
  0: [1, 4],
  1: [2, 4],
  2: [2, 3],
  3: [],
  4: [3],
}

深度优先遍历

也就是尽可能的往深处的搜索图的分支

实现思路是，首先应该确定一个根节点，然后对根节点的没访问过的相邻节点进行深度优先遍历

确定以 0 为根节点，然后进行深度遍历，然后遍历1，接着遍历 2，然后3，此时完成一条分支0 - 1- 2- 3的遍历，换一条分支，也就是4，4后面因为3已经遍历过了，所以就不访问了

用代码表示则如下：

const visited = new Set()
const dfs = (n) => {
  console.log(n)
  visited.add(n) // 访问过添加记录
  graph[n].forEach(c => {
    if(!visited.has(c)){ // 判断是否访问呢过
      dfs(c)
    }
  })
}

广度优先遍历

先访问离根节点最近的节点，然后进行入队操作，解决思路如下：

新建一个队列，把根节点入队
把队头出队并访问
把队头的没访问过的相邻节点入队
重复二、三步骤，知道队列为空

用代码标识则如下：

const visited = new Set()
const dfs = (n) => {
  visited.add(n)
  const q = [n]
  while(q.length){
    const n = q.shift()
    console.log(n)
    graph[n].forEach(c => {
      if(!visited.has(c)){
        q.push(c)  
        visited.add(c)
      }
    })
  }
}

三、总结

通过上面的初步了解，可以看到图就是由顶点的有穷非空集合和顶点之间的边组成的集合，分成了无向图与有向图

图的表达形式可以分成邻接矩阵和邻接表两种形式，在javascript中，则可以通过二维数组和对象的形式进行表达

图实际是很复杂的，后续还可以延伸出无向图和带权图，对应如下图所示：

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 常见的排序算法有哪些？区别？

一、是什么

排序是程序开发中非常常见的操作，对一组任意的数据元素经过排序操作后，就可以把他们变成一组一定规则排序的有序序列

排序算法属于算法中的一种，而且是覆盖范围极小的一种，彻底掌握排序算法对程序开发是有很大的帮助的

对与排序算法的好坏衡量，主要是从时间复杂度、空间复杂度、稳定性

时间复杂度、空间复杂度前面已经讲过，这里主要看看稳定性的定义

稳定性指的是假定在待排序的记录序列中，存在多个具有相同的关键字的记录，若经过排序，这些记录的相对次序保持不变

即在原序列中，r[i] = r[j]，且 r[i] 在 r[j] 之前，而在排序后的序列中，r[i] 仍在 r[j] 之前，则称这种排序算法是稳定的；否则称为不稳定的

二、有哪些

常见的算法排序算法有：

冒泡排序
选择排序
插入排序
归并排序
快速排序

冒泡排序

一种简单直观的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来

思路如下：

比较相邻的元素，如果第一个比第二个大，就交换它们两个
对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样在最后的元素应该会是最大的数
针对所有的元素重复以上的步骤，除了最后一个
重复上述步骤，直到没有任何一堆数字需要比较

选择排序

选择排序是一种简单直观的排序算法，它也是一种交换排序算法

无论什么数据进去都是 O(n²) 的时间复杂度。所以用到它的时候，数据规模越小越好

唯一的好处是不占用额外的内存存储空间

思路如下：

在未排序序列中找到最小（大）元素，存放到排序序列的起始位置
从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。
重复第二步，直到所有元素均排序完毕

插入排序

插入排序是一种简单直观的排序算法

它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入

解决思路如下：

把待排序的数组分成已排序和未排序两部分，初始的时候把第一个元素认为是已排好序的
从第二个元素开始，在已排好序的子数组中寻找到该元素合适的位置并插入该位置（如果待插入的元素与有序序列中的某个元素相等，则将待插入元素插入到相等元素的后面。）
重复上述过程直到最后一个元素被插入有序子数组中

归并排序

归并排序是建立在归并操作上的一种有效的排序算法

该算法是采用分治法的一个非常典型的应用

将已有序的子序列合并，得到完全有序的序列，即先使每个子序列有序，再使子序列段间有序

解决思路如下：

申请空间，使其大小为两个已经排序序列之和，该空间用来存放合并后的序列
设定两个指针，最初位置分别为两个已经排序序列的起始位置
比较两个指针所指向的元素，选择相对小的元素放入到合并空间，并移动指针到下一位置
重复步骤3直到某一指针到达序列尾
将另一序列剩下的所有元素直接复制到合并序列尾

快速排序

快速排序是对冒泡排序算法的一种改进，基本思想是通过一趟排序将要排序的数据分割成独立的两部分，其中一部分的所有数据比另一部分的所有数据要小

再按这种方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，使整个数据变成有序序列

解决思路如下：

从数列中挑出一个元素，称为”基准”（pivot）
重新排序数列，所有比基准值小的元素摆放在基准前面，所有比基准值大的元素摆在基准后面（相同的数可以到任何一边）。在这个分区结束之后，该基准就处于数列的中间位置。这个称为分区（partition）操作
递归地（recursively）把小于基准值元素的子数列和大于基准值元素的子数列排序

三、区别

除了上述的排序算法之外，还存在其他的排序算法，例如希尔排序、堆排序等等……

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对冒泡排序的理解？如何实现？应用场景？

一、是什么

冒泡排序（Bubble Sort），是一种计算机科学领域的较简单的排序算法

冒泡排序的思想就是在每次遍历一遍未排序的数列之后，将一个数据元素浮上去（也就是排好了一个数据）

如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样，故名“冒泡排序”

假如我们要把 12、35、99、18、76 这 5 个数从大到小进行排序，那么数越大，越需要把它放在前面

思路如下：

从后开始遍历，首先比较 18 和 76，发现 76 比 18 大，就把两个数交换顺序，得到 12、35、99、76、18
接着比较 76 和 99，发现 76 比 99 小，所以不用交换顺序
接着比较 99 和 35，发现 99 比 35 大，交换顺序
接着比较 99 和 12，发现 99 比 12 大，交换顺序

最终第 1 趟排序的结果变成了 99、12、35、76、18，如下图所示：

上述可以看到，经过第一趟的排序，可以得到最大的元素，接下来第二趟排序则对剩下的的4个元素进行排序，如下图所示：

经过第 2 趟排序，结果为 99、76、12、35、18

然后开始第3趟的排序，结果为99、76、35、12、18

然后第四趟排序结果为99、76、35、18、12

经过 4 趟排序之后，只剩一个 12 需要排序了，这时已经没有可比较的元素了，这时排序完成

二、如何实现

如果要实现一个从小到大的排序，算法原理如下：

首先比较相邻的元素，如果第一个元素比第二个元素大，则交换它们
针对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对，这样，最后的元素回事最大的数
针对所有的元素重复以上的步骤，除了最后一个
持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较

用代码表示则如下：

function bubbleSort(arr) {
    const len = arr.length;
    for (let i = 0; i < len - 1; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j+1]) {        // 相邻元素两两对比
                var temp = arr[j+1];        // 元素交换
                arr[j+1] = arr[j];
                arr[j] = temp;
            }
        }
    }
    return arr;
}

可以看到：冒泡排序在每一轮排序中都会使一个元素排到一趟，也就是最终需要 n-1 轮这样的排序

而在每轮排序中都需要对相邻的两个元素进行比较，在最坏的情况下，每次比较之后都需要交换位置，此时时间复杂度为O(n^2)

优化

对冒泡排序常见的改进方法是加入一标志性变量exchange，用于标志某一趟排序过程中是否有数据交换

如果进行某一趟排序时并没有进行数据交换，则说明数据已经按要求排列好，可立即结束排序，避免不必要的比较过程

可以设置一标志性变量pos，用于记录每趟排序中最后一次进行交换的位置，由于pos位置之后的记录均已交换到位，故在进行下一趟排序时只要扫描到pos位置即可，如下：

function bubbleSort1(arr){
 const i=arr.length-1;//初始时,最后位置保持不变  
 while(i>0){
  let pos = 0;//每趟开始时,无记录交换
  for(let j = 0; j < i; j++){
   if(arr[j] > arr[j+1]){
        let tmp = arr[j];
        arr[j] = arr[j+1];
        arr[j+1] = tmp;
    pos = j;//记录最后交换的位置  
   }   
  }
  i = pos;//为下一趟排序作准备
 }
 return arr;
}

在待排序的数列有序的情况下，只需要一轮排序并且不用交换，此时情况最好，时间复杂度为O(n)

并且从上述比较中看到，只有后一个元素比前面的元素大（小）时才会对它们交换位置并向上冒出，对于同样大小的元素，是不需要交换位置的，所以对于同样大小的元素来说，相对位置是不会改变的，因此，冒泡排序是稳定的

三、应用场景

冒泡排的核心部分是双重嵌套循环，
时间复杂度是 O(N 2 )，相比其它排序算法，这是一个相对较高的时间复杂度，一般情况不推荐使用，由于冒泡排序的简洁性，通常被用来对于程序设计入门的学生介绍算法的概念

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对选择排序的理解？如何实现？应用场景？

一、是什么

选择排序（Selection sort）是一种简单直观的排序算法，无论什么数据进去都是 O(n²) 的时间复杂度，所以用到它的时候，数据规模越小越好

其基本思想是：首先在未排序的数列中找到最小(or最大)元素，然后将其存放到数列的起始位置

然后再从剩余未排序的元素中继续寻找最小(or最大)元素，然后放到已排序序列的末尾

以此类推，直到所有元素均排序完毕

举个例子，一个数组为 56、12、80、91、29，其排序过程如下：

第一次遍历时，从下标为 1 的位置即 56 开始，找出关键字值最小的记录 12，同下标为 0 的关键字 56 交换位置。此时数组为 12、56、80、91、20

第二次遍历时，从下标为 2 的位置即 56 开始，找出最小值 20，同下标为 2 的关键字 56 互换位置，此时数组为12、20、80、91、56

第三次遍历时，从下标为 3 的位置即 80 开始，找出最小值 56，同下标为 3 的关键字 80 互换位置，此时数组为 12、20、56、91、80

第四次遍历时，从下标为 4 的位置即 91 开始，找出最小是 80，同下标为 4 的关键字 91 互换位置，此时排序完成，变成有序数组

二、如何实现

从上面可以看到，对于具有 n 个记录的无序表遍历 n-1 次，第 i 次从无序表中第 i 个记录开始，找出后序关键字中最小的记录，然后放置在第 i 的位置上

直至到从第n个和第n-1个元素中选出最小的放在第n-1个位置

如下动画所示：

用代码表示则如下：

function selectionSort(arr) {
    var len = arr.length;
    var minIndex, temp;
    for (var i = 0; i < len - 1; i++) {
        minIndex = i;
        for (var j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {     // 寻找最小的数
                minIndex = j;                 // 将最小数的索引保存
            }
        }
        temp = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;
    }
    return arr;
}

第一次内循环比较N - 1次，然后是N-2次，N-3次，……，最后一次内循环比较1次
共比较的次数是 (N - 1) + (N - 2) + ... + 1，求等差数列和，得 (N - 1 + 1)* N / 2 = N^2 / 2，舍去最高项系数，其时间复杂度为 O(N^2)

从上述也可以看到，选择排序是一种稳定的排序

三、应用场景

和冒泡排序一致，相比其它排序算法，这也是一个相对较高的时间复杂度，一般情况不推荐使用

但是我们还是要掌握冒泡排序的思想及实现，这对于我们的算法思维是有很大帮助的

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对插入排序的理解？如何实现？应用场景？

一、是什么

插入排序（Insertion Sort），一般也被称为直接插入排序。对于少量元素的排序，它是一个有效、简单的算法

其主要的实现思想是将数据按照一定的顺序一个一个的插入到有序的表中，最终得到的序列就是已经排序好的数据

插入排序的工作方式像许多人排序一手扑克牌，开始时，我们的左手为空并且桌子上的牌面向下

然后，我们每次从桌子上拿走一张牌并将它插入左手中正确的位置，该正确位置需要从右到左将它与已在手中的每张牌进行比较

例如一个无序数组 3、1、7、5、2、4、9、6，将其升序的结果则如下：

一开始有序表中无数据，直接插入3

从第二个数开始，插入一个元素1，然后和有序表中记录3比较，1<3，所以插入到记录 3 的左侧

向有序表插入记录 7 时，同有序表中记录 3 进行比较，3<7，所以插入到记录 3 的右侧

向有序表中插入记录 5 时，同有序表中记录 7 进行比较，5<7，同时 5>3，所以插入到 3 和 7 中间

照此规律，依次将无序表中的记录 4，9 和 6插入到有序表中

二、如何实现

将第一待排序序列第一个元素看做一个有序序列，把第二个元素到最后一个元素当成是未排序序列。

从头到尾依次扫描未排序序列，将扫描到的每个元素插入有序序列的适当位置

如果待插入的元素与有序序列中的某个元素相等，则将待插入元素插入到相等元素的后面

用代码表示则如下：

function insertionSort(arr) {
    const len = arr.length;
    let preIndex, current;
    for (let i = 1; i < len; i++) {
        preIndex = i - 1;
        current = arr[i];
        while(preIndex >= 0 && arr[preIndex] > current) {
            arr[preIndex+1] = arr[preIndex];
            preIndex--;
        }
        arr[preIndex+1] = current;
    }
    return arr;
}

在插入排序中，当待排序数组是有序时，是最优的情况，只需当前数跟前一个数比较一下就可以了，这时一共需要比较N- 1次，时间复杂度为O(n)

最坏的情况是待排序数组是逆序的，此时需要比较次数最多，总次数记为：1+2+3+…+N-1，所以，插入排序最坏情况下的时间复杂度为O(n^2)

通过上面了解，可以看到插入排序是一种稳定的排序方式

三、应用场景

插入排序时间复杂度是 O(n2)，适用于数据量不大，算法稳定性要求高，且数据局部或整体有序的数列排序

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对归并排序的理解？如何实现？应用场景？

一、是什么

归并排序（Merge Sort）是建立归并操作上的一种有效，稳定的排序算法，该算法是采用分治法的一个非常典型的应用

将已有序的子序列合并，得到完全有序的序列，即先使每个子序列有序，再使子序列段间有序

例如对于含有 n 个记录的无序表，首先默认表中每个记录各为一个有序表（只不过表的长度都为 1）

然后进行两两合并，使 n 个有序表变为n/2 个长度为 2 或者 1 的有序表（例如 4 个小有序表合并为 2 个大的有序表）

通过不断地进行两两合并，直到得到一个长度为 n 的有序表为止

例如对无序表{49，38，65，97，76，13，27}进行归并排序分成了分、合两部分：

如下图所示：

归并合过程中，每次得到的新的子表本身有序，所以最终得到有序表

上述分成两部分，则称为二路归并，如果分成三个部分则称为三路归并，以此类推

二、如何实现

关于归并排序的算法思路如下：

分：把数组分成两半，再递归对子数组进行分操作，直至到一个个单独数字
合：把两个数合成有序数组，再对有序数组进行合并操作，直到全部子数组合成一个完整的数组
- 合并操作可以新建一个数组，用于存放排序后的数组
- 比较两个有序数组的头部，较小者出队并且推入到上述新建的数组中
- 如果两个数组还有值，则重复上述第二步
- 如果只有一个数组有值，则将该数组的值出队并推入到上述新建的数组中

用代码表示则如下图所示：

function mergeSort(arr) {  // 采用自上而下的递归方法
    const len = arr.length;
    if(len < 2) {
        return arr;
    }
    let middle = Math.floor(len / 2),
        left = arr.slice(0, middle),
        right = arr.slice(middle);
    return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right)
{
    const result = [];

    while (left.length && right.length) {
        if (left[0] <= right[0]) {
            result.push(left.shift());
        } else {
            result.push(right.shift());
        }
    }

    while (left.length)
        result.push(left.shift());

    while (right.length)
        result.push(right.shift());

    return result;
}

上述归并分成了分、合两部分，在处理分过程中递归调用两个分的操作，所花费的时间为2乘T(n/2)，合的操作时间复杂度则为O(n)，因此可以得到以下公式：

总的执行时间 = 2 × 输入长度为n/2的sort函数的执行时间 + merge函数的执行时间O(n)

当只有一个元素时，T(1) = O(1)

如果对T(n) = 2 * T(n/2) + O(n) 进行左右 / n的操作，得到 T(n) / n = (n / 2) * T(n/2) + O(1)

现在令 S(n) = T(n)/n，则S(1) = O(1)，然后利用表达式带入得到S(n) = S(n/2) + O(1)

所以可以得到：S(n) = S(n/2) + O(1) = S(n/4) + O(2) = S(n/8) + O(3) = S(n/2^k) + O(k) = S(1) + O(logn) = O(logn)

综上可得，T(n) = n * log(n) = nlogn

关于归并排序的稳定性，在进行合并过程，在1个或2个元素时，1个元素不会交换，2个元素如果大小相等也不会交换，由此可见归并排序是稳定的排序算法

三、应用场景

在外排序中通常使用排序-归并的策略，外排序是指处理超过内存限度的数据的排序算法，通常将中间结果放在读写较慢的外存储器，如下分成两个阶段：

排序阶段：读入能够放进内存中的数据量，将其排序输出到临时文件，一次进行，将带排序数据组织为多个有序的临时文件
归并阶段：将这些临时文件组合为大的有序文件

例如，使用100m内存对900m的数据进行排序，过程如下：

读入100m数据内存，用常规方式排序
将排序后的数据写入磁盘
重复前两个步骤，得到9个100m的临时文件
将100m的内存划分为10份，将9份为输入缓冲区，第10份为输出缓冲区
进行九路归并排序，将结果输出到缓冲区
- 若输出缓冲区满，将数据写到目标文件，清空缓冲区
- 若缓冲区空，读入相应文件的下一份数据

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对快速排序的理解？如何实现？应用场景？

一、是什么

快速排序（Quick Sort）算法是在冒泡排序的基础上进行改进的一种算法，从名字上看就知道该排序算法的特点是快、效率高，是处理大数据最快的排序算法之一

实现的基本思想是：通过一次排序将整个无序表分成相互独立的两部分，其中一部分中的数据都比另一部分中包含的数据的值小

然后继续沿用此方法分别对两部分进行同样的操作，直到每一个小部分不可再分，所得到的整个序列就变成有序序列

例如，对无序表49，38，65，97，76，13，27，49进行快速排序，大致过程为：

首先从表中选取一个记录的关键字作为分割点（称为“枢轴”或者支点，一般选择第一个关键字），例如选取 49
将表格中大于 49 个放置于 49 的右侧，小于 49 的放置于 49 的左侧，假设完成后的无序表为：{27，38，13，49，65，97，76，49}
以 49 为支点，将整个无序表分割成了两个部分，分别为{27，38，13}和{65，97，76，49}，继续采用此种方法分别对两个子表进行排序
前部分子表以 27 为支点，排序后的子表为{13，27，38}，此部分已经有序；后部分子表以 65 为支点，排序后的子表为{49，65，97，76}
此时前半部分子表中的数据已完成排序；后部分子表继续以 65 为支点，将其分割为{49}和{97，76}，前者不需排序，后者排序后的结果为{76， 97}
通过以上几步的排序，最后由子表{13，27，38}、{49}、{49}、{65}、{76，97}构成有序表：{13，27，38，49，49，65，76，97}

二、如何实现

可以分成以下步骤：

分区：从数组中选择任意一个基准，所有比基准小的元素放在基准的左边，比基准大的元素放到基准的右边
递归：递归地对基准前后的子数组进行分区

用代码表示则如下：

function quickSort (arr) {
  const rec = (arr) => {
    if (arr.length <= 1) { return arr; }
    const left = [];
    const right = [];
    const mid = arr[0]; // 基准元素
    for (let i = 1; i < arr.length; i++){
      if (arr[i] < mid) {
        left.push(arr[i]);
      } else {
        right.push(arr[i]);
      }
    }
    return [...rec(left), mid, ...rec(right)]
  }
  return rec(arr)
};

快速排序是冒泡排序的升级版，最坏情况下每一次基准元素都是数组中最小或者最大的元素，则快速排序就是冒泡排序

这种情况时间复杂度就是冒泡排序的时间复杂度：T[n] = n * (n-1) = n^2 + n，也就是O(n^2)

最好情况下是O(nlogn)，其中递归算法的时间复杂度公式：T[n] = aT[n/b] + f(n)，推导如下所示：

关于上述代码实现的快速排序，可以看到是稳定的

三、应用场景

快速排序时间复杂度为O(nlogn)，是目前基于比较的内部排序中被认为最好的方法，当数据过大且数据杂乱无章时，则适合采用快速排序

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对二分查找的理解？如何实现？应用场景？

一、是什么

在计算机科学中，二分查找算法，也称折半搜索算法，是一种在有序数组中查找某一特定元素的搜索算法

想要应用二分查找法，则这一堆数应有如下特性：

存储在数组中
有序排序

搜索过程从数组的中间元素开始，如果中间元素正好是要查找的元素，则搜索过程结束

如果某一特定元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半中查找，而且跟开始一样从中间元素开始比较

如果在某一步骤数组为空，则代表找不到

这种搜索算法每一次比较都使搜索范围缩小一半

如下图所示：

相比普通的顺序查找，除了数据量很少的情况下，二分查找会比顺序查找更快，区别如下所示：

二、如何实现

基于二分查找的实现，如果数据是有序的，并且不存在重复项，实现代码如下：

function BinarySearch(arr, target) {
    if (arr.length <= 1) return -1
    // 低位下标
    let lowIndex = 0
    // 高位下标
    let highIndex = arr.length - 1

    while (lowIndex <= highIndex) {
        // 中间下标
        const midIndex = Math.floor((lowIndex + highIndex) / 2)
        if (target < arr[midIndex]) {
            highIndex = midIndex - 1
        } else if (target > arr[midIndex]) {
            lowIndex = midIndex + 1
        } else {
            // target === arr[midIndex]
            return midIndex
        }
    }
    return -1
}

如果数组中存在重复项，而我们需要找出第一个制定的值，实现则如下：

function BinarySearchFirst(arr, target) {
    if (arr.length <= 1) return -1
    // 低位下标
    let lowIndex = 0
    // 高位下标
    let highIndex = arr.length - 1

    while (lowIndex <= highIndex) {
        // 中间下标
        const midIndex = Math.floor((lowIndex + highIndex) / 2)
        if (target < arr[midIndex]) {
            highIndex = midIndex - 1
        } else if (target > arr[midIndex]) {
            lowIndex = midIndex + 1
        } else {
            // 当 target 与 arr[midIndex] 相等的时候，如果 midIndex 为0或者前一个数比 target 小那么就找到了第一个等于给定值的元素，直接返回
            if (midIndex === 0 || arr[midIndex - 1] < target) return midIndex
            // 否则高位下标为中间下标减1，继续查找
            highIndex = midIndex - 1
        }
    }
    return -1
}

实际上，除了有序的数组可以使用，还有一种特殊的数组可以应用，那就是轮转后的有序数组

有序数组即一个有序数字以某一个数为轴，将其之前的所有数都轮转到数组的末尾所得

例如，[4, 5, 6, 7, 0, 1, 2]就是一个轮转后的有序数组

该数组的特性是存在一个分界点用来分界两个有序数组，如下：

分界点有如下特性：

分界点元素 >= 第一个元素
分界点元素 < 第一个元素

代码实现如下：

function search (nums, target) {
  // 如果为空或者是空数组的情况
  if (nums == null || !nums.length) {
    return -1;
  }
  // 搜索区间是前闭后闭
  let begin = 0,
    end = nums.length - 1;
  while (begin <= end) {
    // 下面这样写是考虑大数情况下避免溢出
    let mid = begin + ((end - begin) >> 1);
    if (nums[mid] == target) {
      return mid;
    }
    // 如果左边是有序的
    if (nums[begin] <= nums[mid]) {
      //同时target在[ nums[begin],nums[mid] ]中，那么就在这段有序区间查找
      if (nums[begin] <= target && target <= nums[mid]) {
        end = mid - 1;
      } else {
        //否则去反方向查找
        begin = mid + 1;
      }
      //如果右侧是有序的
    } else {
      //同时target在[ nums[mid],nums[end] ]中，那么就在这段有序区间查找
      if (nums[mid] <= target && target <= nums[end]) {
        begin = mid + 1;
      } else {
        end = mid - 1;
      }
    }
  }
  return -1;
};

对比普通的二分查找法，为了确定目标数会落在二分后的哪个部分，我们需要更多的判定条件

三、应用场景

二分查找法的O(logn)让它成为十分高效的算法。不过它的缺陷却也是比较明显，就在它的限定之上：

有序：我们很难保证我们的数组都是有序的
数组：数组读取效率是O(1)，可是它的插入和删除某个元素的效率却是O(n)，并且数组的存储是需要连续的内存空间，不适合大数据的情况

关于二分查找的应用场景，主要如下：

不适合数据量太小的数列；数列太小，直接顺序遍历说不定更快，也更简单
每次元素与元素的比较是比较耗时的，这个比较操作耗时占整个遍历算法时间的大部分，那么使用二分查找就能有效减少元素比较的次数
不适合数据量太大的数列，二分查找作用的数据结构是顺序表，也就是数组，数组是需要连续的内存空间的，系统并不一定有这么大的连续内存空间可以使用

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对分而治之、动态规划的理解？区别？

一、分而治之

分而治之是算法设计中的一种方法，就是把一个复杂的问题分成两个或更多的相同或相似的子问题，直到最后子问题可以简单的直接求解，原问题的解即子问题的解的合并

关于分而治之的实现，都会经历三个步骤：

分解：将原问题分解为若干个规模较小，相对独立，与原问题形式相同的子问题
解决：若子问题规模较小且易于解决时，则直接解。否则，递归地解决各子问题
合并：将各子问题的解合并为原问题的解

实际上，关于分而治之的思想，我们在前面已经使用，例如归并排序的实现，同样经历了实现分而治之的三个步骤：

分解：把数组从中间一分为二
解决：递归地对两个子数组进行归并排序
合并：将两个字数组合并称有序数组

同样关于快速排序的实现，亦如此：

分：选基准，按基准把数组分成两个字数组
解：递归地对两个字数组进行快速排序
合：对两个字数组进行合并

同样二分搜索也能使用分而治之的思想去实现，代码如下：

function binarySearch(arr,l,r,target){
    if(l> r){
        return -1;
    }
    let mid = l + Math.floor((r-l)/2)
    if(arr[mid] === target){
        return mid;
    }else if(arr[mid] < target ){
        return binarySearch(arr,mid + 1,r,target)
    }else{
        return binarySearch(arr,l,mid - 1,target)
    }
}

二、动态规划

动态规划，同样是算法设计中的一种方法，是一种在数学、管理科学、计算机科学、经济学和生物信息学中使用的，通过把原问题分解为相对简单的子问题的方式求解复杂问题的方法

常常适用于有重叠子问题和最优子结构性质的问题

简单来说，动态规划其实就是，给定一个问题，我们把它拆成一个个子问题，直到子问题可以直接解决

然后呢，把子问题答案保存起来，以减少重复计算。再根据子问题答案反推，得出原问题解的一种方法。

一般这些子问题很相似，可以通过函数关系式递推出来，例如斐波那契数列，我们可以得到公式：当 n 大于 2的时候，F(n) = F(n-1) + F(n-2) ，

f(10)= f(9)+f(8),f(9) = f(8) + f(7)…是重叠子问题，当n = 1、2的时候，对应的值为2，这时候就通过可以使用一个数组记录每一步计算的结果，以此类推，减少不必要的重复计算

适用场景

如果一个问题，可以把所有可能的答案穷举出来，并且穷举出来后，发现存在重叠子问题，就可以考虑使用动态规划

比如一些求最值的场景，如最长递增子序列、最小编辑距离、背包问题、凑零钱问题等等，都是动态规划的经典应用场景

关于动态规划题目解决的步骤，一般如下：

描述最优解的结构
递归定义最优解的值
按自底向上的方式计算最优解的值
由计算出的结果构造一个最优解

三、区别

动态规划算法与分治法类似，其基本思想也是将待求解问题分解成若干个子问题，先求解子问题，然后从这些子问题的解得到原问题的解

与分治法不同的是，适合于用动态规划求解的问题，经分解得到子问题往往不是互相独立的，而分而治之的子问题是相互独立的

若用分治法来解这类问题，则分解得到的子问题数目太多，有些子问题被重复计算了很多次

如果我们能够保存已解决的子问题的答案，而在需要时再找出已求得的答案，这样就可以避免大量的重复计算，节省时间

综上，可得：

动态规划：有最优子结构和重叠子问题
分而治之：各子问题独立

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对贪心算法、回溯算法的理解？应用场景？

一、贪心算法

贪心算法，又称贪婪算法，是算法设计中的一种思想

其期待每一个阶段都是局部最优的选择，从而达到全局最优，但是结果并不一定是最优的

举个零钱兑换的例子，如果你有1元、2元、5元的钱币数张，用于兑换一定的金额，但是要求兑换的钱币张数最少

如果现在你要兑换11元，按照贪心算法的思想，先选择面额最大的5元钱币进行兑换，那么就得到11 = 5 + 5 + 1 的选择，这种情况是最优的

但是如果你手上钱币的面额为1、3、4，想要兑换6元，按照贪心算法的思路，我们会 6 = 4 + 1 + 1这样选择，这种情况结果就不是最优的选择

从上面例子可以看到，贪心算法存在一些弊端，使用到贪心算法的场景，都会存在一个特性：

一旦一个问题可以通过贪心法来解决，那么贪心法一般是解决这个问题的最好办法

至于是否选择贪心算法，主要看是否有如下两大特性：

贪心选择：当某一个问题的整体最优解可通过一系列局部的最优解的选择达到，并且每次做出的选择可以依赖以前做出的选择，但不需要依赖后面需要做出的选择
最优子结构：如果一个问题的最优解包含其子问题的最优解，则此问题具备最优子结构的性质。问题的最优子结构性质是该问题是否可以用贪心算法求解的关键所在

二、回溯算法

回溯算法，也是算法设计中的一种思想，是一种渐进式寻找并构建问题解决方式的策略

回溯算法会先从一个可能的工作开始解决问题，如果不行，就回溯并选择另一个动作，知道将问题解决

使用回溯算法的问题，有如下特性：

有很多路，例如一个矩阵的方向或者树的路径
在这些的路里面，有死路也有生路，思路即不符合题目要求的路，生路则符合
通常使用递归来模拟所有的路

常见的伪代码如下：

result = []
function backtrack(路径, 选择列表):
  if 满足结束条件:
    result.add(路径)
  return

  for 选择 of 选择列表:
    做选择
    backtrack(路径, 选择列表)
    撤销选择

重点解决三个问题：

路径：也就是已经做出的选择
选择列表
结束条件

例如经典使用回溯算法为解决全排列的问题，如下：

一个不含重复数字的数组 nums ，我们要返回其所有可能的全排列，解决这个问题的思路是：

用递归模拟所有的情况
遇到包含重复元素的情况则回溯
收集到所有到达递归终点的情况，并返回、

用代码表示则如下：

var permute = function(nums) {
    const res = [], path = [];
    backtracking(nums, nums.length, []);
    return res;
    
    function backtracking(n, k, used) {
        if(path.length === k) {
            res.push(Array.from(path));
            return;
        }
        for (let i = 0; i < k; i++ ) {
            if(used[i]) continue;
            path.push(n[i]);
            used[i] = true; // 同支
            backtracking(n, k, used);
            path.pop();
            used[i] = false;
        }
    }
};

三、总结

前面也初步了解到分而治之、动态规划，现在再了解到贪心算法、回溯算法

其中关于分而治之、动态规划、贪心策略三者的求解思路如下：

其中三者对应的经典问题如下图：

参考文献：

https://github.com/febobo/web-interview

前端面试题大全（异常捕获）

前端面试题类目分类

HTML5 + CSS3
JavaScript
Vue + Vue3
React
Webpack
服务端

考点频率：♥︎ 、 ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎ ♥︎

异常捕获

什么是异常数据？

异常数据，是指前端在操作页面的过程中，触发的执行异常或加载异常，此时浏览器会抛出来报错信息。

比如说你的前端代码用了个未声明的变量，此时控制台会打印出红色错误，告诉你报错原因。或者是接口请求出错了，在网络面板内也能查到异常情况，是请求发送的异常，还是接口响应的异常。

在我们实际的开发场景中，前端捕获的异常主要是分两个大类，接口异常和前端异常，我们分别看下这两大类异常怎么捕获。

接口异常

接口异常一定是在请求的时候触发。前端目前大部分的请求是用 axios 发起的，所以只要获取 axios 可能发生的异常即可。

如果你用 Promise 的写法，则用 .catch 捕获：

axios
  .post('/test')
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    // err 就是捕获到的错误对象
    handleError(err);
  });

如果你用 async/await 的写法，则用 try..catch.. 捕获：

async () => {
  try {
    let res = await axios.post('/test');
    console.log(res);
  } catch (err) {
    // err 就是捕获到的错误对象
    handleError(err);
  }
};

当捕获到异常之后，统一交给 handleError 函数处理，这个函数会将接收到的异常进行处理，并调用上报接口将异常数据传到服务器，从而完成采集。

上面我们写的异常捕获，逻辑上是没问题的，实操起来就会发现第一道坎：页面这么多，难道每个请求都要包一层 catch 吗？

是啊，如果我们是新开发一个项目，在开始的时候就规定每个请求要包一层 catch 也无可厚非，但是如果是在一个已有的规模还不小的项目中接入前端监控，这时候在每个页面或每个请求 catch 显然是不现实的。

所以，为了最大程度地降低接入成本，减少侵入性，我们是用第二种方案：在 axios 拦截器中捕获异常。

前端项目，为了统一处理请求，比如 401 的跳转，或者全局错误提示，都会在全局写一个 axios 实例，为这个实例添加拦截器，然后在其他页面中直接导入这个实例使用，比如：

// 全局请求：src/request/axios.js
const instance = axios.create({
  baseURL: 'https://api.test.com'
  timeout: 15000,
  headers: {
    'Content-Type': 'application/json',
  },
})
export default instance1

然后在具体的页面中这样发起请求：

// a 页面：src/page/a.jsx
import http from '@/src/request/axios.js';
async () => {
  let res = await http.post('/test');
  console.log(res);
};

这样的话，我们发现每个页面的请求都会走全局 axios 实例，所以我们只需要在全局请求的位置捕获异常即可，就不需要在每个页面捕获了，这样接入成本会大大降低。

按照这个方案，接下来我们在 src/request/axios.js 这个文件中动手实施。

拦截器中捕获异常

首先我们为 axios 添加响应拦截器：

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    // 发生异常会走到这里
    if (error.response) {
      let response = error.response;
      if (response.status >= 400) {
        handleError(response);
      }
    } else {
      handleError(null);
    }
    return Promise.reject(error);
  },
);

响应拦截器的第二个参数是在发生错误时执行的函数，参数就是异常。我们首先要判断是否存在 error.response，存在就说明接口有响应，也就是接口通了，但是返回错误；不存在则说明接口没通，请求一直挂起，多数是接口崩溃了。

如果有响应，首先获取状态码，根据状态码来判断什么时候需要收集异常。上面的判断方式简单粗暴，只要状态码大于 400 就视为一个异常，拿到响应数据，并执行上报逻辑。

如果没有响应，可以看作是接口超时异常，调用异常处理函数时传一个 null 即可。

前端异常

上面我们介绍了在 axios 拦截器中如何捕获接口异常，这部分我们再介绍如何捕获前端异常。

前端代码捕获异常，最常用的方式就是用 try..catch.. 了，任意同步代码块都可以放到 try 块中，只要发生异常就会执行 catch：

try {
  // 任意同步代码
} catch (err) {
  console.log(err);
}

上面说“任意同步代码”而不是“任意代码”，主要是普通的 Promise 写法 try..catch.. 是捕获不到的，只能用 .catch() 捕获，如：

try {
  Promise.reject(new Error('出错了')).catch((err) => console.log('1：', err));
} catch (err) {
  console.log('2：', err);
}

把这段代码丢进浏览器，打印结果是：

1： Error: 出错了1.

很明显只是 .catch 捕获到了异常。不过与上面接口异常的逻辑一样，这种方式处理当前页面异常没什么问题，但从整个应用来看，这样捕获异常侵入性强，接入成本高，所以我们的思路依然是全局捕获。

全局捕获 js 的异常也比较简单，用 window.addEventLinstener(‘error’) 即可：

// js 错误捕获
window.addEventListener('error', (error) => {
  // error 就是js的异常
});

为啥不用 window.onerror ？

这里很多小伙伴有疑问，为什么不用 window.onerror 全局监听呢？window.addEventLinstener(‘error’) 和 window.onerror 有什么区别呢？

首先这两个函数功能基本一致，都可以全局捕获 js 异常。但是有一类异常叫做资源加载异常，就是在代码中引用了不存在的图片，js，css 等静态资源导致的异常，比如:

const loadCss = ()=> {
  let link = document.createElement('link')
  link.type = 'text/css'
  link.rel = 'stylesheet'
  link.href = 'https://baidu.com/15.css'
  document.getElementsByTagName('head')[10].append(link)
}
render() {
  return <div>
    <img src='./bbb.png'/>
    <button onClick={loadCss}>加载样式<button/>
  </div>
}

上述代码中的 baidu.com/15.css 和 bbb.png 是不存在的，JS 执行到这里肯定会报一个资源找不到的错误。但是默认情况下，上面两种 window 对象上的全局监听函数都监听不到这类异常。

因为资源加载的异常只会在当前元素触发，异常不会冒泡到 window，因此监听 window 上的异常是捕捉不到的。那怎么办呢？

如果你熟悉 DOM 事件你就会明白，既然冒泡阶段监听不到，那么在捕获阶段一定能监听到。

方法就是给 window.addEventListene 函数指定第三个参数，很简单就是 true，表示该监听函数会在捕获阶段执行，这样就能监听到资源加载异常了。

// 捕获阶段全局监听
window.addEventListene(
  'error',
  (error) => {
    if (error.target != window) {
      console.log(error.target.tagName, error.target.src);
    }
    handleError(error);
  },
  true,
);

上述方式可以很轻松的监听到图片加载异常，这就是为什么更推荐 window.addEventListene 的原因。不过要记得，第三个参数设为 true，监听事件捕获，就可以全局捕获到 JS 异常和资源加载异常。

需要特别注意，window.addEventListene 同样不能捕获 Promise 异常。不管是 Promise.then() 写法还是 async/await 写法，发生异常时都不能捕获。

因此，我们还需要全局监听一个 unhandledrejection 函数来捕获未处理的 Promise 异常。

// promise 错误捕获
window.addEventListener('unhandledrejection', (error) => {
  // 打印异常原因
  console.log(error.reason);
  handleError(error);
  // 阻止控制台打印
  error.preventDefault();
});

unhandledrejection 事件会在 Promise 发生异常并且没有指定 catch 的时候触发，相当于一个全局的 Promise 异常兜底方案。这个函数会捕捉到运行时意外发生的 Promise 异常，这对我们排错非常有用。

默认情况下，Promise 发生异常且未被 catch 时，会在控制台打印异常。如果我们想阻止异常打印，可以用上面的 error.preventDefault() 方法。

异常处理函数

前面我们在捕获到异常时调用了一个异常处理函数 handleError，所有的异常和上报逻辑统一在这个函数内处理，接下来我们实现这个函数。

const handleError = (error: any, type: 1 | 2) {
  if(type == 1) {
    // 处理接口异常
  }
  if(type == 2) {
    // 处理前端异常
  }
}

为了区分异常类型，函数新加了第二个参数 type 表示当前异常属于前端还是接口。在不同的场景中使用如下：

处理前端异常：handleError(error, 1)。
处理接口异常：handleError(error, 2)。

处理接口异常

处理接口异常，我们需要将拿到的 error 参数解析，然后取到需要的数据。接口异常一般需要的数据字段如下：

code：http 状态码。
url：接口请求地址。
method：接口请求方法。
params：接口请求参数。
error：接口报错信息。

这些字段都可以在 error 参数中获取，方法如下：

const handleError = (error: any, type: 1 | 2) {
  if(type == 1) {
    // 此时的 error 响应，它的 config 字段中包含请求信息
    let { url, method, params, data } = error.config
    let err_data = {
       url, method,
       params: { query: params, body: data },
       error: error.data?.message || JSON.stringify(error.data),
    })
  }
}

config 对象中的 params 表示 GET 请求的 query 参数，data 表示 POST 请求的 body 参数，所以我在处理参数的时候，将这两个参数合并为一个，用一个属性 params 来表示。

params: { query: params, body: data }

还有一个 error 属性表示错误信息，这个获取方式要根据你的接口返回格式来拿。要避免获取到接口可能返回的超长错误信息，多半是接口没处理，这样可能会导致写入数据失败，要提前与后台规定好。

处理前端异常

前端异常异常大多数就是 js 异常，异常对应到 js 的 Error 对象，在处理之前，我们先看 Error 有哪几种类型：

ReferenceError：引用错误。
RangeError：超出有效范围。
TypeError：类型错误。
URIError：URI 解析错误。

这几类异常的引用对象都是 Error，因此可以这样获取：

const handleError = (error: any, type: 1 | 2) {
  if(type == 2) {
    let err_data = null
    // 监测 error 是否是标准类型
    if(error instanceof Error) {
      let { name, message } = error
      err_data = {
        type: name,
        error: message
      }
    } else {
      err_data = {
        type: 'other',
        error: JSON.strigify(error)
      }
    }
  }
}

上述判断中，首先判断异常是否是 Error 的实例。事实上绝大部分的代码异常都是标准的 JS Error，但我们这里还是判断一下，如果是的话直接获取异常类型和异常信息，不是的话将异常类型设置为 other 即可。

我们随便写一个异常代码，看一下捕获的结果：

function test() {
  console.aaa('ccc');
}
test();

然后捕获到的异常是这样的：

const handleError = (error: any) => {
  if (error instanceof Error) {
    let { name, message } = error;
    console.log(name, message);
    // 打印结果：TypeError console.aaa is not a function
  }
};

获取环境数据

获取环境数据的意思是，不管是接口异常还是前端异常，除了异常本身的数据之外，我们还需要一些其他信息来帮助我们更快更准的定位到哪里出错了。

这类数据我们称之为 “环境数据”，就是触发异常时所在的环境。比如是谁在哪个页面的哪个地方触发的错误，有了这些，我们就能马上找到错误来源，再根据异常信息解决错误。

环境数据至少包括下面这些：

app：应用的名称/标识。
env：应用环境，一般是开发，测试，生产。
version：应用的版本号。
user_id：触发异常的用户 ID。
user_name：触发异常的用户名。
page_route：异常的页面路由。
page_title：异常的页面名称。

app 和 version 都是应用配置，可以判断异常出现在哪个应用的哪个版本。这两个字段我建议直接获取 package.json 下的 name 和 version 属性，在应用升级的时候，及时修改 version 版本号即可。

Vue和React异常处理

比如Vue 2.x中我们应该这样捕获全局异常：

Vue.config.errorHandler = function (err, vm, info) {
    let { 
        message, // 异常信息
        name, // 异常名称
        script,  // 异常脚本url
        line,  // 异常行号
        column,  // 异常列号
        stack  // 异常堆栈信息
    } = err;

    // vm为抛出异常的 Vue 实例
    // info为 Vue 特定的错误信息，比如错误所在的生命周期钩子
}

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    componentDidCatch(error, info) {
        this.setState({ hasError: true });

        // 将异常信息上报给服务器
        logErrorToMyService(error, info); 
    }

    render() {
        if (this.state.hasError) {
            return '出错了';
        }

        return this.props.children;
    }
}

然后我们就可以这样使用该组件：

参考文献：

https://www.51cto.com/article/711309.html

https://juejin.cn/post/7072179884247744526

前端面试题大全（前端工程化）

前端面试题类目分类

HTML5 + CSS3
JavaScript
Vue + Vue3
React
Webpack
服务端

考点频率：♥︎ 、 ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎ ♥︎

前端工程化

♥︎ ♥︎ ♥︎ 什么是 bundle, 什么是 chunk，什么是module？

简介

bundle、module、chunk 都是 webpack 中的术语，下面就一个一个介绍他们的定义是什么，怎么产生的。

Bundle

Bundle是由多个不同的模块生成，bundles 包含了早已经过加载和编译的最终源文件版本。 Bundle 分离（Bundle Splitting）:这个流程提供了一个优化 build 的方法，允许 webpack 为应用程序生成多个 bundle。最终效果是，当其他某些 bundle 的改动时，彼此独立的另一些 bundle 都可以不受到影响，减少需要重新发布的代码量，因此由客户端重新下载并利用浏览器缓存。

Module

模块（Module）提供比较完整程序接触面（surface area）更小的离散功能块。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。模块解析（Module Resolution）一个模块可以作为另一个模块的依赖模块，resolver 是一个库（libary）用于帮助找不到模块的绝对路径，模块将在resolve.modules中指定的所有目录内搜索。

Chunk

Chunk这是 webpack 特定的术语被用在内部来管理 building 过程。bundle 是由 chunk 组成，其中有几种类型（例如，入口 chunk(entry chunk)和子 chunk(child chunk)）。通常 chunk 会直接对应所输出的 bundle，但是有一些配置并不会产生一对一的关系。代码分离（Code Splitting）指将代码分离到每个 bundles/chunks 里面，你可以按需加载，而不是加载一个包含全部的 bundle。配置（Configuration）webpack 的配置文件是一个普通的 JavaScript 文件，它导出为一个对象。然后由 webpack 根据这个对象定义的属性进行处理。

Bundle VS Chunk VS Module

我们从定义和时期来说：

“模块”(module)的概念大家都比较熟悉，如 CommonJS 模块、AMD、ES6 Modules 模块
chunk 表示打包的时候产生得模块，由他来组成 bundle
打包完成的源代码

我们现在就只创建一个能编译js的webpack配置，步骤如下：

创建一个空文件夹，并且在当文件夹中打开 bash or cmd。
npm init -y 生成package.json。
如果你安装了cnpm or yarn 就执行 cnpm i webpack webpack-cli -D, 安装webpack的包。
创建src，在src内部创建chunk0.js、chunk1.js、common.js、index.js、style.css，并且编写内部代码
在项目根目录创建 webpack.config.js
直接在cmd中运行 webpack

下面是代码

chunk0.js

export default function add(a, b) {
  return a + b;
}

chunk1.js

export default function flow() {
  return "flow";
}

common.js

export default function commonJs() {
  return "commonJs";
}

index.js

import add from "./chunk0.js";
import commonJs from "./common";
console.log(add(1, 2));
console.log(commonJs());

webpack.config.js

module.exports = {
  mode: "production", // 如果不添加就会警告
  entry: {
    index: "./src/index.js", // 一个入口文件
    chunk1: "./src/chunk1.js" // 两一个入口文件
  },
  output: {
    filename: "[name].bundle.js" // 出口文件
  }
};

运行的效果如下

通过上面的代码知道，module 就是没有被编译之前的代码，通过 webpack 的根据文件引用关系生成 chunk 文件，webpack 处理好 chunk 文件后，生成运行在浏览器中的代码 bundle。

♥︎ ♥︎ ♥︎ hash chunkhash contenthash三者区别

一、Webpack与hash算法

在使用Webpack对构建的时候，Webpack会根据所有的文件内容计算出一个特殊的字符串。只要有文件的内容变化了，Webpack就会计算出一个新的特殊字符串。

Webpack在根据文件内容计算出一个特殊字符串的时候，使用的就是hash算法，这个特殊字符串一般叫做hash值。

我们一般取计算出的特殊字符串的前八位作为文件名的一部分，因为hash算法计算出的前八位基本可以保证唯一性了。

在Webpack里，我们通常用[hash:8]这种形式表示取hash值的前八位，例如在Webpack配置文件中，我们用 filename: ‘jQuery-[hash:8].js’。

二、webpack中hash、chunkhash和contenthash的区别

Webpack通过对文件进行hash算法获得的hash值，除了有hash，还有chunkhash和contenthash，那么这三者有什么不同呢？

首先，hash、chunkhash和contenthash这三者都是根据文件内容计算出的hash值，只是它们所计算的文件不一样。

hash是根据打包中所有的文件计算出的hash值。在一次打包中，所有出口文件的filename获得的[hash]都是一样的。

chunkhash是根据打包过程中当前chunk计算出的hash值。如果Webpack配置是多入口配置，那么通常会生成多个chunk，每个chunk对应的出口filename获得的[chunkhash]是不一样的。这样可以保证打包后每一个JS文件名都不一样（这么说不太严谨，但有助于理解）。

Webpack配置文件如下，第一次打包filename取值为’[name]-[hash:8].js’，第二次为’[name]-[chunkhash:8].js’。

const path = require('path');
module.exports = {
    entry: {
        app1: './a.js',
        app2: './b.js',
        app3: './c.js',
},
output: {
path: path.resolve(__dirname, ''),
filename: '[name]-[hash:8].js'
// filename: '[name]-[chunkhash:8].js'
},
mode: 'none'
};

contenthash有点像chunkhash，是根据打包时CSS内容计算出的hash值。一般在使用提取CSS的插件的时候，我们使用contenthash。例如下面的配置，我们生成的CSS文件名可能会是main.3aa2e3c6.css。

plugins:[
new miniExtractPlugin({
        filename: 'main.[contenthash:8].css'
})
]

小结

Webpack中hash、chunkhash和contenthash主要与浏览器缓存行为有关。浏览器在初次请求服务端资源的时候，服务器给JS、CSS和图片等资源一个较长的缓存时间，我们通过给资源名称增加hash值来控制浏览器是否继续使用本地缓存。hash、chunkhash和contenthash这三者都是根据文件内容计算出的hash值，[hash]是根据全部参与打包的文件计算出来的，[chunkhash]是根据当前打包的chunk计算出来的，[contenthash]是CSS文件的。

♥︎ ♥︎ ♥︎ 你知道什么是脚手架吗？

脚手架的概念和作用：就是拥有完整的开发环境，帮助我们快速的生成一套既定的项目架构、文件、配置。使用者只需要专注自己的业务代码即可，不需要使用者单独配置

脚手架的构成：常见的脚手架的开发环境主要分为三种模式：生产模式，开发模式，测试模式。以及需要配置完整的路由系统(vue-router,react-router-dom)，和状态管理系统(vuex,redux)才能保证开发环境的完整性

常见的脚手架：Vue-cli,Creat-React-app,umi-app

♥︎ ♥︎ ♥︎ 你对webpack的理解？解决了什么问题？

一、背景

Webpack 最初的目标是实现前端项目的模块化，旨在更高效地管理和维护项目中的每一个资源

模块化

最早的时候，我们会通过文件划分的形式实现模块化，也就是将每个功能及其相关状态数据各自单独放到不同的 JS 文件中

约定每个文件是一个独立的模块，然后再将这些js文件引入到页面，一个script标签对应一个模块，然后调用模块化的成员

<script src="module-a.js"></script>
<script src="module-b.js"></script>

但这种模块弊端十分的明显，模块都是在全局中工作，大量模块成员污染了环境，模块与模块之间并没有依赖关系、维护困难、没有私有空间等问题

项目一旦变大，上述问题会尤其明显

随后，就出现了命名空间方式，规定每个模块只暴露一个全局对象，然后模块的内容都挂载到这个对象中

window.moduleA = {
  method1: function () {
    console.log('moduleA#method1')
  }
}

这种方式也并没有解决第一种方式的依赖等问题

再后来，我们使用立即执行函数为模块提供私有空间，通过参数的形式作为依赖声明，如下

// module-a.js
(function ($) {
  var name = 'module-a'

  function method1 () {
    console.log(name + '#method1')
    $('body').animate({ margin: '200px' })
  }
    
  window.moduleA = {
    method1: method1
  }
})(jQuery)

上述的方式都是早期解决模块的方式，但是仍然存在一些没有解决的问题。例如，我们是用过script标签在页面引入这些模块的，这些模块的加载并不受代码的控制，时间一久维护起来也十分的麻烦

理想的解决方式是，在页面中引入一个JS入口文件，其余用到的模块可以通过代码控制，按需加载进来

除了模块加载的问题以外，还需要规定模块化的规范，如今流行的则是CommonJS 、ES Modules

二、问题

从后端渲染的JSP、PHP，到前端原生JavaScript，再到jQuery开发，再到目前的三大框架Vue、React、Angular

开发方式，也从javascript到后面的es5、es6、7、8、9、10，再到typescript，包括编写CSS的预处理器less、scss等

现代前端开发已经变得十分的复杂，所以我们开发过程中会遇到如下的问题：

需要通过模块化的方式来开发
使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码
监听文件的变化来并且反映到浏览器上，提高开发的效率
JavaScript 代码需要模块化，HTML 和 CSS 这些资源文件也会面临需要被模块化的问题
开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化

而webpack恰巧可以解决以上问题

三、是什么

webpack 是一个用于现代JavaScript应用程序的静态模块打包工具

静态模块

这里的静态模块指的是开发阶段，可以被 webpack 直接引用的资源（可以直接被获取打包进bundle.js的资源）

当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块（不再局限js文件），并生成一个或多个 bundle

`webpack`的能力：

编译代码能力，提高效率，解决浏览器兼容问题

模块整合能力，提高性能，可维护性，解决浏览器频繁请求文件的问题

万物皆可模块能力，项目维护性增强，支持不同种类的前端模块类型，统一的模块化方案，所有资源文件的加载都可以通过代码控制

♥︎ ♥︎ ♥︎ webpack的核心思想是什么

万物皆模块：在webpacck的世界中，其他任何资源都可以当做模块的方式引入

代码分割：webapp 的优化关键在于代码体积，当应用体积增大，实现代码的按需加载是刚需，这也是 webpack 出现的根本原因

可定制化：任何一个工具都不可能解决所有问题，提供解决方案才是最可行的，webpack基于可定制化的理念构建，通过插件系统，配置文件，可实现大型项目的定制需求

♥︎ ♥︎ ♥︎ 说说webpack的构建流程?

一、运行流程

webpack 的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来

在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条webpack机制中，去改变webpack的运作，使得整个系统扩展性良好

从启动到结束会依次执行以下三大步骤：

初始化流程：从配置文件和 Shell 语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数
编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理
输出流程：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统

初始化流程

从配置文件和 Shell 语句中读取与合并参数，得出最终的参数

配置文件默认下为webpack.config.js，也或者通过命令的形式指定配置文件，主要作用是用于激活webpack的加载项和插件

关于文件配置内容分析，如下注释：

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

module.exports = {
  // 入口文件，是模块构建的起点，同时每一个入口文件对应最后生成的一个 chunk。
  entry: './path/to/my/entry/file.js'，
  // 文件路径指向(可加快打包过程)。
  resolve: {
    alias: {
      'react': pathToReact
    }
  },
  // 生成文件，是模块构建的终点，包括输出文件与输出路径。
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js'
  },
  // 这里配置了处理各模块的 loader ，包括 css 预处理 loader ，es6 编译 loader，图片处理 loader。
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ],
    noParse: [pathToReact]
  },
  // webpack 各插件对象，在 webpack 的事件流中执行对应的方法。
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};
webpack` 将 `webpack.config.js` 中的各个配置项拷贝到 `options` 对象中，并加载用户配置的 `plugins

完成上述步骤之后，则开始初始化Compiler编译对象，该对象掌控者webpack声明周期，不执行具体的任务，只是进行一些调度工作

class Compiler extends Tapable {
    constructor(context) {
        super();
        this.hooks = {
            beforeCompile: new AsyncSeriesHook(["params"]),
            compile: new SyncHook(["params"]),
            afterCompile: new AsyncSeriesHook(["compilation"]),
            make: new AsyncParallelHook(["compilation"]),
            entryOption: new SyncBailHook(["context", "entry"])
            // 定义了很多不同类型的钩子
        };
        // ...
    }
}

function webpack(options) {
  var compiler = new Compiler();
  ...// 检查options,若watch字段为true,则开启watch线程
  return compiler;
}
...

Compiler 对象继承自 Tapable，初始化时定义了很多钩子函数

编译构建流程

根据配置中的 entry 找出所有的入口文件

module.exports = {
  entry: './src/file.js'
}

初始化完成后会调用Compiler的run来真正启动webpack编译构建流程，主要流程如下：

compile 开始编译
make 从入口点分析模块及其依赖的模块，创建这些模块对象
build-module 构建模块
seal 封装构建结果
emit 把各个chunk输出到结果文件

compile 编译

执行了run方法后，首先会触发compile，主要是构建一个Compilation对象

该对象是编译阶段的主要执行者，主要会依次下述流程：执行模块创建、依赖收集、分块、打包等主要任务的对象

make 编译模块

当完成了上述的compilation对象后，就开始从Entry入口文件开始读取，主要执行_addModuleChain()函数，如下：

_addModuleChain(context, dependency, onModule, callback) {
   ...
   // 根据依赖查找对应的工厂函数
   const Dep = /** @type {DepConstructor} */ (dependency.constructor);
   const moduleFactory = this.dependencyFactories.get(Dep);
   
   // 调用工厂函数NormalModuleFactory的create来生成一个空的NormalModule对象
   moduleFactory.create({
       dependencies: [dependency]
       ...
   }, (err, module) => {
       ...
       const afterBuild = () => {
        this.processModuleDependencies(module, err => {
         if (err) return callback(err);
         callback(null, module);
           });
    };
       
       this.buildModule(module, false, null, null, err => {
           ...
           afterBuild();
       })
   })
}

过程如下：

_addModuleChain中接收参数dependency传入的入口依赖，使用对应的工厂函数NormalModuleFactory.create方法生成一个空的module对象

回调中会把此module存入compilation.modules对象和dependencies.module对象中，由于是入口文件，也会存入compilation.entries中

随后执行buildModule进入真正的构建模块module内容的过程

build module 完成模块编译

这里主要调用配置的loaders，将我们的模块转成标准的JS模块

在用 Loader 对一个模块转换完后，使用 acorn 解析转换后的内容，输出对应的抽象语法树（AST），以方便 Webpack 后面对代码的分析

从配置的入口模块开始，分析其 AST，当遇到require等导入其它模块语句时，便将其加入到依赖的模块列表，同时对新找出的依赖模块递归分析，最终搞清所有模块的依赖关系

输出流程

seal 输出资源

seal方法主要是要生成chunks，对chunks进行一系列的优化操作，并生成要输出的代码

webpack 中的 chunk ，可以理解为配置在 entry 中的模块，或者是动态引入的模块

根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表

emit 输出完成

在确定好输出内容后，根据配置确定输出的路径和文件名

output: {
    path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
}

在 Compiler 开始生成文件前，钩子 emit 会被执行，这是我们修改最终文件的最后一个机会

从而webpack整个打包过程则结束了

小结

♥︎ ♥︎ ♥︎ Loader和Plugin的区别

loader是一个转换器

1、用于对模块源码文件的预编译和转换，，loader描述了webpack如何处理非javascript模块。

2、没有loader，构建的打包过程无法顺利完成

3、loader作用在打包前

4、将A文件转换为B文件，操作的是文件，比如将A.scss转换为A.css，是单纯的文件转换过程

Plugin是插件扩展器

1、plugin构建过程更完整的补充和优化，如使用new UglifyJsPlugin(),new CssMinimizerPlugin()压缩js和css

2、没有plugin，文件的打包过程可以完成

3、plugin作用于整个打包过程，

4、针对webpack的打包过程，他不直接操作文件，而是基于事件机制工作，会监听webpack打包过程的事件钩子，执行任务，通过事件钩子拦截webpack的执行。

♥︎ ♥︎ ♥︎ 有哪些常见的Loader

一、是什么

loader 用于对模块的”源代码”进行转换，在 import 或”加载”模块时预处理文件

webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。如下图所示：

在webpack内部中，任何文件都是模块，不仅仅只是js文件

默认情况下，在遇到import或者load加载模块的时候，webpack只支持对js文件打包

像css、sass、png等这些类型的文件的时候，webpack则无能为力，这时候就需要配置对应的loader进行文件内容的解析

在加载模块的时候，执行顺序如下：

当 webpack 碰到不识别的模块的时候，webpack 会在配置的中查找该文件解析规则

关于配置loader的方式有三种：

配置方式（推荐）：在 webpack.config.js文件中指定 loader
内联方式：在每个 import 语句中显式指定 loader
CLI 方式：在 shell 命令中指定它们

配置方式

关于loader的配置，我们是写在module.rules属性中，属性介绍如下：

rules是一个数组的形式，因此我们可以配置很多个loader
每一个loader对应一个对象的形式，对象属性test 为匹配的规则，一般情况为正则表达式
属性use针对匹配到文件类型，调用对应的 loader 进行处理

代码编写，如下形式：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};

二、特性

这里继续拿上述代码，来讲讲loader的特性

从上述代码可以看到，在处理css模块的时候，use属性中配置了三个loader分别处理css文件

因为loader 支持链式调用，链中的每个loader会处理之前已处理过的资源，最终变为js代码。顺序为相反的顺序执行，即上述执行方式为sass-loader、css-loader、style-loader

除此之外，loader的特性还有如下：

loader 可以是同步的，也可以是异步的
loader 运行在 Node.js 中，并且能够执行任何操作
除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块
插件(plugin)可以为 loader 带来更多特性
loader 能够产生额外的任意文件

可以通过 loader 的预处理函数，为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言翻译和更多其他特性

三、常见的loader

在页面开发过程中，我们经常性加载除了js文件以外的内容，这时候我们就需要配置响应的loader进行加载

常见的loader如下：

style-loader: 将css添加到DOM的内联样式标签style里
css-loader :允许将css文件通过require的方式引入，并返回css代码
less-loader: 处理less
sass-loader: 处理sass
postcss-loader: 用postcss来处理CSS
autoprefixer-loader: 处理CSS3属性前缀，已被弃用，建议直接使用postcss
file-loader: 分发文件到output目录并返回相对路径
url-loader: 和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url
html-minify-loader: 压缩HTML
babel-loader :用babel来转换ES6文件到ES

下面给出一些常见的loader的使用：

css-loader

分析 css 模块之间的关系，并合成⼀个 css

npm install --save-dev css-loader
rules: [
  ...,
 {
  test: /\.css$/,
    use: {
      loader: "css-loader",
      options: {
     // 启用/禁用 url() 处理
     url: true,
     // 启用/禁用 @import 处理
     import: true,
        // 启用/禁用 Sourcemap
        sourceMap: false
      }
    }
 }
]

如果只通过css-loader加载文件，这时候页面代码设置的样式并没有生效

原因在于，css-loader只是负责将.css文件进行一个解析，而并不会将解析后的css插入到页面中

如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader

style-loader

把 css-loader 生成的内容，用 style 标签挂载到页面的 head 中

npm install --save-dev style-loader
rules: [
  ...,
 {
  test: /\.css$/,
    use: ["style-loader", "css-loader"]
 }
]

同一个任务的 loader 可以同时挂载多个，处理顺序为：从右到左，从下往上

less-loader

开发中，我们也常常会使用less、sass、stylus预处理器编写css样式，使开发效率提高，这里需要使用less-loader

npm install less-loader -D
rules: [
  ...,
 {
  test: /\.css$/,
    use: ["style-loader", "css-loader","less-loader"]
 }
]

raw-loader

在 webpack 中通过 import 方式导入文件内容，该loader 并不是内置的，所以首先要安装

npm install --save-dev raw-loader

然后在 webpack.config.js 中进行配置

module.exports = {  
...,  
module: {      
rules: [      
{        
test: /\.(txt|md)$/,  
use: 'raw-loader'   
}   
] }}

file-loader

把识别出的资源模块，移动到指定的输出⽬目录，并且返回这个资源在输出目录的地址(字符串)

npm install --save-dev file-loader
rules: [  ..., {  
test: /\.(png|jpe?g|gif)$/,    
use: {      
loader: "file-loader",  
options: {       
// placeholder 占位符 [name] 源资源模块的名称        
// [ext] 源资源模块的后缀       
name: "[name]_[hash].[ext]",        //打包后的存放位置        
outputPath: "./images",        // 打包后文件的 url        
publicPath: './images',      }    } }]

url-loader

可以处理理 file-loader 所有的事情，但是遇到图片格式的模块，可以选择性的把图片转成 base64 格式的字符串，并打包到 js 中，对小体积的图片比较合适，大图片不合适。

npm install --save-dev url-loader
rules: [  ..., {  
        test: /\.(png|jpe?g|gif)$/,    
        use: {     
        loader: "url-loader",      
        options: {        
        // placeholder 占位符 [name] 源资源模块的名称        
        // [ext] 源资源模块的后缀        
        name: "[name]_[hash].[ext]",        //打包后的存放位置        
        outputPath: "./images"        // 打包后文件的 url        
        publicPath: './images',        // 小于 100 字节转成 base64 格式        limit: 100      }    } }]

♥︎ ♥︎ ♥︎ 有哪些常见的Plugin

一、是什么

Plugin（Plug-in）是一种计算机应用程序，它和主应用程序互相交互，以提供特定的功能

是一种遵循一定规范的应用程序接口编写出来的程序，只能运行在程序规定的系统下，因为其需要调用原纯净系统提供的函数库或者数据

webpack中的plugin也是如此，plugin赋予其各种灵活的功能，例如打包优化、资源管理、环境变量注入等，它们会运行在 webpack 的不同阶段（钩子 / 生命周期），贯穿了webpack整个编译周期

目的在于解决loader 无法实现的其他事

配置方式

这里讲述文件的配置方式，一般情况，通过配置文件导出对象中plugins属性传入new实例对象。如下所示：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 访问内置的插件
module.exports = {
  ...
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

二、特性

其本质是一个具有apply方法javascript对象

apply 方法会被 webpack compiler 调用，并且在整个编译生命周期都可以访问 compiler 对象

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log('webpack 构建过程开始！');
    });
  }
}

module.exports = ConsoleLogOnBuildWebpackPlugin;

compiler hook 的 tap 方法的第一个参数，应是驼峰式命名的插件名称

关于整个编译生命周期钩子，有如下：

entry-option ：初始化 option
run
compile：真正开始的编译，在创建 compilation 对象之前
compilation ：生成好了 compilation 对象
make 从 entry 开始递归分析依赖，准备对每个模块进行 build
after-compile：编译 build 过程结束
emit ：在将内存中 assets 内容写到磁盘文件夹之前
after-emit ：在将内存中 assets 内容写到磁盘文件夹之后
done：完成所有的编译过程
failed：编译失败的时候

三、常见的Plugin

常见的plugin有如图所示：

下面介绍几个常用的插件用法：

HtmlWebpackPlugin

在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的 js 模块引⼊到该 html 中

npm install --save-dev html-webpack-plugin
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
 ...
  plugins: [
     new HtmlWebpackPlugin({
       title: "My App",
       filename: "app.html",
       template: "./src/html/index.html"
     }) 
  ]
};
<!--./src/html/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
    <h1>html-webpack-plugin</h1>
</body>
</html>

在 html 模板中，可以通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置的值

更多的配置可以自寻查找

clean-webpack-plugin

删除（清理）构建目录

npm install --save-dev clean-webpack-plugin
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
 ...
  plugins: [
    ...,
    new CleanWebpackPlugin(),
    ...
  ]
}

mini-css-extract-plugin

提取 CSS 到一个单独的文件中

npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = { ...,  
                  module: {   
                  rules: [    
                  {     test: /\.s[ac]ss$/,     
                  use: [     
                  {      loader: MiniCssExtractPlugin.loader     },          
  'css-loader',          'sass-loader'        ]   }   ] },  
    plugins: [    ...,    
              new MiniCssExtractPlugin({     filename: '[name].css'    }),    ...  ]}

DefinePlugin

允许在编译时创建配置的全局对象，是一个webpack内置的插件，不需要安装

const { DefinePlugun } = require('webpack')module.exports = { ...    plugins:[        new DefinePlugin({            BASE_URL:'"./"'        })    ]}

这时候编译template模块的时候，就能通过下述形式获取全局对象

<link rel="icon" href="<%= BASE_URL%>favicon.ico>"

copy-webpack-plugin

复制文件或目录到执行区域，如vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中

npm install copy-webpack-plugin -D
new CopyWebpackPlugin({    parrerns:[        {            
  from:"public",            
  globOptions:{                i
               gnore:[                    '**/index.html'                ]            }        }    ]})

复制的规则在patterns属性中设置：

from：设置从哪一个源中开始复制
to：复制到的位置，可以省略，会默认复制到打包的目录下
globOptions：设置一些额外的选项，其中可以编写需要忽略的文件

♥︎ ♥︎ ♥︎ 说一下 Webpack 的热更新原理

一、是什么

HMR 全称 Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用

例如，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会丢失

如果使用的是 HMR，就可以实现只将修改的模块实时替换至应用中，不必完全刷新整个应用

在webpack中配置开启热模块也非常的简单，如下代码：

const webpack = require('webpack')
module.exports = {
  // ...
  devServer: {
    // 开启 HMR 特性
    hot: true
    // hotOnly: true
  }
}

通过上述这种配置，如果我们修改并保存css文件，确实能够以不刷新的形式更新到页面中

但是，当我们修改并保存js文件之后，页面依旧自动刷新了，这里并没有触发热模块

所以，HMR 并不像 Webpack 的其他特性一样可以开箱即用，需要有一些额外的操作

我们需要去指定哪些模块发生更新时进行HRM，如下代码：

if(module.hot){
    module.hot.accept('./util.js',()=>{
        console.log("util.js更新了")
    })
}

二、实现原理

首先来看看一张图，如下：

Webpack Compile：将 JS 源代码编译成 bundle.js
HMR Server：用来将热更新的文件输出给 HMR Runtime
Bundle Server：静态资源文件服务器，提供文件访问路径
HMR Runtime：socket服务器，会被注入到浏览器，更新文件的变化
bundle.js：构建输出的文件
在HMR Runtime 和 HMR Server之间建立 websocket，即图上4号线，用于实时更新文件变化

上面图中，可以分成两个阶段：

启动阶段为上图 1 - 2 - A - B

在编写未经过webpack打包的源代码后，Webpack Compile 将源代码和 HMR Runtime 一起编译成 bundle 文件，传输给 Bundle Server 静态资源服务器

更新阶段为上图 1 - 2 - 3 - 4

当某一个文件或者模块发生变化时，webpack 监听到文件变化对文件重新编译打包，编译生成唯一的hash值，这个hash 值用来作为下一次热更新的标识

根据变化的内容生成两个补丁文件：manifest（包含了 hash 和 chundId ，用来说明变化的内容）和 chunk.js 模块

由于socket服务器在HMR Runtime 和 HMR Server之间建立 websocket链接，当文件发生改动的时候，服务端会向浏览器推送一条消息，消息包含文件改动后生成的hash值，如下图的h属性，作为下一次热更细的标识

在浏览器接受到这条消息之前，浏览器已经在上一次 socket 消息中已经记住了此时的 hash 标识，这时候我们会创建一个 ajax 去服务端请求获取到变化内容的 manifest 文件

mainfest文件包含重新build生成的hash值，以及变化的模块，对应上图的c属性

浏览器根据 manifest 文件获取模块变化的内容，从而触发render流程，实现局部模块更新

三、总结

关于webpack热模块更新的总结如下：

通过webpack-dev-server创建两个服务器：提供静态资源的服务（express）和Socket服务
express server 负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）
socket server 是一个 websocket 的长连接，双方可以通信
当 socket server 监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk）
通过长连接，socket server 可以直接将这两个文件主动发送给客户端（浏览器）
浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新

♥︎ ♥︎ ♥︎ 如何优化 Webpack 的构建速度

一、背景

随着我们的项目涉及到页面越来越多，功能和业务代码也会随着越多，相应的 webpack 的构建时间也会越来越久

构建时间与我们日常开发效率密切相关，当我们本地开发启动 devServer 或者 build 的时候，如果时间过长，会大大降低我们的工作效率

所以，优化webpack 构建速度是十分重要的环节

二、如何优化

常见的提升构建速度的手段有如下：

优化 loader 配置
合理使用 resolve.extensions
优化 resolve.modules
优化 resolve.alias
使用 DLLPlugin 插件
使用 cache-loader
terser 启动多线程
合理使用 sourceMap

优化loader配置

在使用loader时，可以通过配置include、exclude、test属性来匹配文件，接触include、exclude规定哪些匹配应用loader

如采用 ES6 的项目为例，在配置 babel-loader 时，可以这样：

module.exports = {
  module: {
    rules: [
      {
        // 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/，提升正则表达式性能
        test: /\.js$/,
        // babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启
        use: ['babel-loader?cacheDirectory'],
        // 只对项目根目录下的 src 目录中的文件采用 babel-loader
        include: path.resolve(__dirname, 'src'),
      },
    ]
  },
};

合理使用 resolve.extensions

在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库， resolve可以帮助webpack从每个 require/import 语句中，找到需要引入到合适的模块代码

通过resolve.extensions是解析到文件时自动添加拓展名，默认情况如下：

module.exports = {
    ...
    extensions:[".warm",".mjs",".js",".json"]
}

当我们引入文件的时候，若没有文件后缀名，则会根据数组内的值依次查找

当我们配置的时候，则不要随便把所有后缀都写在里面，这会调用多次文件的查找，这样就会减慢打包速度

优化 resolve.modules

resolve.modules 用于配置 webpack 去哪些目录下寻找第三方模块。默认值为['node_modules']，所以默认会从node_modules中查找文件
当安装的第三方模块都放在项目根目录下的 ./node_modules 目录下时，所以可以指明存放第三方模块的绝对路径，以减少寻找，配置如下：

module.exports = {
  resolve: {
    // 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
    // 其中 __dirname 表示当前工作目录，也就是项目根目录
    modules: [path.resolve(__dirname, 'node_modules')]
  },
};

优化 resolve.alias

alias给一些常用的路径起一个别名，特别当我们的项目目录结构比较深的时候，一个文件的路径可能是./../../的形式

通过配置alias以减少查找过程

module.exports = {
    ...
    resolve:{
        alias:{
            "@":path.resolve(__dirname,'./src')
        }
    }
}

使用 DLLPlugin 插件

DLL全称是动态链接库，是为软件在winodw种实现共享函数库的一种实现方式，而Webpack也内置了DLL的功能，为的就是可以共享，不经常改变的代码，抽成一个共享的库。这个库在之后的编译过程中，会被引入到其他项目的代码中

使用步骤分成两部分：

打包一个 DLL 库
引入 DLL 库

打包一个 DLL 库

webpack内置了一个DllPlugin可以帮助我们打包一个DLL的库文件

module.exports = {
    ...
    plugins:[
        new webpack.DllPlugin({
            name:'dll_[name]',
            path:path.resolve(__dirname,"./dll/[name].mainfest.json")
        })
    ]
}

引入 DLL 库

使用 webpack 自带的 DllReferencePlugin 插件对 mainfest.json 映射文件进行分析，获取要使用的DLL库

然后再通过AddAssetHtmlPlugin插件，将我们打包的DLL库引入到Html模块中

module.exports = {
    ...
    new webpack.DllReferencePlugin({
        context:path.resolve(__dirname,"./dll/dll_react.js"),
        mainfest:path.resolve(__dirname,"./dll/react.mainfest.json")
    }),
    new AddAssetHtmlPlugin({
        outputPath:"./auto",
        filepath:path.resolve(__dirname,"./dll/dll_react.js")
    })
}

使用 cache-loader

在一些性能开销较大的 loader 之前添加 cache-loader，以将结果缓存到磁盘里，显著提升二次构建速度

保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的 loader 使用此 loader

module.exports = {
    module: {
        rules: [
            {
                test: /\.ext$/,
                use: ['cache-loader', ...loaders],
                include: path.resolve('src'),
            },
        ],
    },
};

terser 启动多线程

使用多进程并行运行来提高构建速度

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
      }),
    ],
  },
};

合理使用 sourceMap

打包生成 sourceMap 的时候，如果信息越详细，打包速度就会越慢。对应属性取值如下所示：

三、总结

可以看到，优化webpack构建的方式有很多，主要可以从优化搜索时间、缩小文件搜索范围、减少不必要的编译等方面入手

♥︎ ♥︎ ♥︎ 自己写过Loader和Plugin么

一、编写loader

在编写 loader 前，我们首先需要了解 loader 的本质

其本质为函数，函数中的 this 作为上下文会被 webpack 填充，因此我们不能将 loader设为一个箭头函数

函数接受一个参数，为 webpack 传递给 loader 的文件源内容

函数中 this 是由 webpack 提供的对象，能够获取当前 loader 所需要的各种信息

函数中有异步操作或同步操作，异步操作通过 this.callback 返回，返回值要求为 string 或者 Buffer

代码如下所示：

// 导出一个函数，source为webpack传递给loader的文件源内容
module.exports = function(source) {
    const content = doSomeThing2JsString(source);
    
    // 如果 loader 配置了 options 对象，那么this.query将指向 options
    const options = this.query;
    
    // 可以用作解析其他模块路径的上下文
    console.log('this.context');
    
    /*
     * this.callback 参数：
     * error：Error | null，当 loader 出错时向外抛出一个 error
     * content：String | Buffer，经过 loader 编译后需要导出的内容
     * sourceMap：为方便调试生成的编译后内容的 source map
     * ast：本次编译生成的 AST 静态语法树，之后执行的 loader 可以直接使用这个 AST，进而省去重复生成 AST 的过程
     */
    this.callback(null, content); // 异步
    return content; // 同步
}

一般在编写loader的过程中，保持功能单一，避免做多种功能

如less文件转换成 css 文件也不是一步到位，而是 less-loader、css-loader、style-loader几个 loader 的链式调用才能完成转换

二、编写plugin

由于webpack基于发布订阅模式，在运行的生命周期中会广播出许多事件，插件通过监听这些事件，就可以在特定的阶段执行自己的插件任务

在之前也了解过，webpack编译会创建两个核心对象：

compiler：包含了 webpack 环境的所有的配置信息，包括 options，loader 和 plugin，和 webpack 整个生命周期相关的钩子
compilation：作为 plugin 内置事件回调函数的参数，包含了当前的模块资源、编译生成资源、变化的文件以及被跟踪依赖的状态信息。当检测到一个文件变化，一次新的 Compilation 将被创建

如果自己要实现plugin，也需要遵循一定的规范：

插件必须是一个函数或者是一个包含 apply 方法的对象，这样才能访问compiler实例
传给每个插件的 compiler 和 compilation 对象都是同一个引用，因此不建议修改
异步的事件需要在插件处理完任务时调用回调函数通知 Webpack 进入下一个流程，不然会卡住

实现plugin的模板如下：

class MyPlugin {
    // Webpack 会调用 MyPlugin 实例的 apply 方法给插件实例传入 compiler 对象
  apply (compiler) {
    // 找到合适的事件钩子，实现自己的插件功能
    compiler.hooks.emit.tap('MyPlugin', compilation => {
        // compilation: 当前打包构建流程的上下文
        console.log(compilation);
        
        // do something...
    })
  }
}

在 emit 事件发生时，代表源文件的转换和组装已经完成，可以读取到最终将输出的资源、代码块、模块及其依赖，并且可以修改输出资源的内容

三、手写一个loader和plugin

手写一个loader和plugin

♥︎ ♥︎ ♥︎ webpack proxy工作原理？为什么能解决跨域?

一、是什么

webpack proxy，即webpack提供的代理服务

基本行为就是接收客户端发送的请求后转发给其他服务器

其目的是为了便于开发者在开发模式下解决跨域问题（浏览器安全策略限制）

想要实现代理首先需要一个中间服务器，webpack中提供服务器的工具为webpack-dev-server

webpack-dev-server

webpack-dev-server是 webpack 官方推出的一款开发工具，将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起

目的是为了提高开发者日常的开发效率，只适用在开发阶段

关于配置方面，在webpack配置对象属性中通过devServer属性提供，如下：

// ./webpack.config.js
const path = require('path')

module.exports = {
    // ...
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        proxy: {
            '/api': {
                target: 'https://api.github.com'
            }
        }
        // ...
    }
}

devServetr里面proxy则是关于代理的配置，该属性为对象的形式，对象中每一个属性就是一个代理的规则匹配

属性的名称是需要被代理的请求路径前缀，一般为了辨别都会设置前缀为 /api，值为对应的代理匹配规则，对应如下：

target：表示的是代理到的目标地址
pathRewrite：默认情况下，我们的 /api-hy 也会被写入到URL中，如果希望删除，可以使用pathRewrite
secure：默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false
changeOrigin：它表示是否更新代理后请求的 headers 中host地址

二、工作原理

proxy工作原理实质上是利用http-proxy-middleware 这个http代理中间件，实现请求转发给其他服务器

举个例子：

在开发阶段，本地地址为http://localhost:3000，该浏览器发送一个前缀带有/api标识的请求到服务端获取数据，但响应这个请求的服务器只是将请求转发到另一台服务器中

const express = require('express');
const proxy = require('http-proxy-middleware');

const app = express();

app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

三、跨域

在开发阶段， webpack-dev-server 会启动一个本地开发服务器，所以我们的应用在开发阶段是独立运行在 localhost 的一个端口上，而后端服务又是运行在另外一个地址上

所以在开发阶段中，由于浏览器同源策略的原因，当本地访问后端就会出现跨域请求的问题

通过设置webpack proxy实现代理请求后，相当于浏览器与服务端中添加一个代理者

当本地发送请求的时候，代理服务器响应该请求，并将请求转发到目标服务器，目标服务器响应数据后再将数据返回给代理服务器，最终再由代理服务器将数据响应给本地

在代理服务器传递数据给本地浏览器的过程中，两者同源，并不存在跨域行为，这时候浏览器就能正常接收数据

注意：服务器与服务器之间请求数据并不会存在跨域行为，跨域行为是浏览器安全策略限制

♥︎ ♥︎ ♥︎ 如何借助webpack来优化前端性能？

一、背景

随着前端的项目逐渐扩大，必然会带来的一个问题就是性能

尤其在大型复杂的项目中，前端业务可能因为一个小小的数据依赖，导致整个页面卡顿甚至奔溃

一般项目在完成后，会通过webpack进行打包，利用webpack对前端项目性能优化是一个十分重要的环节

二、如何优化

通过webpack优化前端的手段有：

JS代码压缩
CSS代码压缩
Html文件代码压缩
文件大小压缩
图片压缩
Tree Shaking
代码分离
内联 chunk

JS代码压缩

terser是一个JavaScript的解释、绞肉机、压缩机的工具集，可以帮助我们压缩、丑化我们的代码，让bundle更小

在production模式下，webpack 默认就是使用 TerserPlugin 来处理我们的代码的。如果想要自定义配置它，配置方法如下：

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
    ...
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                parallel: true // 电脑cpu核数-1
            })
        ]
    }
}

属性介绍如下：

extractComments：默认值为true，表示会将注释抽取到一个单独的文件中，开发阶段，我们可设置为 false ，不保留注释
parallel：使用多进程并发运行提高构建的速度，默认值是true，并发运行的默认数量： os.cpus().length - 1
terserOptions：设置我们的terser相关的配置：
- compress：设置压缩相关的选项，mangle：设置丑化相关的选项，可以直接设置为true
- mangle：设置丑化相关的选项，可以直接设置为true
- toplevel：底层变量是否进行转换
- keep_classnames：保留类的名称
- keep_fnames：保留函数的名称

CSS代码压缩

CSS压缩通常是去除无用的空格等，因为很难去修改选择器、属性的名称、值等

CSS的压缩我们可以使用另外一个插件：css-minimizer-webpack-plugin

npm install css-minimizer-webpack-plugin -D

配置方法如下：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
    // ...
    optimization: {
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin({
                parallel: true
            })
        ]
    }
}

Html文件代码压缩

使用HtmlWebpackPlugin插件来生成HTML的模板时候，通过配置属性minify进行html优化

module.exports = {
    ...
    plugin:[
        new HtmlwebpackPlugin({
            ...
            minify:{
                minifyCSS:false, // 是否压缩css
                collapseWhitespace:false, // 是否折叠空格
                removeComments:true // 是否移除注释
            }
        })
    ]
}

设置了minify，实际会使用另一个插件html-minifier-terser

文件大小压缩

对文件的大小进行压缩，减少http传输过程中宽带的损耗

npm install compression-webpack-plugin -D
new ComepressionPlugin({
    test:/\.(css|js)$/,  // 哪些文件需要压缩
    threshold:500, // 设置文件多大开始压缩
    minRatio:0.7, // 至少压缩的比例
    algorithm:"gzip", // 采用的压缩算法
})

图片压缩

一般来说在打包之后，一些图片文件的大小是远远要比 js 或者 css 文件要来的大，所以图片压缩较为重要

配置方法如下：

module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
          }
        },
        {
          loader: 'image-webpack-loader',
          options: {
            // 压缩 jpeg 的配置
            mozjpeg: {
              progressive: true,
              quality: 65
            },
            // 使用 imagemin**-optipng 压缩 png，enable: false 为关闭
            optipng: {
              enabled: false,
            },
            // 使用 imagemin-pngquant 压缩 png
            pngquant: {
              quality: '65-90',
              speed: 4
            },
            // 压缩 gif 的配置
            gifsicle: {
              interlaced: false,
            },
            // 开启 webp，会把 jpg 和 png 图片压缩为 webp 格式
            webp: {
              quality: 75
            }
          }
        }
      ]
    },
  ]
}

Tree Shaking

Tree Shaking 是一个术语，在计算机中表示消除死代码，依赖于ES Module的静态语法分析（不执行任何的代码，可以明确知道模块的依赖关系）

在webpack实现Trss shaking有两种不同的方案：

usedExports：通过标记某些函数是否被使用，之后通过Terser来进行优化的
sideEffects：跳过整个模块/文件，直接查看该文件是否有副作用

两种不同的配置方案，有不同的效果

usedExports

配置方法也很简单，只需要将usedExports设为true

module.exports = {
    ...
    optimization:{
        usedExports
    }
}

使用之后，没被用上的代码在webpack打包中会加入unused harmony export mul注释，用来告知 Terser 在优化时，可以删除掉这段代码

如下面sum函数没被用到，webpack打包会添加注释，terser在优化时，则将该函数去掉

sideEffects

sideEffects用于告知webpack compiler哪些模块时有副作用，配置方法是在package.json中设置sideEffects属性

如果sideEffects设置为false，就是告知webpack可以安全的删除未用到的exports

如果有些文件需要保留，可以设置为数组的形式

"sideEffecis":[    "./src/util/format.js",    "*.css" // 所有的css文件]

上述都是关于javascript的tree shaking，css同样也能够实现tree shaking

css tree shaking

css进行tree shaking优化可以安装PurgeCss插件

npm install purgecss-plugin-webpack -D
const PurgeCssPlugin = require('purgecss-webpack-plugin')module.exports = {    ...    plugins:[        new PurgeCssPlugin({            path:glob.sync(`${path.resolve('./src')}/**/*`), {nodir:true}// src里面的所有文件            satelist:function(){                return {                    standard:["html"]                }            }        })    ]}

paths：表示要检测哪些目录下的内容需要被分析，配合使用glob
默认情况下，Purgecss会将我们的html标签的样式移除掉，如果我们希望保留，可以添加一个safelist的属性

代码分离

将代码分离到不同的bundle中，之后我们可以按需加载，或者并行加载这些文件

默认情况下，所有的JavaScript代码（业务代码、第三方依赖、暂时没有用到的模块）在首页全部都加载，就会影响首页的加载速度

代码分离可以分出出更小的bundle，以及控制资源加载优先级，提供代码的加载性能

这里通过splitChunksPlugin来实现，该插件webpack已经默认安装和集成，只需要配置即可

默认配置中，chunks仅仅针对于异步（async）请求，我们可以设置为initial或者all

module.exports = {    ...    optimization:{        splitChunks:{            chunks:"all"        }    }}

splitChunks主要属性有如下：

Chunks，对同步代码还是异步代码进行处理
minSize：拆分包的大小, 至少为minSize，如何包的大小不超过minSize，这个包不会拆分
maxSize：将大于maxSize的包，拆分为不小于minSize的包
minChunks：被引入的次数，默认是1

内联chunk

可以通过InlineChunkHtmlPlugin插件将一些chunk的模块内联到html，如runtime的代码（对模块进行解析、加载、模块信息相关的代码），代码量并不大，但是必须加载的

const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {    ...    plugin:[        new InlineChunkHtmlPlugin(HtmlWebpackPlugin,[/runtime.+\.js/]}

三、总结

关于webpack对前端性能的优化，可以通过文件体积大小入手，其次还可通过分包的形式、减少http请求次数等方式，实现对前端性能的优化

♥︎ ♥︎ ♥︎ 与webpack类似的工具还有哪些？区别？

一、模块化工具

模块化是一种处理复杂系统分解为更好的可管理模块的方式

可以用来分割，组织和打包应用。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体(bundle)

在前端领域中，并非只有webpack这一款优秀的模块打包工具，还有其他类似的工具，例如Rollup、Parcel、snowpack，以及最近风头无两的Vite

通过这些模块打包工具，能够提高我们的开发效率，减少开发成本

这里没有提及gulp、grunt是因为它们只是定义为构建工具，不能类比

Rollup

Rollup 是一款 ES Modules 打包器，从作用上来看，Rollup 与 Webpack 非常类似。不过相比于 Webpack，Rollup 要小巧的多

现在很多我们熟知的库都都使用它进行打包，比如：Vue、React和three.js等

举个例子：

// ./src/messages.js
export default {
  hi: 'Hey Guys, I am zce~'
}

// ./src/logger.js
export const log = msg => {
  console.log('---------- INFO ----------')
  console.log(msg)
  console.log('--------------------------')
}

export const error = msg => {
  console.error('---------- ERROR ----------')
  console.error(msg)
  console.error('---------------------------')
}

// ./src/index.js
import { log } from './logger'
import messages from './messages'
log(messages.hi)

然后通过rollup进行打包

$ npx rollup ./src/index.js --file ./dist/bundle.js

打包结果如下图

可以看到，代码非常简洁，完成不像webpack那样存在大量引导代码和模块函数

并且error方法由于没有被使用，输出的结果中并无error方法，可以看到，rollup默认开始Tree-shaking 优化输出结果

因此，可以看到Rollup的优点：

代码效率更简洁、效率更高
默认支持 Tree-shaking

但缺点也十分明显，加载其他类型的资源文件或者支持导入 CommonJS 模块，又或是编译 ES 新特性，这些额外的需求 Rollup 需要使用插件去完成

综合来看，rollup并不适合开发应用使用，因为需要使用第三方模块，而目前第三方模块大多数使用CommonJs方式导出成员，并且rollup不支持HMR，使开发效率降低

但是在用于打包 JavaScript 库时，rollup比 webpack 更有优势，因为其打包出来的代码更小、更快，其存在的缺点可以忽略

Parcel

Parcel ，是一款完全零配置的前端打包器，它提供了 “傻瓜式” 的使用体验，只需了解简单的命令，就能构建前端应用程序

Parcel 跟 Webpack 一样都支持以任意类型文件作为打包入口，但建议使用HTML文件作为入口，该HTML文件像平时一样正常编写代码、引用资源。如下所示：

<!-- ./src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Parcel Tutorials</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

main.js文件通过ES Moudle方法导入其他模块成员

// ./src/main.js
import { log } from './logger'
log('hello parcel')
// ./src/logger.js
export const log = msg => {
  console.log('---------- INFO ----------')
  console.log(msg)
}

运行之后，使用命令打包

npx parcel src/index.html

执行命令后，Parcel不仅打包了应用，同时也启动了一个开发服务器，跟webpack Dev Server一样

跟webpack类似，也支持模块热替换，但用法更简单

同时，Parcel有个十分好用的功能：支持自动安装依赖，像webpack开发阶段突然使用安装某个第三方依赖，必然会终止dev server然后安装再启动。而Parcel则免了这繁琐的工作流程

同时，Parcel能够零配置加载其他类型的资源文件，无须像webpack那样配置对应的loader

打包命令如下：

npx parcel src/index.html

由于打包过程是多进程同时工作，构建速度会比Webpack 快，输出文件也会被压缩，并且样式代码也会被单独提取到单个文件中

可以感受到，Parcel 给开发者一种很大的自由度，只管去实现业务代码，其他事情用Parcel解决

Snowpack

Snowpack，是一种闪电般快速的前端构建工具，专为现代Web设计，较复杂的打包工具（如Webpack或Parcel）的替代方案，利用JavaScript的本机模块系统，避免不必要的工作并保持流畅的开发体验

开发阶段，每次保存单个文件时，Webpack和Parcel都需要重新构建和重新打包应用程序的整个bundle。而Snowpack为你的应用程序每个文件构建一次，就可以永久缓存，文件更改时，Snowpack会重新构建该单个文件

下图给出webpack与snowpack打包区别：

在重新构建每次变更时没有任何的时间浪费，只需要在浏览器中进行HMR更新

Vite

vite ，是一种新型前端构建工具，能够显著提升前端开发体验

它主要由两部分组成：

一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的 [模块热更新HMR
一套构建指令，它使用 Rollup打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源

其作用类似webpack + webpack-dev-server，其特点如下：

快速的冷启动
即时的模块热更新
真正的按需编译

vite会直接启动开发服务器，不需要进行打包操作，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快

利用现代浏览器支持ES Module的特性，当浏览器请求某个模块的时候，再根据需要对模块的内容进行编译，这种方式大大缩短了编译时间

原理图如下所示：

在热模块HMR方面，当修改一个模块的时候，仅需让浏览器重新请求该模块即可，无须像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高

webpack

相比上述的模块化工具，webpack大而全，很多常用的功能做到开箱即用。有两大最核心的特点：一切皆模块和按需加载

与其他构建工具相比，有如下优势：

智能解析：对 CommonJS 、 AMD 、ES6 的语法做了兼容
万物模块：对 js、css、图片等资源文件都支持打包
开箱即用：HRM、Tree-shaking等功能
代码分割：可以将代码切割成不同的 chunk，实现按需加载，降低了初始化时间
插件系统，具有强大的 Plugin 接口，具有更好的灵活性和扩展性
易于调试：支持 SourceUrls 和 SourceMaps
快速运行：webpack 使用异步 IO 并具有多级缓存，这使得 webpack 很快且在增量编译上更加快
生态环境好：社区更丰富，出现的问题更容易解决

♥︎ ♥︎ ♥︎ 代码分割的本质是什么？有什么意义呢？

代码分割的本质：是能够把代码分离到不同的bundle中，避免出现大体积的代码包，然后可以按需加载或并行加载这些文件

代码分离的意义：代码分离可以获取更小的bundle，以及控制资源加载优先级，合理使用可以极大的减少加载时间

代码分割的实现方式有三种：入口起点：使用entry手动分离代码(不建议) 防止重复加载：

使用optimization.splitChunks配置选项，可以将第三方公共模块和业务代码直接分离

动态引入：使用import()方法来分离代码，原理是当 Webpack 解析到该语法时，会自动进行代码分割，分割出不同的chunks

语法：使用的时候再去下载对应的文件，返回一个Promise，当Promise成功后再去执行回调

♥︎ ♥︎ ♥︎ 说下 tree-shaking 的原理

tree-shaking 的原理

♥︎ ♥︎ ♥︎ babel原理

babel原理

♥︎ ♥︎ ♥︎ linux部署和windows sever服务器区别？

性价比：Linux服务器性价比更高，Linux作为资源管理器和操作系统来说，是开源的，免费的，而正版windows的操作系统是收费的。

性能方面：相同配置的Linux服务器的性能比windows服务器好一些，Linux服务器占用的资源少一点

稳定性方面：Window系统用户量大，因而攻击者多一些，所以暴露了更多的系统安全漏洞。Linux是多用户多进程系统，意味着Linux能够一次性处理大量正在进行的进程，比windows处理的多

安全性方面：Linux系统开源软件的开发方式有助于暴露错误，集众人智慧解决问题，补丁更新更快。这是windows不具备的，Windows的另一个不利因素是其许多应用程序依靠远程过程调用，这就迫使Windows的防火墙没有Linux那样严格。而Linux远程过程调用是限制使用的。

♥︎ ♥︎ ♥︎ 什么是长缓存，在webpack中如何做到长缓存优化？

浏览器在用户访问页面的时候，都会对静态资源进行存储，但是每次代码更新或者升级的时候，我们都需要浏览器去重新加载代码，最方便的方法就是以文件名的方式引入，只下载新的代码块，不加载旧的没有变化的代码块，这就是长缓存，

在webpack4中使用SplitChunkPlugin把第三方库和业务代码分离，由于第三方库的chunkHash未改变，所以只会对改变的业务代码的模块进行更新。而第三方库的代码块因为长缓存而不更新。

♥︎ ♥︎ ♥︎ 什么是组件？什么是模块化？有什么区别？

组件化

就是基础库或者基础组件，意思是把代码重复的部分提炼出一个个组件供给功能使用

模块化

就是业务框架或者业务模块，也可以理解为框架，意思是把功能进行划分，将同一类型的代码整合在一起，所以模

块的功能相对复杂，都属于同一个业务。

区别：

使用：组件的使用能在不同项目(模块)重复应用的代码，而模块按照项目功能需求划分成不同类型的业务框架

目的：组件是复用，解耦，模块是为了隔离、封装

依赖：组件之间低依赖，比较独立，模块之间的依赖可通过路由进行耦合

架构定位：组件位于架构底层，被其它层所依赖，模块位于架构业务层

参考文献

https://juejin.cn/post/6844903935795265549

https://github.com/febobo/web-interview

前端面试大全git

2022-11-03

技术面试 / git操作

前端面试题大全（git命令）

前端面试题类目分类

HTML5 + CSS3
JavaScript
Vue + Vue3
React
Webpack
服务端

考点频率：♥︎ 、 ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎ ♥︎

git

git是什么？

一、是什么

git，是一个分布式版本控制软件，最初目的是为更好地管理Linux内核开发而设计

分布式版本控制系统的客户端并不只提取最新版本的文件快照，而是把代码仓库完整地镜像下来。这么一来，任何一处协同工作用的服务器发生故障，事后都可以用任何一个镜像出来的本地仓库恢复

项目开始，只有一个原始版仓库，别的机器可以clone这个原始版本库，那么所有clone的机器，它们的版本库其实都是一样的，并没有主次之分

所以在实现团队协作的时候，只要有一台电脑充当服务器的角色，其他每个人都从这个“服务器”仓库clone一份到自己的电脑上，并且各自把各自的提交推送到服务器仓库里，也从服务器仓库中拉取别人的提交

github实际就可以充当这个服务器角色，其是一个开源协作社区，提供Git仓库托管服务，既可以让别人参与你的开源项目，也可以参与别人的开源项目

二、工作原理

当我们通过git init创建或者git clone一个项目的时候，项目目录会隐藏一个.git子目录，其作用是用来跟踪管理版本库的

Git 中所有数据在存储前都计算校验和，然后以校验和来引用，所以在我们修改或者删除文件的时候，git能够知道

Git 用以计算校验和的机制叫做 SHA-1 散列（hash，哈希），这是一个由 40 个十六进制字符（0-9 和 a-f）组成字符串，基于 Git 中文件的内容或目录结构计算出来，如下：

24b9da6552252987aa493b52f8696cd6d3b00373

当我们修改文件的时候，git就会修改文件的状态，可以通过git status进行查询，状态情况如下：

已修改（modified）：表示修改了文件，但还没保存到数据库中。
已暂存（staged）：表示对一个已修改文件的当前版本做了标记，使之包含在下次提交的快照中。
已提交（committed）：表示数据已经安全的保存在本地数据库中。

文件状态对应的，不同状态的文件在Git中处于不同的工作区域，主要分成了四部分：

工作区：相当于本地写代码的区域，如 git clone 一个项目到本地，相当于本地克隆了远程仓库项目的一个副本
暂存区：暂存区是一个文件，保存了下次将提交的文件列表信息，一般在 Git 仓库目录中
本地仓库：提交更新，找到暂存区域的文件，将快照永久性存储到 Git 本地仓库
远程仓库：远程的仓库，如 github

三、命令

从上图可以看到，git日常简单的使用就只有上图6个命令：

add
commit
push
pull
clone
checkout

但实际上还有很多命令，如果想要熟练使用，还有60个多命令，通过这些命令的配合使用，能够提高个人工作效率和团队协助能力

Git中 fork, clone,branch这三个概念，有什么区别?

一、是什么

fork

fork，英语翻译过来就是叉子，动词形式则是分叉，如下图，从左到右，一条直线变成多条直线

转到git仓库中，fork则可以代表分叉、克隆出一个（仓库的）新拷贝

包含了原来的仓库（即upstream repository，上游仓库）所有内容，如分支、Tag、提交

如果想将你的修改合并到原项目中时，可以通过的 Pull Request 把你的提交贡献回原仓库

clone

clone，译为克隆，它的作用是将文件从远程代码仓下载到本地，从而形成一个本地代码仓

执行clone命令后，会在当前目录下创建一个名为xxx的目录，并在这个目录下初始化一个 .git 文件夹，然后从中读取最新版本的文件的拷贝

默认配置下远程 Git 仓库中的每一个文件的每一个版本都将被拉取下来

branch

branch，译为分支，其作用简单而言就是开启另一个分支，使用分支意味着你可以把你的工作从开发主线上分离开来，以免影响开发主线

Git 处理分支的方式十分轻量，创建新分支这一操作几乎能在瞬间完成，并且在不同分支之间的切换操作也是一样便捷

在我们开发中，默认只有一条master分支，如下图所示：

]

通过git branch 可以创建一个分支，但并不会自动切换到新分支中去

通过git checkout可以切换到另一个testing分支

二、如何使用

fork

当你在github发现感兴趣开源项目的时候，可以通过点击github仓库中右上角fork标识的按钮，如下图：

点击这个操作后会将这个仓库的文件、提交历史、issues和其余东西的仓库复制到自己的github仓库中，而你本地仓库是不会存在任何更改

然后你就可以通过git clone对你这个复制的远程仓库进行克隆

后续更改任何东西都可以在本地完成，如git add、git commit一系列的操作，然后通过push命令推到自己的远程仓库

如果希望对方接受你的修改，可以通过发送pull requests给对方，如果对方接受。则会将你的修改内容更新到仓库中

整体流程如下图：

clone

在github中，开源项目右侧存在code按钮，点击后则会显示开源项目url信息，如下图所示：

通过git clone xxx则能完成远程项目的下载

branch

可通过git branch进行查看当前的分支状态，

如果给了--list，或者没有非选项参数，现有的分支将被列出；当前的分支将以绿色突出显示，并标有星号

以及通过git branch创建一个新的分支出来

三、区别

其三者区别如下：

fork 只能对代码仓进行操作，且 fork 不属于 git 的命令，通常用于代码仓托管平台的一种“操作”
clone 是 git 的一种命令，它的作用是将文件从远程代码仓下载到本地，从而形成一个本地代码仓
branch 特征与 fork 很类似，fork 得到的是一个新的、自己的代码仓，而 branch 得到的是一个代码仓的一个新分支

Git常用的命令有哪些？

一、前言

git 的操作可以通过命令的形式如执行，日常使用就如下图6个命令即可

实际上，如果想要熟练使用，超过60多个命令需要了解，下面则介绍下常见的的git 命令

二、有哪些

配置

Git 自带一个 git config 的工具来帮助设置控制 Git 外观和行为的配置变量，在我们安装完git之后，第一件事就是设置你的用户名和邮件地址

后续每一个提交都会使用这些信息，它们会写入到你的每一次提交中，不可更改

设置提交代码时的用户信息命令如下：

git config [–global] user.name “[name]”
git config [–global] user.email “[email address]”

启动

一个git项目的初始有两个途径，分别是：

git init [project-name]：创建或在当前目录初始化一个git代码库
git clone url：下载一个项目和它的整个代码历史

日常基本操作

在日常工作中，代码常用的基本操作如下：

git init 初始化仓库，默认为 master 分支
git add . 提交全部文件修改到缓存区
git add <具体某个文件路径+全名> 提交某些文件到缓存区
git diff 查看当前代码 add后，会 add 哪些内容
git diff –staged查看现在 commit 提交后，会提交哪些内容
git status 查看当前分支状态
git pull <远程仓库名> <远程分支名> 拉取远程仓库的分支与本地当前分支合并
git pull <远程仓库名> <远程分支名>:<本地分支名> 拉取远程仓库的分支与本地某个分支合并
git commit -m “<注释>” 提交代码到本地仓库，并写提交注释
git commit -v 提交时显示所有diff信息
git commit –amend [file1] [file2] 重做上一次commit，并包括指定文件的新变化

关于提交信息的格式，可以遵循以下的规则：

feat: 新特性，添加功能
fix: 修改 bug
refactor: 代码重构
docs: 文档修改
style: 代码格式修改, 注意不是 css 修改
test: 测试用例修改
chore: 其他修改, 比如构建流程, 依赖管理

分支操作

git branch 查看本地所有分支
git branch -r 查看远程所有分支
git branch -a 查看本地和远程所有分支
git merge <分支名> 合并分支
git merge –abort 合并分支出现冲突时，取消合并，一切回到合并前的状态
git branch <新分支名> 基于当前分支，新建一个分支
git checkout –orphan <新分支名> 新建一个空分支（会保留之前分支的所有文件）
git branch -D <分支名> 删除本地某个分支
git push <远程库名> :<分支名> 删除远程某个分支
git branch <新分支名称> <提交ID> 从提交历史恢复某个删掉的某个分支
git branch -m <原分支名> <新分支名> 分支更名
git checkout <分支名> 切换到本地某个分支
git checkout <远程库名>/<分支名> 切换到线上某个分支
git checkout -b <新分支名> 把基于当前分支新建分支，并切换为这个分支

远程同步

远程操作常见的命令：

git fetch [remote] 下载远程仓库的所有变动
git remote -v 显示所有远程仓库
git pull [remote] [branch] 拉取远程仓库的分支与本地当前分支合并
git fetch 获取线上最新版信息记录，不合并
git push [remote] [branch] 上传本地指定分支到远程仓库
git push [remote] –force 强行推送当前分支到远程仓库，即使有冲突
git push [remote] –all 推送所有分支到远程仓库

撤销

git checkout [file] 恢复暂存区的指定文件到工作区
git checkout [commit] [file] 恢复某个commit的指定文件到暂存区和工作区
git checkout . 恢复暂存区的所有文件到工作区
git reset [commit] 重置当前分支的指针为指定commit，同时重置暂存区，但工作区不变
git reset –hard 重置暂存区与工作区，与上一次commit保持一致
git reset [file] 重置暂存区的指定文件，与上一次commit保持一致，但工作区不变
git revert [commit] 后者的所有变化都将被前者抵消，并且应用到当前分支

存储操作

你正在进行项目中某一部分的工作，里面的东西处于一个比较杂乱的状态，而你想转到其他分支上进行一些工作，但又不想提交这些杂乱的代码，这时候可以将代码进行存储

git stash 暂时将未提交的变化移除
git stash pop 取出储藏中最后存入的工作状态进行恢复，会删除储藏
git stash list 查看所有储藏中的工作
git stash apply <储藏的名称> 取出储藏中对应的工作状态进行恢复，不会删除储藏
git stash clear 清空所有储藏中的工作
git stash drop <储藏的名称> 删除对应的某个储藏

三、总结

git常用命令速查表如下所示：

对git pull 和 git fetch 的理解？有什么区别？

一、是什么

先回顾两个命令的定义

git fetch 命令用于从另一个存储库下载对象和引用
git pull 命令用于从另一个存储库或本地分支获取并集成(整合)

再来看一次git的工作流程图，如下所示：

可以看到，git fetch是将远程主机的最新内容拉到本地，用户在检查了以后决定是否合并到工作本机分支中

而git pull 则是将远程主机的最新内容拉下来后直接合并，即：git pull = git fetch + git merge，这样可能会产生冲突，需要手动解决

在我们本地的git文件中对应也存储了git本地仓库分支的commit ID 和跟踪的远程分支的commit ID，对应文件如下：

.git/refs/head/[本地分支]
.git/refs/remotes/[正在跟踪的分支]

使用 git fetch更新代码，本地的库中master的commitID不变

但是与git上面关联的那个orign/master的commit ID发生改变

这时候我们本地相当于存储了两个代码的版本号，我们还要通过merge去合并这两个不同的代码版本

也就是fetch的时候本地的master没有变化，但是与远程仓关联的那个版本号被更新了，接下来就是在本地merge合并这两个版本号的代码

相比之下，使用git pull就更加简单粗暴，会将本地的代码更新至远程仓库里面最新的代码版本，如下图：

二、用法

一般远端仓库里有新的内容更新，当我们需要把新内容下载的时候，就使用到git pull或者git fetch命令

fetch

用法如下：

git fetch <远程主机名> <远程分支名>:<本地分支名>

例如从远程的origin仓库的master分支下载代码到本地并新建一个temp分支

git fetch origin master:temp

如果上述没有冒号，则表示将远程origin仓库的master分支拉取下来到本地当前分支

这里git fetch不会进行合并，执行后需要手动执行git merge合并，如下：

git merge temp

pull

两者的用法十分相似，pull用法如下：

git pull <远程主机名> <远程分支名>:<本地分支名>

例如将远程主机origin的master分支拉取过来，与本地的branchtest分支合并，命令如下：

git pull origin master:branchtest

同样如果上述没有冒号，则表示将远程origin仓库的master分支拉取下来与本地当前分支合并

三、区别

相同点：

在作用上他们的功能是大致相同的，都是起到了更新代码的作用

不同点：

git pull是相当于从远程仓库获取最新版本，然后再与本地分支merge，即git pull = git fetch + git merge
相比起来，git fetch 更安全也更符合实际要求，在 merge 前，我们可以查看更新情况，根据实际情况再决定是否合并

Git 中 HEAD、工作树和索引之间的区别？

一、HEAD

在git中，可以存在很多分支，其本质上是一个指向commit对象的可变指针，而Head是一个特别的指针，是一个指向你正在工作中的本地分支的指针

简单来讲，就是你现在在哪儿，HEAD 就指向哪儿

例如当前我们处于master分支，所以HEAD这个指针指向了master分支指针

然后通过调用git checkout test切换到test分支，那么HEAD则指向test分支，如下图：

但我们在test分支再一次commit信息的时候，HEAD指针仍然指向了test分支指针，而test分支指针已经指向了最新创建的提交，如下图：

这个HEAD存储的位置就在.git/HEAD目录中，查看信息可以看到HEAD指向了另一个文件

$ cat .git/HEAD
ref: refs/heads/master

$ cat .git/refs/heads/master
7406a10efcc169bbab17827aeda189aa20376f7f

这个文件的内容是一串哈希码，而这个哈希码正是master分支上最新的提交所对应的哈希码

所以，当我们切换分支的时候，HEAD指针通常指向我们所在的分支，当我们在某个分支上创建新的提交时，分支指针总是会指向当前分支的最新提交

所以，HEAD指针 ——–> 分支指针 ——–> 最新提交

二、工作树和索引

在Git管理下，大家实际操作的目录被称为工作树，也就是工作区域

在数据库和工作树之间有索引，索引是为了向数据库提交作准备的区域，也被称为暂存区域

Git在执行提交的时候，不是直接将工作树的状态保存到数据库，而是将设置在中间索引区域的状态保存到数据库

因此，要提交文件，首先需要把文件加入到索引区域中。

所以，凭借中间的索引，可以避免工作树中不必要的文件提交，还可以将文件修改内容的一部分加入索引区域并提交

三、区别

从所在的位置来看：

HEAD 指针通常指向我们所在的分支，当我们在某个分支上创建新的提交时，分支指针总是会指向当前分支的最新提交
工作树是查看和编辑的（源）文件的实际内容
索引是放置你想要提交给 git仓库文件的地方，如工作树的代码通过 git add 则添加到 git 索引中，通过git commit 则将索引区域的文件提交到 git 仓库中

对git stash 的理解？应用场景？

一、是什么

stash，译为存放，在 git 中，可以理解为保存当前工作进度，会把暂存区和工作区的改动进行保存，这些修改会保存在一个栈上

后续你可以在任何时候任何分支重新将某次的修改推出来，重新应用这些更改的代码

默认情况下，git stash会缓存下列状态的文件：

添加到暂存区的修改（staged changes）
Git跟踪的但并未添加到暂存区的修改（unstaged changes）

但以下状态的文件不会缓存：

在工作目录中新的文件（untracked files）
被忽略的文件（ignored files）

如果想要上述的文件都被缓存，可以使用-u或者--include-untracked可以工作目录新的文件，使用-a或者--all命令可以当前目录下的所有修改

二、如何使用

关于git stash常见的命令如下：

git stash
git stash save
git stash list
git stash pop
git stash apply
git stash show
git stash drop
git stash clear

git stash

保存当前工作进度，会把暂存区和工作区的改动保存起来

git stash save

git stash save可以用于存储修改.并且将git的工作状态切回到HEAD也就是上一次合法提交上

如果给定具体的文件路径,git stash只会处理路径下的文件.其他的文件不会被存储，其存在一些参数：

–keep-index 或者 -k 只会存储为加入 git 管理的文件
–include-untracked 为追踪的文件也会被缓存,当前的工作空间会被恢复为完全清空的状态
-a 或者 –all 命令可以当前目录下的所有修改，包括被 git 忽略的文件

git stash list

显示保存进度的列表。也就意味着，git stash命令可以多次执行，当多次使用git stash命令后，栈里会充满未提交的代码，如下：

其中，stash@{0}、stash@{1}就是当前stash的名称

git stash pop

git stash pop 从栈中读取最近一次保存的内容，也就是栈顶的stash会恢复到工作区

也可以通过 git stash pop + stash名字执行恢复哪个stash恢复到当前目录

如果从stash中恢复的内容和当前目录中的内容发生了冲突，则需要手动修复冲突或者创建新的分支来解决冲突

git stash apply

将堆栈中的内容应用到当前目录，不同于git stash pop，该命令不会将内容从堆栈中删除

也就说该命令能够将堆栈的内容多次应用到工作目录中，适应于多个分支的情况

同样，可以通过git stash apply + stash名字执行恢复哪个stash恢复到当前目录

git stash show

查看堆栈中最新保存的stash和当前目录的差异

通过使用git stash show -p查看详细的不同

通过使用git stash show stash@{1}查看指定的stash和当前目录差异

git stash drop

git stash drop + stash名称表示从堆栈中移除某个指定的stash

git stash clear

删除所有存储的进度

三、应用场景

当你在项目的一部分上已经工作一段时间后，所有东西都进入了混乱的状态，而这时你想要切换到另一个分支或者拉下远端的代码去做一点别的事情

但是你创建一次未完成的代码的commit提交，这时候就可以使用git stash

例如以下场景：

当你的开发进行到一半,但是代码还不想进行提交 ,然后需要同步去关联远端代码时.如果你本地的代码和远端代码没有冲突时,可以直接通过git pull解决

但是如果可能发生冲突怎么办.直接git pull会拒绝覆盖当前的修改，这时候就可以依次使用下述的命令：

git stash
git pull
git stash pop

或者当你开发到一半，现在要修改别的分支问题的时候，你也可以使用git stash缓存当前区域的代码

git stash：保存开发到一半的代码
git commit -m ‘修改问题’
git stash pop：将代码追加到最新的提交之后

对git rebase 和 git merge的理解？区别？

一、是什么

在使用 git 进行版本管理的项目中，当完成一个特性的开发并将其合并到 master 分支时，会有两种方式：

git merge
git rebase

git rebase 与 git merge都有相同的作用，都是将一个分支的提交合并到另一分支上，但是在原理上却不相同

用法上两者也十分的简单：

git merge

将当前分支合并到指定分支，命令用法如下：

git merge xxx

git rebase

将当前分支移植到指定分支或指定commit之上，用法如下：

git rebase -i <commit>

常见的参数有--continue，用于解决冲突之后，继续执行rebase

git rebase --continue

二、分析

git merge

通过git merge将当前分支与xxx分支合并，产生的新的commit对象有两个父节点

如果“指定分支”本身是当前分支的一个直接子节点，则会产生快照合并

举个例子，bugfix分支是从master分支分叉出来的，如下所示：

合并 bugfix分支到master分支时，如果master分支的状态没有被更改过，即 bugfix分支的历史记录包含master分支所有的历史记录

所以通过把master分支的位置移动到bugfix的最新分支上，就完成合并

如果master分支的历史记录在创建bugfix分支后又有新的提交，如下情况：

这时候使用git merge的时候，会生成一个新的提交，并且master分支的HEAD会移动到新的分支上，如下：

从上面可以看到，会把两个分支的最新快照以及二者最近的共同祖先进行三方合并，合并的结果是生成一个新的快照

git rebase

同样，master分支的历史记录在创建bugfix分支后又有新的提交，如下情况：

通过git rebase，会变成如下情况：

在移交过程中，如果发生冲突，需要修改各自的冲突，如下：

rebase之后，master的HEAD位置不变。因此，要合并master分支和bugfix分支

从上面可以看到，rebase会找到不同的分支的最近共同祖先，如上图的B

然后对比当前分支相对于该祖先的历次提交，提取相应的修改并存为临时文件（老的提交X和Y也没有被销毁，只是简单地不能再被访问或者使用）

然后将当前分支指向目标最新位置D, 然后将之前另存为临时文件的修改依序应用

三、区别

从上面可以看到，merge和rebasea都是合并历史记录，但是各自特性不同：

merge

通过merge合并分支会新增一个merge commit，然后将两个分支的历史联系起来

其实是一种非破坏性的操作，对现有分支不会以任何方式被更改，但是会导致历史记录相对复杂

rebase

rebase 会将整个分支移动到另一个分支上，有效地整合了所有分支上的提交

主要的好处是历史记录更加清晰，是在原有提交的基础上将差异内容反映进去，消除了 git merge所需的不必要的合并提交

git 发生冲突的场景？如何解决？

一、是什么

一般情况下，出现分支的场景有如下：

多个分支代码合并到一个分支时
多个分支向同一个远端分支推送

具体情况就是，多个分支修改了同一个文件（任何地方）或者多个分支修改了同一个文件的名称

如果两个分支中分别修改了不同文件中的部分，是不会产生冲突，直接合并即可

应用在命令中，就是push、pull、stash、rebase等命令下都有可能产生冲突情况，从本质上来讲，都是merge和patch（应用补丁）时产生冲突

二、分析

在本地主分值master创建一个a.txt文件，文件起始位置写上master commit，如下：

然后提交到仓库：

git add a.txt
git commit -m ‘master first commit’

创建一个新的分支featurel1分支，并进行切换，如下：

git checkout -b featurel1

然后修改a.txt文件首行文字为 featurel commit，然后添加到暂存区，并开始进行提交到仓库：

git add a.txt
git commit -m ‘featurel first change’

然后通过git checkout master切换到主分支，通过git merge进行合并，发现不会冲突

此时a.txt文件的内容变成featurel commit，没有出现冲突情况，这是因为git在内部发生了快速合并

如果此时切换到featurel分支，将文件的内容修改成featrue second commit，然后提交到本地仓库

然后切换到主分支，如果此时在a.txt文件再次修改，修改成mastet second commit，然后再次提交到本地仓库

此时，master分支和feature1分支各自都分别有新的提交，变成了下图所示：

这种情况下，无法执行快速合并，只能试图把各自的修改合并起来，但这种合并就可能会有冲突

现在通过git merge featurel进行分支合并，如下所示：

从冲突信息可以看到，a.txt发生冲突，必须手动解决冲突之后再提交

而git status同样可以告知我们冲突的文件：

打开a.txt文件，可以看到如下内容：

git用<<<<<<<，=======，>>>>>>>标记出不同分支的内容：

<<<<<<< 和 ======= 之间的区域就是当前更改的内容
======= 和 >>>>>>> 之间的区域就是传入进来更改的内容

现在要做的事情就是将冲突的内容进行更改，对每个文件使用 git add 命令来将其标记为冲突已解决。一旦暂存这些原本有冲突的文件，Git 就会将它们标记为冲突已解决然后再提交：

git add a.txt
git commit -m “conflict fixed”

此时master分支和feature1分支变成了下图所示：

使用git log命令可以看到合并的信息：

三、总结

当Git无法自动合并分支时，就必须首先解决冲突，解决冲突后，再提交，合并完成

解决冲突就是把Git合并失败的文件手动编辑为我们希望的内容，再提交

对git reset 和 git revert 的理解？区别？

一、是什么

git reset

reset用于回退版本，可以遗弃不再使用的提交

执行遗弃时，需要根据影响的范围而指定不同的参数，可以指定是否复原索引或工作树内容

git revert

在当前提交后面，新增一次提交，抵消掉上一次提交导致的所有变化，不会改变过去的历史，主要是用于安全地取消过去发布的提交

二、如何用

git reset

当没有指定ID的时候，默认使用HEAD，如果指定ID，那么就是基于指向ID去变动暂存区或工作区的内容

// 没有指定ID, 暂存区的内容会被当前ID版本号的内容覆盖，工作区不变
git reset

// 指定ID，暂存区的内容会被指定ID版本号的内容覆盖，工作区不变
git reset <ID>

日志ID可以通过查询，可以git log进行查询，如下：

commit a7700083ace1204ccdff9f71631fb34c9913f7c5 (HEAD -> master)
Author: linguanghui <linguanghui@baidu.com>
Date:   Tue Aug 17 22:34:40 2021 +0800

    second commit

commit e31118663ce66717edd8a179688a7f3dde5a9393
Author: linguanghui <linguanghui@baidu.com>
Date:   Tue Aug 17 22:20:01 2021 +0800

    first commit

常见命令如下：

–mixed（默认）：默认的时候，只有暂存区变化
–hard参数：如果使用 –hard 参数，那么工作区也会变化
–soft：如果使用 –soft 参数，那么暂存区和工作区都不会变化

git revert

跟git reset用法基本一致，git revert 撤销某次操作，此次操作之前和之后的 commit和history都会保留，并且把这次撤销，作为一次最新的提交，如下：

git revert <commit_id>

如果撤销前一个版本，可以通过如下命令：

git revert HEAD

撤销前前一次，如下：

git revert HEAD^

三、区别

撤销（revert）被设计为撤销公开的提交（比如已经push）的安全方式，git reset被设计为重设本地更改

因为两个命令的目的不同，它们的实现也不一样：重设完全地移除了一堆更改，而撤销保留了原来的更改，用一个新的提交来实现撤销

两者主要区别如下：

git revert是用一次新的commit来回滚之前的commit，git reset是直接删除指定的commit
git reset 是把HEAD向后移动了一下，而git revert是HEAD继续前进，只是新的commit的内容和要revert的内容正好相反，能够抵消要被revert的内容
在回滚这一操作上看，效果差不多。但是在日后继续 merge 以前的老版本时有区别

如果回退分支的代码以后还需要的情况则使用git revert，如果分支是提错了没用的并且不想让别人发现这些错误代码，则使用git reset

参考文献：

[语音仓库]: “https://github.com/febobo/web-interview “

前端面试大全设计模式

2022-11-03

技术面试 / 常用设计模式

前端面试题大全（设计模式）

前端面试题类目分类

HTML5 + CSS3
JavaScript
Vue + Vue3
React
Webpack
服务端

考点频率：♥︎ 、 ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎ ♥︎

设计模式

什么是设计模式

设计模式，是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。

为什么要学习设计模式

看懂源代码：如果你不懂设计模式去看Jdk、Spring、SpringMVC、IO等等等等的源码，你会很迷茫，你会寸步难行
看看前辈的代码：你去个公司难道都是新项目让你接手？很有可能是接盘的，前辈的开发难道不用设计模式？
编写自己的理想中的好代码：我个人反正是这样的，对于我自己开发的项目我会很认真，我对他比对我女朋友还好，把项目当成自己的儿子一样

设计模式分类

创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。

设计模式的六大原则

开放封闭原则（Open Close Principle）

原则思想：尽量通过扩展软件实体来解决需求变化，而不是通过修改已有的代码来完成变化
描述：一个软件产品在生命周期内，都会发生变化，既然变化是一个既定的事实，我们就应该在设计的时候尽量适应这些变化，以提高项目的稳定性和灵活性。
优点：单一原则告诉我们，每个类都有自己负责的职责，里氏替换原则不能破坏继承关系的体系。

里氏代换原则（Liskov Substitution Principle）

原则思想：使用的基类可以在任何地方使用继承的子类，完美的替换基类。
大概意思是：子类可以扩展父类的功能，但不能改变父类原有的功能。子类可以实现父类的抽象方法，但不能覆盖父类的非抽象方法，子类中可以增加自己特有的方法。
优点：增加程序的健壮性，即使增加了子类，原有的子类还可以继续运行，互不影响。

依赖倒转原则（Dependence Inversion Principle）

依赖倒置原则的核心思想是面向接口编程.
依赖倒转原则要求我们在程序代码中传递参数时或在关联关系中，尽量引用层次高的抽象层类，
这个是开放封闭原则的基础，具体内容是：对接口编程，依赖于抽象而不依赖于具体。

接口隔离原则（Interface Segregation Principle）

这个原则的意思是：使用多个隔离的接口，比使用单个接口要好。还是一个降低类之间的耦合度的意思，从这儿我们看出，其实设计模式就是一个软件的设计思想，从大型软件架构出发，为了升级和维护方便。所以上文中多次出现：降低依赖，降低耦合。
例如：支付类的接口和订单类的接口，需要把这俩个类别的接口变成俩个隔离的接口

迪米特法则（最少知道原则）（Demeter Principle）

原则思想：一个对象应当对其他对象有尽可能少地了解，简称类间解耦
大概意思就是一个类尽量减少自己对其他对象的依赖，原则是低耦合，高内聚，只有使各个模块之间的耦合尽量的低，才能提高代码的复用率。
优点：低耦合，高内聚。

单一职责原则（Principle of single responsibility）

原则思想：一个方法只负责一件事情。
描述：单一职责原则很简单，一个方法一个类只负责一个职责，各个职责的程序改动，不影响其它程序。这是常识，几乎所有程序员都会遵循这个原则。
优点：降低类和类的耦合，提高可读性，增加可维护性和可拓展性，降低可变性的风险。

单例模式

一、是什么

单例模式（Singleton Pattern）：创建型模式，提供了一种创建对象的最佳方式，这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建

在应用程序运行期间，单例模式只会在全局作用域下创建一次实例对象，让所有需要调用的地方都共享这一单例对象，如下图所示：

从定义上来看，全局变量好像就是单例模式，但是一般情况我们不认为全局变量是一个单例模式，原因是：

全局命名污染
不易维护，容易被重写覆盖

二、实现

在javascript中，实现一个单例模式可以用一个变量来标志当前的类已经创建过对象，如果下次获取当前类的实例时，直接返回之前创建的对象即可，如下：

// 定义一个类
function Singleton(name) {
  this.name = name;
  this.instance = null;
}
// 原型扩展类的一个方法getName()
Singleton.prototype.getName = function() {
  console.log(this.name)
};
// 获取类的实例
Singleton.getInstance = function(name) {
  if(!this.instance) {
      this.instance = new Singleton(name);
  }
  return this.instance
};

// 获取对象1
const a = Singleton.getInstance('a');
// 获取对象2
const b = Singleton.getInstance('b');
// 进行比较
console.log(a === b);

使用闭包也能够实现，如下：

function Singleton(name) {
  this.name = name;
}
// 原型扩展类的一个方法getName()
Singleton.prototype.getName = function() {
  console.log(this.name)
};
// 获取类的实例
Singleton.getInstance = (function() {
  var instance = null;
  return function(name) {
      if(!this.instance) {
          this.instance = new Singleton(name);
      }
      return this.instance
  }        
})();

// 获取对象1
const a = Singleton.getInstance('a');
// 获取对象2
const b = Singleton.getInstance('b');
// 进行比较
console.log(a === b);

也可以将上述的方法稍作修改，变成构造函数的形式，如下：

// 单例构造函数
function CreateSingleton (name) {
  this.name = name;
  this.getName();
};

// 获取实例的名字
CreateSingleton.prototype.getName = function() {
  console.log(this.name)
};
// 单例对象
const Singleton = (function(){
  var instance;
  return function (name) {
      if(!instance) {
          instance = new CreateSingleton(name);
      }
      return instance;
  }
})();

// 创建实例对象1
const a = new Singleton('a');
// 创建实例对象2
const b = new Singleton('b');

console.log(a===b); // true

三、使用场景

在前端中，很多情况都是用到单例模式，例如页面存在一个模态框的时候，只有用户点击的时候才会创建，而不是加载完成之后再创建弹窗和隐藏，并且保证弹窗全局只有一个

可以先创建一个通常的获取对象的方法，如下：

const getSingle = function( fn ){
let result;
return function(){
  return result || ( result = fn .apply(this, arguments ) );
}
};

创建弹窗的代码如下：

const createLoginLayer = function(){
var div = document.createElement( 'div' );
div.innerHTML = '我是浮窗';
div.style.display = 'none';
document.body.appendChild( div );
return div;
}; 

const createSingleLoginLayer = getSingle( createLoginLayer ); 

document.getElementById( 'loginBtn' ).onclick = function(){
var loginLayer = createSingleLoginLayer();
loginLayer.style.display = 'block';
};

上述这种实现称为惰性单例，意图解决需要时才创建类实例对象

并且Vuex、redux全局态管理库也应用单例模式的思想，如下图：

现在很多第三方库都是单例模式，多次引用只会使用同一个对象，如jquery、lodash、moment…

工厂模式

一、是什么

工厂模式是用来创建对象的一种最常用的设计模式，不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂

其就像工厂一样重复的产生类似的产品，工厂模式只需要我们传入正确的参数，就能生产类似的产品

举个例子：

编程中，在一个 A 类中通过 new 的方式实例化了类 B，那么 A 类和 B 类之间就存在关联（耦合）
后期因为需要修改了 B 类的代码和使用方式，比如构造函数中传入参数，那么 A 类也要跟着修改，一个类的依赖可能影响不大，但若有多个类依赖了 B 类，那么这个工作量将会相当的大，容易出现修改错误，也会产生很多的重复代码，这无疑是件非常痛苦的事；
这种情况下，就需要将创建实例的工作从调用方（A类）中分离，与调用方解耦，也就是使用工厂方法创建实例的工作封装起来（减少代码重复），由工厂管理对象的创建逻辑，调用方不需要知道具体的创建过程，只管使用，而降低调用者因为创建逻辑导致的错误；

二、实现

工厂模式根据抽象程度的不同可以分为：

简单工厂模式（Simple Factory）
工厂方法模式（Factory Method）
抽象工厂模式（Abstract Factory）

简单工厂模式

简单工厂模式也叫静态工厂模式，用一个工厂对象创建同一类对象类的实例

假设我们要开发一个公司岗位及其工作内容的录入信息，不同岗位的工作内容不一致

代码如下：

function Factory(career) {
    function User(career, work) {
        this.career = career 
        this.work = work
    }
    let work
    switch(career) {
        case 'coder':
            work =  ['写代码', '修Bug'] 
            return new User(career, work)
            break
        case 'hr':
            work = ['招聘', '员工信息管理']
            return new User(career, work)
            break
        case 'driver':
            work = ['开车']
            return new User(career, work)
            break
        case 'boss':
            work = ['喝茶', '开会', '审批文件']
            return new User(career, work)
            break
    }
}
let coder = new Factory('coder')
console.log(coder)
let boss = new Factory('boss')
console.log(boss)

Factory就是一个简单工厂。当我们调用工厂函数时，只需要传递name、age、career就可以获取到包含用户工作内容的实例对象

工厂方法模式

工厂方法模式跟简单工厂模式差不多，但是把具体的产品放到了工厂函数的prototype中

这样一来，扩展产品种类就不必修改工厂函数了，核心类就变成抽象类，也可以随时重写某种具体的产品

也就是相当于工厂总部不生产产品了，交给下辖分工厂进行生产；但是进入工厂之前，需要有个判断来验证你要生产的东西是否是属于我们工厂所生产范围，如果是，就丢给下辖工厂来进行生产

如下代码：

// 工厂方法
function Factory(career){
    if(this instanceof Factory){
        var a = new this[career]();
        return a;
    }else{
        return new Factory(career);
    }
}
// 工厂方法函数的原型中设置所有对象的构造函数
Factory.prototype={
    'coder': function(){
        this.careerName = '程序员'
        this.work = ['写代码', '修Bug'] 
    },
    'hr': function(){
        this.careerName = 'HR'
        this.work = ['招聘', '员工信息管理']
    },
    'driver': function () {
        this.careerName = '司机'
        this.work = ['开车']
    },
    'boss': function(){
        this.careerName = '老板'
        this.work = ['喝茶', '开会', '审批文件']
    }
}
let coder = new Factory('coder')
console.log(coder)
let hr = new Factory('hr')
console.log(hr)

工厂方法关键核心代码是工厂里面的判断this是否属于工厂，也就是做了分支判断，这个工厂只做我能做的产品

抽象工厂模式

上述简单工厂模式和工厂方法模式都是直接生成实例，但是抽象工厂模式不同，抽象工厂模式并不直接生成实例，而是用于对产品类簇的创建

通俗点来讲就是：简单工厂和工厂方法模式的工作是生产产品，那么抽象工厂模式的工作就是生产工厂的

由于JavaScript中并没有抽象类的概念，只能模拟，可以分成四部分：

用于创建抽象类的函数
抽象类
具体类
实例化具体类

上面的例子中有coder、hr、boss、driver四种岗位，其中coder可能使用不同的开发语言进行开发，比如JavaScript、Java等等。那么这两种语言就是对应的类簇

示例代码如下：

let CareerAbstractFactory = function(subType, superType) {
  // 判断抽象工厂中是否有该抽象类
  if (typeof CareerAbstractFactory[superType] === 'function') {
    // 缓存类
    function F() {}
    // 继承父类属性和方法
    F.prototype = new CareerAbstractFactory[superType]()
    // 将子类的constructor指向父类
    subType.constructor = subType;
    // 子类原型继承父类
    subType.prototype = new F()
  } else {
    throw new Error('抽象类不存在')
  }
}

上面代码中CareerAbstractFactory就是一个抽象工厂方法，该方法在参数中传递子类和父类，在方法体内部实现了子类对父类的继承

三、应用场景

从上面可看到，简单简单工厂的优点就是我们只要传递正确的参数，就能获得所需的对象，而不需要关心其创建的具体细节

应用场景也容易识别，有构造函数的地方，就应该考虑简单工厂，但是如果函数构建函数太多与复杂，会导致工厂函数变得复杂，所以不适合复杂的情况

抽象工厂模式一般用于严格要求以面向对象思想进行开发的超大型项目中，我们一般常规的开发的话一般就是简单工厂和工厂方法模式会用的比较多一些

综上，工厂模式适用场景如下：

如果你不想让某个子系统与较大的那个对象之间形成强耦合，而是想运行时从许多子系统中进行挑选的话，那么工厂模式是一个理想的选择
将new操作简单封装，遇到new的时候就应该考虑是否用工厂模式；
需要依赖具体环境创建不同实例，这些实例都有相同的行为,这时候我们可以使用工厂模式，简化实现的过程，同时也可以减少每种对象所需的代码量，有利于消除对象间的耦合，提供更大的灵活性

策略模式

一、是什么

策略模式（Strategy Pattern）指的是定义一系列的算法，把它们一个个封装起来，目的就是将算法的使用与算法的实现分离开来

一个基于策略模式的程序至少由两部分组成：

策略类，策略类封装了具体的算法，并负责具体的计算过程
环境类Context，Context 接受客户的请求，随后把请求委托给某一个策略类

二、使用

举个例子，公司的年终奖是根据员工的工资和绩效来考核的，绩效为A的人，年终奖为工资的4倍，绩效为B的人，年终奖为工资的3倍，绩效为C的人，年终奖为工资的2倍

若使用if来实现，代码则如下：

var calculateBouns = function(salary,level) {
    if(level === 'A') {
        return salary * 4;
    }
    if(level === 'B') {
        return salary * 3;
    }
    if(level === 'C') {
        return salary * 2;
    }
};
// 调用如下：
console.log(calculateBouns(4000,'A')); // 16000
console.log(calculateBouns(2500,'B')); // 7500

从上述可有看到，函数内部包含过多if...else，并且后续改正的时候，需要在函数内部添加逻辑，违反了开放封闭原则

而如果使用策略模式，就是先定义一系列算法，把它们一个个封装起来，将不变的部分和变化的部分隔开，如下：

var obj = {
        "A": function(salary) {
            return salary * 4;
        },
        "B" : function(salary) {
            return salary * 3;
        },
        "C" : function(salary) {
            return salary * 2;
        } 
};
var calculateBouns =function(level,salary) {
    return obj[level](salary);
};
console.log(calculateBouns('A',10000)); // 40000

上述代码中，obj对应的是策略类，而calculateBouns对应上下通信类

又比如实现一个表单校验的代码，常常会像如下写法：

var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function(){
    if(registerForm.userName.value === '') {
        alert('用户名不能为空');
        return;
    }
    if(registerForm.password.value.length < 6) {
        alert("密码的长度不能小于6位");
        return;
    }
    if(!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) {
        alert("手机号码格式不正确");
        return;
    }
}

上述代码包含多处if语句，并且违反了开放封闭原则，如果应用中还有其他的表单，需要重复编写代码

此处也可以使用策略模式进行重构校验，第一步确定不变的内容，即策略规则对象，如下：

var strategy = {
    isNotEmpty: function(value,errorMsg) {
        if(value === '') {
            return errorMsg;
        }
    },
    // 限制最小长度
    minLength: function(value,length,errorMsg) {
        if(value.length < length) {
            return errorMsg;
        }
    },
    // 手机号码格式
    mobileFormat: function(value,errorMsg) {
        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
            return errorMsg;
        }
    } 
};

然后找出变的地方，作为环境类context，负责接收用户的要求并委托给策略规则对象，如下Validator类：

var Validator = function(){
        this.cache = [];  // 保存效验规则
};
Validator.prototype.add = function(dom,rule,errorMsg) {
    var str = rule.split(":");
    this.cache.push(function(){
        // str 返回的是 minLength:6 
        var strategy = str.shift();
        str.unshift(dom.value); // 把input的value添加进参数列表
        str.push(errorMsg);  // 把errorMsg添加进参数列表
        return strategys[strategy].apply(dom,str);
    });
};
Validator.prototype.start = function(){
    for(var i = 0, validatorFunc; validatorFunc = this.cache[i++]; ) {
        var msg = validatorFunc(); // 开始效验 并取得效验后的返回信息
        if(msg) {
            return msg;
        }
    }
};

通过validator.add方法添加校验规则和错误信息提示，使用如下：

var validateFunc = function(){
    var validator = new Validator(); // 创建一个Validator对象
    /* 添加一些效验规则 */
    validator.add(registerForm.userName,'isNotEmpty','用户名不能为空');
    validator.add(registerForm.password,'minLength:6','密码长度不能小于6位');
    validator.add(registerForm.userName,'mobileFormat','手机号码格式不正确');

    var errorMsg = validator.start(); // 获得效验结果
    return errorMsg; // 返回效验结果
};
var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function(){
    var errorMsg = validateFunc();
    if(errorMsg){
        alert(errorMsg);
        return false;
    }
}

上述通过策略模式完成表单的验证，并且可以随时调用，在修改表单验证规则的时候，也非常方便，通过传递参数即可调用

三、应用场景

从上面可以看到，使用策略模式的优点有如下：

策略模式利用组合，委托等技术和思想，有效的避免很多if条件语句
策略模式提供了开放-封闭原则，使代码更容易理解和扩展
策略模式中的代码可以复用

策略模式不仅仅用来封装算法，在实际开发中，通常会把算法的含义扩散开来，使策略模式也可以用来封装一系列的“业务规则”

只要这些业务规则指向的目标一致，并且可以被替换使用，我们就可以用策略模式来封装它们

代理模式

一、是什么

代理模式（Proxy Pattern）是为一个对象提供一个代用品或占位符，以便控制对它的访问

代理模式的关键是，当客户不方便直接访问一个对象或者不满足需要时，提供一个替身对象来控制这个对象的访问，客户实际上访问的是替身对象

在生活中，代理模式的场景是十分常见的，例如我们现在如果有租房、买房的需求，更多的是去找链家等房屋中介机构，而不是直接寻找想卖房或出租房的人谈。此时，链家起到的作用就是代理的作用

二、使用

在ES6中，存在proxy构建函数能够让我们轻松使用代理模式：

const proxy = new Proxy(target, handler);

关于Proxy的使用可以翻看以前的文章

而按照功能来划分，javascript代理模式常用的有：

缓存代理
虚拟代理

缓存代理

缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前一致，则可以直接返回前面存储的运算结果

如实现一个求积乘的函数，如下：

var muti = function () {
  console.log("开始计算乘积");
  var a = 1;
  for (var i = 0, l = arguments.length; i < l; i++) {
    a = a * arguments[i];
  }
  return a;
};

现在加入缓存代理，如下：

var proxyMult = (function () {
  var cache = {};
  return function () {
    var args = Array.prototype.join.call(arguments, ",");
    if (args in cache) {
      return cache[args];
    }
    return (cache[args] = mult.apply(this, arguments));
  };
})();

proxyMult(1, 2, 3, 4); // 输出:24
proxyMult(1, 2, 3, 4); // 输出:24

当第二次调用 proxyMult(1, 2, 3, 4) 时，本体 mult 函数并没有被计算，proxyMult 直接返回了之前缓存好的计算结果

虚拟代理

虚拟代理把一些开销很大的对象，延迟到真正需要它的时候才去创建

常见的就是图片预加载功能：

未使用代理模式如下：

let MyImage = (function(){
    let imgNode = document.createElement( 'img' );
    document.body.appendChild( imgNode );
    // 创建一个Image对象，用于加载需要设置的图片
    let img = new Image;

    img.onload = function(){
        // 监听到图片加载完成后，设置src为加载完成后的图片
        imgNode.src = img.src;
    };

    return {
        setSrc: function( src ){
            // 设置图片的时候，设置为默认的loading图
            imgNode.src = 'https://img.zcool.cn/community/01deed576019060000018c1bd2352d.gif';
            // 把真正需要设置的图片传给Image对象的src属性
            img.src = src;
        }
    }
})();

MyImage.setSrc( 'https://xxx.jpg' );

MyImage对象除了负责给img节点设置src外，还要负责预加载图片，违反了面向对象设计的原则——单一职责原则

上述过程loding则是耦合进MyImage对象里的，如果以后某个时候，我们不需要预加载显示loading这个功能了，就只能在MyImage对象里面改动代码

使用代理模式，代码则如下：

// 图片本地对象，负责往页面中创建一个img标签，并且提供一个对外的setSrc接口
let myImage = (function(){
    let imgNode = document.createElement( 'img' );
    document.body.appendChild( imgNode );

    return {
        //setSrc接口，外界调用这个接口，便可以给该img标签设置src属性
        setSrc: function( src ){
            imgNode.src = src;
        }
    }
})();
// 代理对象，负责图片预加载功能
let proxyImage = (function(){
    // 创建一个Image对象，用于加载需要设置的图片
    let img = new Image;
    img.onload = function(){
        // 监听到图片加载完成后，给被代理的图片本地对象设置src为加载完成后的图片
        myImage.setSrc( this.src );
    }
    return {
        setSrc: function( src ){
            // 设置图片时，在图片未被真正加载好时，以这张图作为loading，提示用户图片正在加载
            myImage.setSrc( 'https://img.zcool.cn/community/01deed576019060000018c1bd2352d.gif' );
            img.src = src;
        }
    }
})();

proxyImage.setSrc( 'https://xxx.jpg' );

使用代理模式后，图片本地对象负责往页面中创建一个img标签，并且提供一个对外的setSrc接口；

代理对象负责在图片未加载完成之前，引入预加载的loading图，负责了图片预加载的功能

上述并没有改变或者增加MyImage的接口，但是通过代理对象，实际上给系统添加了新的行为

并且上述代理模式可以发现，代理和本体接口的一致性，如果有一天不需要预加载，那么就不需要代理对象，可以选择直接请求本体。其中关键是代理对象和本体都对外提供了 setSrc 方法

‘

三、应用场景

现在的很多前端框架或者状态管理框架都使用代理模式，用与监听变量的变化

使用代理模式代理对象的访问的方式，一般又被称为拦截器，比如我们在项目中经常使用 Axios 的实例来进行 HTTP 的请求，使用拦截器 interceptor 可以提前对请求前的数据服务器返回的数据进行一些预处理

以及上述应用到的缓存代理和虚拟代理

发布订阅模式和观察者模式

一、观察者模式

观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新

观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯

例如生活中，我们可以用报纸期刊的订阅来形象的说明，当你订阅了一份报纸，每天都会有一份最新的报纸送到你手上，有多少人订阅报纸，报社就会发多少份报纸

报社和订报纸的客户就形成了一对多的依赖关系

实现代码如下：

被观察者模式

class Subject {

  constructor() {
    this.observerList = [];
  }

  addObserver(observer) {
    this.observerList.push(observer);
  }

  removeObserver(observer) {
    const index = this.observerList.findIndex(o => o.name === observer.name);
    this.observerList.splice(index, 1);
  }

  notifyObservers(message) {
    const observers = this.observeList;
    observers.forEach(observer => observer.notified(message));
  }

}

观察者：

class Observer {

  constructor(name, subject) {
    this.name = name;
    if (subject) {
      subject.addObserver(this);
    }
  }

  notified(message) {
    console.log(this.name, 'got message', message);
  }
}

使用代码如下：

const subject = new Subject();
const observerA = new Observer('observerA', subject);
const observerB = new Observer('observerB');
subject.addObserver(observerB);
subject.notifyObservers('Hello from subject');
subject.removeObserver(observerA);
subject.notifyObservers('Hello again');

上述代码中，观察者主动申请加入被观察者的列表，被观察者主动将观察者加入列表

二、发布订阅模式

发布-订阅是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的接收者（称为订阅者）。而是将发布的消息分为不同的类别，无需了解哪些订阅者（如果有的话）可能存在

同样的，订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，无需了解哪些发布者存在

实现代码如下：

class PubSub {
  constructor() {
    this.messages = {};
    this.listeners = {};
  }
  // 添加发布者
  publish(type, content) {
    const existContent = this.messages[type];
    if (!existContent) {
      this.messages[type] = [];
    }
    this.messages[type].push(content);
  }
  // 添加订阅者
  subscribe(type, cb) {
    const existListener = this.listeners[type];
    if (!existListener) {
      this.listeners[type] = [];
    }
    this.listeners[type].push(cb);
  }
  // 通知
  notify(type) {
    const messages = this.messages[type];
    const subscribers = this.listeners[type] || [];
    subscribers.forEach((cb, index) => cb(messages[index]));
  }
}

发布者代码如下：

class Publisher {
  constructor(name, context) {
    this.name = name;
    this.context = context;
  }
  publish(type, content) {
    this.context.publish(type, content);
  }
}

订阅者代码如下：

class Subscriber {
  constructor(name, context) {
    this.name = name;
    this.context = context;
  }
  subscribe(type, cb) {
    this.context.subscribe(type, cb);
  }
}

使用代码如下：

const TYPE_A = 'music';
const TYPE_B = 'movie';
const TYPE_C = 'novel';

const pubsub = new PubSub();

const publisherA = new Publisher('publisherA', pubsub);
publisherA.publish(TYPE_A, 'we are young');
publisherA.publish(TYPE_B, 'the silicon valley');
const publisherB = new Publisher('publisherB', pubsub);
publisherB.publish(TYPE_A, 'stronger');
const publisherC = new Publisher('publisherC', pubsub);
publisherC.publish(TYPE_C, 'a brief history of time');

const subscriberA = new Subscriber('subscriberA', pubsub);
subscriberA.subscribe(TYPE_A, res => {
  console.log('subscriberA received', res)
});
const subscriberB = new Subscriber('subscriberB', pubsub);
subscriberB.subscribe(TYPE_C, res => {
  console.log('subscriberB received', res)
});
const subscriberC = new Subscriber('subscriberC', pubsub);
subscriberC.subscribe(TYPE_B, res => {
  console.log('subscriberC received', res)
});

pubsub.notify(TYPE_A);
pubsub.notify(TYPE_B);
pubsub.notify(TYPE_C);

上述代码，发布者和订阅者需要通过发布订阅中心进行关联，发布者的发布动作和订阅者的订阅动作相互独立，无需关注对方，消息派发由发布订阅中心负责

三、区别

两种设计模式思路是一样的，举个生活例子：

观察者模式：某公司给自己员工发月饼发粽子，是由公司的行政部门发送的，这件事不适合交给第三方，原因是“公司”和“员工”是一个整体
发布-订阅模式：某公司要给其他人发各种快递，因为“公司”和“其他人”是独立的，其唯一的桥梁是“快递”，所以这件事适合交给第三方快递公司解决

上述过程中，如果公司自己去管理快递的配送，那公司就会变成一个快递公司，业务繁杂难以管理，影响公司自身的主营业务，因此使用何种模式需要考虑什么情况两者是需要耦合的

两者区别如下图：

在观察者模式中，观察者是知道Subject的，Subject一直保持对观察者进行记录。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。它们只有通过消息代理进行通信。
在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。
观察者模式大多数时候是同步的，比如当事件触发，Subject就会去调用观察者的方法。而发布-订阅模式大多数时候是异步的（使用消息队列）

其他完整的设计模式（感兴趣可以看看）

23种设计模式

参考文献：

[语音仓库]: “https://github.com/febobo/web-interview “

前端面试大全TypeScript

2022-11-02

技术面试 / TypeScript

前端面试题大全（TypeScript）

前端面试题类目分类

HTML5 + CSS3
JavaScript
Vue + Vue3
React
Webpack
服务端

考点频率：♥︎ 、 ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎ ♥︎

TypeScript

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对 typescript 的理解？与 javascript 的区别？

一、是什么

TypeScript 是 JavaScript 的类型的超集，支持ES6语法，支持面向对象编程的概念，如类、接口、继承、泛型等

其是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误

同时扩展了 JavaScript 的语法，所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作

为了保证兼容性，typescript在编译阶段需要编译器编译成纯Javascript来运行，是为大型应用之开发而设计的语言，如下：

tsx文件如下：

const hello : string = "Hello World!"
console.log(hello)

编译文件后：

const hello = "Hello World!"
console.log(hello)

二、特性

typescript的特性主要有如下：

类型批注和编译时类型检查：在编译时批注变量类型
类型推断：ts中没有批注变量类型会自动推断变量的类型
类型擦除：在编译过程中批注的内容和接口会在运行时利用工具擦除
接口：ts中用接口来定义对象类型
枚举：用于取值被限定在一定范围内的场景
Mixin：可以接受任意类型的值
泛型编程：写代码时使用一些以后才指定的类型
名字空间：名字只在该区域内有效，其他区域可重复使用该名字而不冲突
元组：元组合并了不同类型的对象，相当于一个可以装不同类型数据的数组
…

类型批注

通过类型批注提供在编译时启动类型检查的静态类型，这是可选的，而且可以忽略而使用JavaScript常规的动态类型

function Add(left: number, right: number): number {
 return left + right;
}

对于基本类型的批注是number、bool和string，而弱或动态类型的结构则是any类型

类型推断

当类型没有给出时，TypeScript编译器利用类型推断来推断类型，如下：

let str = 'string'

变量str被推断为字符串类型，这种推断发生在初始化变量和成员，设置默认参数值和决定函数返回值时

如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态any类型

接口

接口简单来说就是用来描述对象的类型数据的类型有number、 null、 string等数据格式，对象的类型就是用接口来描述的

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

三、区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法
TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译
TypeScript 文件的后缀名 .ts （.ts，.tsx，.dts），JavaScript 文件是 .js
在编写 TypeScript 的文件的时候就会自动编译成 js 文件

更多的区别如下图所示：

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ typescript 的数据类型有哪些?

一、是什么

typescript 和 javascript几乎一样，拥有相同的数据类型，另外在javascript基础上提供了更加实用的类型供开发使用

在开发阶段，可以为明确的变量定义为某种类型，这样typescript就能在编译阶段进行类型检查，当类型不合符预期结果的时候则会出现错误提示

二、有哪些

typescript 的数据类型主要有如下：

boolean（布尔类型）
number（数字类型）
string（字符串类型）
array（数组类型）
tuple（元组类型）
enum（枚举类型）
any（任意类型）
null 和 undefined 类型
Symbol 类型
bigint类型
void 类型
never 类型
object 对象类型
unknown

boolean

布尔类型

let flag:boolean = true;
// flag = 123; // 错误
flag = false;  //正确

number

数字类型，和javascript一样，typescript的数值类型都是浮点数，可支持二进制、八进制、十进制和十六进制

let num:number = 123;
// num = '456'; // 错误
num = 456;  //正确

进制表示：

let decLiteral: number = 6; // 十进制
let hexLiteral: number = 0xf00d; // 十六进制
let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744; // 八进制

string

字符串类型，和JavaScript一样，可以使用双引号（"）或单引号（'）表示字符串

let str:string = 'this is ts';
str = 'test';

作为超集，当然也可以使用模版字符串``进行包裹，通过 ${} 嵌入变量

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }

array

数组类型，跟javascript一致，通过[]进行包裹，有两种写法：

方式一：元素类型后面接上 []

 let arr:string[] = ['12', '23'];
 arr = ['45', '56'];

方式二：使用数组泛型，Array<元素类型>：

let arr:Array<number> = [1, 2];
arr = ['45', '56'];

tuple

元祖类型，允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

let tupleArr:[number, string, boolean];
tupleArr = [12, '34', true]; //ok
typleArr = [12, '34'] // no ok

赋值的类型、位置、个数需要和定义（生明）的类型、位置、个数一致

enum

enum类型是对JavaScript标准数据类型的一个补充，使用枚举类型可以为一组数值赋予友好的名字

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

any

可以指定任何类型的值，在编程阶段还不清楚类型的变量指定一个类型，不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查，这时候可以使用any类型

使用any类型允许被赋值为任意类型，甚至可以调用其属性、方法

let num:any = 123;
num = 'str';
num = true;

定义存储各种类型数据的数组时，示例代码如下：

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

null 和和 undefined

在 JavaScript 中 null 表示 “什么都没有”，是一个只有一个值的特殊类型，表示一个空对象引用，而undefined表示一个没有设置值的变量

默认情况下null和undefined是所有类型的子类型，就是说你可以把 null 和 undefined 赋值给 number 类型的变量

let num:number | undefined; // 数值类型 或者 undefined
console.log(num); // 正确
num = 123;
console.log(num); // 正确

但是ts配置了--strictNullChecks标记，null和undefined只能赋值给void和它们各自

void

用于标识方法返回值的类型，表示该方法没有返回值。

function hello(): void {
    alert("Hello Runoob");
}

Symbol

symbol我们平时用的比较少，所以可能了解也不是很多，这里就详细来说说symbol。

（1）symbol 基本使用

symbol 是 ES6 新增的一种基本数据类型，它用来表示独一无二的值，可以通过 Symbol 构造函数生成。

const s = Symbol(); 
typeof s; // symbol

注意：Symbol 前面不能加 new关键字，直接调用即可创建一个独一无二的 symbol 类型的值。

可以在使用 Symbol 方法创建 symbol 类型值的时候传入一个参数，这个参数需要是一个字符串。如果传入的参数不是字符串，会先自动调用传入参数的 toString 方法转为字符串：

const s1 = Symbol("TypeScript"); 
const s2 = Symbol("Typescript"); 
console.log(s1 === s2); // false

上面代码的第三行可能会报一个错误：This condition will always return ‘false’ since the types ‘unique symbol’ and ‘unique symbol’ have no overlap. 这是因为编译器检测到这里的 s1 === s2 始终是false，所以编译器提醒这代码写的多余，建议进行优化。

上面使用Symbol创建了两个symbol对象，方法中都传入了相同的字符串，但是两个symbol值仍然是false，这就说明了 Symbol 方法会返回一个独一无二的值。Symbol 方法传入的这个字符串，就是方便我们区分 symbol 值的。可以调用 symbol 值的 toString 方法将它转为字符串：

const s1 = Symbol("Typescript"); 
console.log(s1.toString());  // 'Symbol(Typescript)'
console.log(Boolean(s));     // true 
console.log(!s);             // false

在TypeScript中使用symbol就是指定一个值的类型为symbol类型：

let a: symbol = Symbol()

TypeScript 中还有一个 unique symbol 类型，它是symbol的子类型，这种类型的值只能由Symbol()或Symbol.for()创建，或者通过指定类型来指定变量是这种类型。这种类型的值只能用于常量的定义和用于属性名。需要注意，定义unique symbol类型的值，必须用 const 而不能用let来声明。下面来看在TypeScript中使用Symbol值作为属性名的例子：

const key1: unique symbol = Symbol()
let key2: symbol = Symbol()
const obj = {
    [key1]: 'value1',
    [key2]: 'value2'
}
console.log(obj[key1]) // value1
console.log(obj[key2]) // error 类型“symbol”不能作为索引类型使用。

（2）symbol 作为属性名

在ES6中，对象的属性是支持表达式的，可以使用于一个变量来作为属性名，这对于代码的简化有很多用处，表达式必须放在大括号内：

let prop = "name"; 
const obj = { 
  [prop]: "TypeScript" 
};
console.log(obj.name); // 'TypeScript'

symbol 也可以作为属性名，因为symbol的值是独一无二的，所以当它作为属性名时，不会与其他任何属性名重复。当需要访问这个属性时，只能使用这个symbol值来访问（必须使用方括号形式来访问）：

let name = Symbol(); 
let obj = { 
  [name]: "TypeScript" 
};
console.log(obj); // { Symbol(): 'TypeScript' }
console.log(obj[name]); // 'TypeScript' 
console.log(obj.name);  // undefined

在使用obj.name访问时，实际上是字符串name，这和访问普通字符串类型的属性名是一样的，要想访问属性名为symbol类型的属性时，必须使用方括号。方括号中的name才是我们定义的symbol类型的变量name。

（3）symbol 属性名遍历

使用 Symbol 类型值作为属性名，这个属性是不会被 for…in遍历到的，也不会被 Object.keys() 、 Object.getOwnPropertyNames() 、 JSON.stringify() 等方法获取到：

const name = Symbol("name"); 
const obj = { 
  [name]: "TypeScript", 
  age: 18 
};
for (const key in obj) { 
  console.log(key); 
}  
// => 'age' 
console.log(Object.keys(obj));  // ['age'] 
console.log(Object.getOwnPropertyNames(obj));  // ['age'] 
console.log(JSON.stringify(obj)); // '{ "age": 18 }

虽然这些方法都不能访问到Symbol类型的属性名，但是Symbol类型的属性并不是私有属性，可以使用 Object.getOwnPropertySymbols 方法获取对象的所有symbol类型的属性名：

const name = Symbol("name"); 
const obj = { 
  [name]: "TypeScript", 
  age: 18 
};
const SymbolPropNames = Object.getOwnPropertySymbols(obj); 
console.log(SymbolPropNames); // [ Symbol(name) ] 
console.log(obj[SymbolPropNames[0]]); // 'TypeScript'

除了这个方法，还可以使用ES6提供的 Reflect 对象的静态方法 Reflect.ownKeys ，它可以返回所有类型的属性名，Symbol 类型的也会返回：

const name = Symbol("name"); 
const obj = { 
  [name]: "TypeScript", 
  age: 18 
};
console.log(Reflect.ownKeys(obj)); // [ 'age', Symbol(name) ]

（4）symbol 静态方法

Symbol 包含两个静态方法， for 和 keyFor 。

1）Symbol.for()

用Symbol创建的symbol类型的值都是独一无二的。使用 Symbol.for 方法传入字符串，会先检查有没有使用该字符串调用 Symbol.for 方法创建的 symbol 值。如果有，返回该值；如果没有，则使用该字符串新创建一个。使用该方法创建 symbol 值后会在全局范围进行注册。

const iframe = document.createElement("iframe"); 
iframe.src = String(window.location); 
document.body.appendChild(iframe); 

iframe.contentWindow.Symbol.for("TypeScript") === Symbol.for("TypeScript"); // true // 注意：如果你在JavaScript环境中这段代码是没有问题的，但是如果在TypeScript开发环境中，可能会报错：类型“Window”上不存在属性“Symbol”。 // 因为这里编译器推断出iframe.contentWindow是Window类型，但是TypeScript的声明文件中，对Window的定义缺少Symbol这个字段，所以会报错，

上面代码中，创建了一个iframe节点并把它放在body中，通过这个 iframe 对象的 contentWindow 拿到这个 iframe 的 window 对象，在 iframe.contentWindow上添加一个值就相当于在当前页面定义一个全局变量一样。可以看到，在 iframe 中定义的键为 TypeScript 的 symbol 值在和在当前页面定义的键为’TypeScript’的symbol 值相等，说明它们是同一个值。

2）Symbol.keyFor()

该方法传入一个 symbol 值，返回该值在全局注册的键名：

const sym = Symbol.for("TypeScript"); 
console.log(Symbol.keyFor(sym)); // 'TypeScript'

bigint

BigInt是ES6中新引入的数据类型，它是一种内置对象，它提供了一种方法来表示大于 2- 1 的整数，BigInt可以表示任意大的整数。

使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了JavaScript构造函数 Number 能够表示的安全整数范围。

我们知道，在 JavaScript 中采用双精度浮点数，这导致精度有限，比如 Number.MAX_SAFE_INTEGER 给出了可以安全递增的最大可能整数，即2- 1，来看一个例子:

const max = Number.MAX_SAFE_INTEGER;
const max1 = max + 1
const max2 = max + 2
max1 === max2     // true

可以看到，最终返回了true，这就是超过精读范围造成的问题，而BigInt正是解决这类问题而生的:

const max = BigInt(Number.MAX_SAFE_INTEGER);
const max1 = max + 1n
const max2 = max + 2n
max1 === max2    // false

这里需要用 BigInt(number) 把 Number 转化为 BigInt，同时如果类型是 BigInt ，那么数字后面需要加 n。

在TypeScript中，number 类型虽然和 BigInt 都表示数字，但是实际上两者类型是完全不同的:

declare let foo: number;
declare let bar: bigint;
foo = bar; // error: Type 'bigint' is not assignable to type 'number'.
bar = foo; // error: Type 'number' is not assignable to type 'bigint'.

never

never是其他类型（包括null和 undefined）的子类型，可以赋值给任何类型，代表从不会出现的值

但是没有类型是 never 的子类型，这意味着声明 never 的变量只能被 never 类型所赋值。

never 类型一般用来指定那些总是会抛出异常、无限循环

let a:never;
a = 123; // 错误的写法

a = (() => { // 正确的写法
  throw new Error('错误');
})()

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

object

对象类型，非原始类型，常见的形式通过{}进行包裹

let obj:object;
obj = {name: 'Wang', age: 25};

unknown

unknown 是TypeScript在3.0版本新增的类型，主要用来描述类型并不确定的变量。它看起来和any很像，但是还是有区别的，unknown相对于any更安全。

对于any，来看一个例子：

let value: any
console.log(value.name)
console.log(value.toFixed())
console.log(value.length)

上面这些语句都不会报错，因为value是any类型，所以后面三个操作都有合法的情况，当value是一个对象时，访问name属性是没问题的；当value是数值类型的时候，调用它的toFixed方法没问题；当value是字符串或数组时获取它的length属性是没问题的。

当指定值为unknown类型的时候，如果没有缩小类型范围的话，是不能对它进行任何操作的。总之，unknown类型的值不能随便操作。那什么是类型范围缩小呢？下面来看一个例子：

function getValue(value: unknown): string {
  if (value instanceof Date) { 
    return value.toISOString();
  }
  return String(value);
}

这里由于把value的类型缩小为Date实例的范围内，所以进行了value.toISOString()，也就是使用ISO标准将 Date 对象转换为字符串。

使用以下方式也可以缩小类型范围：

let result: unknown;
if (typeof result === 'number') {
  result.toFixed();
}

关于 unknown 类型，在使用时需要注意以下几点：

任何类型的值都可以赋值给 unknown 类型：

let value1: unknown;
value1 = "a";
value1 = 123;

unknown 不可以赋值给其它类型，只能赋值给 unknown 和 any 类型：

let value2: unknown;
let value3: string = value2; // error 不能将类型“unknown”分配给类型“string”
value1 = value2;

unknown 类型的值不能进行任何操作：

let value4: unknown;
value4 += 1; // error 对象的类型为 "unknown"

只能对 unknown 进行等或不等操作，不能进行其它操作：

value1 === value2;
value1 !== value2;
value1 += value2;  // error

unknown 类型的值不能访问其属性、作为函数调用和作为类创建实例：

let value5: unknown;
value5.age;   // error
value5();     // error
new value5(); // error

在实际使用中，如果有类型无法确定的情况，要尽量避免使用 any，因为 any 会丢失类型信息，一旦一个类型被指定为 any，那么在它上面进行任何操作都是合法的，所以会有意想不到的情况发生。因此如果遇到无法确定类型的情况，要先考虑使用 unknown。

三、总结

和javascript基本一致，也分成：

基本类型
引用类型

在基础类型上，typescript增添了void、any、emum等原始类型

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ TypeScript 中枚举类型的理解？应用场景？

一、是什么

枚举是一个被命名的整型常数的集合，用于声明一组命名的常数,当一个变量有几种可能的取值时,可以将它定义为枚举类型

通俗来说，枚举就是一个对象的所有可能取值的集合

在日常生活中也很常见，例如表示星期的SUNDAY、MONDAY、TUESDAY、WEDNESDAY、THURSDAY、FRIDAY、SATURDAY就可以看成是一个枚举

枚举的说明与结构和联合相似，其形式为：

enum 枚举名{
    标识符①[=整型常数],
    标识符②[=整型常数],
    ...
    标识符N[=整型常数],
}枚举变量;

二、使用

枚举的使用是通过enum关键字进行定义，形式如下：

enum xxx { ... }

声明关键字为枚举类型的方式如下：

// 声明d为枚举类型Direction
let d: Direction;

类型可以分成：

数字枚举
字符串枚举
异构枚举

数字枚举

当我们声明一个枚举类型是,虽然没有给它们赋值,但是它们的值其实是默认的数字类型,而且默认从0开始依次累加:

enum Direction {
    Up,   // 值默认为 0
    Down, // 值默认为 1
    Left, // 值默认为 2
    Right // 值默认为 3
}

console.log(Direction.Up === 0); // true
console.log(Direction.Down === 1); // true
console.log(Direction.Left === 2); // true
console.log(Direction.Right === 3); // true

如果我们将第一个值进行赋值后，后面的值也会根据前一个值进行累加1：

enum Direction {
    Up = 10,
    Down,
    Left,
    Right
}

console.log(Direction.Up, Direction.Down, Direction.Left, Direction.Right); // 10 11 12 13

字符串枚举

枚举类型的值其实也可以是字符串类型：

enum Direction {
    Up = 'Up',
    Down = 'Down',
    Left = 'Left',
    Right = 'Right'
}

console.log(Direction['Right'], Direction.Up); // Right Up

如果设定了一个变量为字符串之后，后续的字段也需要赋值字符串，否则报错：

enum Direction {
 Up = 'UP',
 Down, // error TS1061: Enum member must have initializer
 Left, // error TS1061: Enum member must have initializer
 Right // error TS1061: Enum member must have initializer
}

异构枚举

即将数字枚举和字符串枚举结合起来混合起来使用，如下：

enum BooleanLikeHeterogeneousEnum {
    No = 0,
    Yes = "YES",
}

通常情况下我们很少会使用异构枚举

本质

现在一个枚举的案例如下：

enum Direction {
    Up,
    Down,
    Left,
    Right
}

通过编译后，javascript如下：

var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 0] = "Up";
    Direction[Direction["Down"] = 1] = "Down";
    Direction[Direction["Left"] = 2] = "Left";
    Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));

上述代码可以看到， Direction[Direction["Up"] = 0] = "Up"可以分成

Direction[“Up”] = 0
Direction[0] = “Up”

所以定义枚举类型后，可以通过正反映射拿到对应的值，如下：

enum Direction {
    Up,
    Down,
    Left,
    Right
}

console.log(Direction.Up === 0); // true
console.log(Direction[0]); // Up

并且多处定义的枚举是可以进行合并操作，如下：

enum Direction {
    Up = 'Up',
    Down = 'Down',
    Left = 'Left',
    Right = 'Right'
}

enum Direction {
    Center = 1
}

编译后，js代码如下：

var Direction;
(function (Direction) {
    Direction["Up"] = "Up";
    Direction["Down"] = "Down";
    Direction["Left"] = "Left";
    Direction["Right"] = "Right";
})(Direction || (Direction = {}));
(function (Direction) {
    Direction[Direction["Center"] = 1] = "Center";
})(Direction || (Direction = {}));

可以看到，Direction对象属性回叠加

三、应用场景

就拿回生活的例子，后端返回的字段使用 0 - 6 标记对应的日期，这时候就可以使用枚举可提高代码可读性，如下：

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

包括后端日常返回0、1 等等状态的时候，我们都可以通过枚举去定义，这样可以提高代码的可读性，便于后续的维护

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对 TypeScript 中接口的理解？应用场景？

一、是什么

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法

简单来讲，一个接口所描述的是一个对象相关的属性和方法，但并不提供具体创建此对象实例的方法

typescript的核心功能之一就是对类型做检测，虽然这种检测方式是“鸭式辨型法”，而接口的作用就是为为这些类型命名和为你的代码或第三方代码定义一个约定

二、使用方式

接口定义如下：

interface interface_name {
}

例如有一个函数，这个函数接受一个 User 对象，然后返回这个 User 对象的 name 属性:

const getUserName = (user) => user.name

可以看到，参数需要有一个user的name属性，可以通过接口描述user参数的结构

interface User {
    name: string
    age: number
}

const getUserName = (user: User) => user.name

这些属性并不一定全部实现，上述传入的对象必须拥有name和age属性，否则typescript在编译阶段会报错，如下图：

如果不想要age属性的话，这时候可以采用可选属性，如下表示：

interface User {
    name: string
    age?: number
}

这时候age属性则可以是number类型或者undefined类型

有些时候，我们想要一个属性变成只读属性，在typescript只需要使用readonly声明，如下：

interface User {
    name: string
    age?: number
    readonly isMale: boolean
}

当我们修改属性的时候，就会出现警告，如下所示：

这是属性中有一个函数，可以如下表示：

interface User {
    name: string
    age?: number
    readonly isMale: boolean
    say: (words: string) => string
}

如果传递的对象不仅仅是上述的属性，这时候可以使用：

类型推断

interface User {
    name: string
    age: number
}

const getUserName = (user: User) => user.name
getUserName({color: 'yellow'} as User)

给接口添加字符串索引签名

interface User {
    name: string
    age: number
    [propName: string]: any;
}

接口还能实现继承，如下图：

也可以继承多个，父类通过逗号隔开，如下：

interface Father {
    color: String
}

interface Mother {
    height: Number
}

interface Son extends Father,Mother{
    name: string
    age: Number
}

三、应用场景

例如在javascript中定义一个函数，用来获取用户的姓名和年龄：

const getUserInfo = function(user) {
    // ...
    return name: ${user.name}, age: ${user.age}
}

如果多人开发的都需要用到这个函数的时候，如果没有注释，则可能出现各种运行时的错误，这时候就可以使用接口定义参数变量：

// 先定义一个接口
interface IUser {
  name: string;
  age: number;
}

const getUserInfo = (user: IUser): string => {
  return `name: ${user.name}, age: ${user.age}`;
};

// 正确的调用
getUserInfo({name: "koala", age: 18});

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对 TypeScript 中类的理解？应用场景？

一、是什么

类（Class）是面向对象程序设计（OOP，Object-Oriented Programming）实现信息封装的基础

传统的面向对象语言基本都是基于类的，JavaScript 基于原型的方式让开发者多了很多理解成本

在 ES6 之后，JavaScript 拥有了 class 关键字，虽然本质依然是构造函数，但是使用起来已经方便了许多

但是 JavaScript 的class依然有一些特性还没有加入，比如修饰符和抽象类

TypeScript 的 class 支持面向对象的所有特性，比如类、接口等

二、使用方式

定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：

字段：字段是类里面声明的变量。字段表示对象的有关数据。
构造函数：类实例化时调用，可以为类的对象分配内存。
方法：方法为对象要执行的操作

如下例子：

class Car {
    // 字段
    engine:string;

    // 构造函数
    constructor(engine:string) {
        this.engine = engine
    }

    // 方法
    disp():void {
        console.log("发动机为 :   "+this.engine)
    }
}

继承

类的继承使用过extends的关键字

class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

Dog是一个派生类，它派生自 Animal 基类，派生类通常被称作子类，基类通常被称作超类

Dog类继承了Animal类，因此实例dog也能够使用Animal类move方法

同样，类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写，通过super关键字是对父类的直接引用，该关键字可以引用父类的属性和方法，如下：

class PrinterClass {
   doPrint():void {
      console.log("父类的 doPrint() 方法。")
   }
}

class StringPrinter extends PrinterClass {
   doPrint():void {
      super.doPrint() // 调用父类的函数
      console.log("子类的 doPrint()方法。")
   }
}

修饰符

可以看到，上述的形式跟ES6十分的相似，typescript在此基础上添加了三种修饰符：

公共 public：可以自由的访问类程序里定义的成员
私有 private：只能够在该类的内部进行访问
受保护 protect：除了在该类的内部可以访问，还可以在子类中仍然可以访问

私有修饰符

只能够在该类的内部进行访问，实例对象并不能够访问

并且继承该类的子类并不能访问，如下图所示：

受保护修饰符

跟私有修饰符很相似，实例对象同样不能访问受保护的属性，如下：

有一点不同的是 protected 成员在子类中仍然可以访问

除了上述修饰符之外，还有只读修饰符

只读修饰符

通过readonly关键字进行声明，只读属性必须在声明时或构造函数里被初始化，如下：

除了实例属性之外，同样存在静态属性

静态属性

这些属性存在于类本身上面而不是类的实例上，通过static进行定义，访问这些属性需要通过类型.静态属性的这种形式访问，如下所示：

class Square {
    static width = '100px'
}

console.log(Square.width) // 100px

上述的类都能发现一个特点就是，都能够被实例化，在 typescript中，还存在一种抽象类

抽象类

抽象类做为其它派生类的基类使用，它们一般不会直接被实例化，不同于接口，抽象类可以包含成员的实现细节

abstract 关键字是用于定义抽象类和在抽象类内部定义抽象方法，如下所示：

abstract class Animal {
    abstract makeSound(): void;
    move(): void {
        console.log('roaming the earch...');
    }
}

这种类并不能被实例化，通常需要我们创建子类去继承，如下：

class Cat extends Animal {

    makeSound() {
        console.log('miao miao')
    }
}

const cat = new Cat()

cat.makeSound() // miao miao
cat.move() // roaming the earch...

三、应用场景

除了日常借助类的特性完成日常业务代码，还可以将类（class）也可以作为接口，尤其在 React 工程中是很常用的，如下：

export default class Carousel extends React.Component<Props, State> {}

由于组件需要传入 props 的类型 Props ，同时有需要设置默认 props 即 defaultProps，这时候更加适合使用class作为接口

先声明一个类，这个类包含组件 props 所需的类型和初始值：

// props的类型
export default class Props {
  public children: Array<React.ReactElement<any>> | React.ReactElement<any> | never[] = []
  public speed: number = 500
  public height: number = 160
  public animation: string = 'easeInOutQuad'
  public isAuto: boolean = true
  public autoPlayInterval: number = 4500
  public afterChange: () => {}
  public beforeChange: () => {}
  public selesctedColor: string
  public showDots: boolean = true
}

当我们需要传入 props 类型的时候直接将 Props 作为接口传入，此时 Props 的作用就是接口，而当需要我们设置defaultProps初始值的时候，我们只需要:

public static defaultProps = new Props()

Props 的实例就是 defaultProps 的初始值，这就是 class 作为接口的实际应用，我们用一个 class 起到了接口和设置初始值两个作用，方便统一管理，减少了代码量

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对 TypeScript 中函数的理解？与 JavaScript 函数的区别？

一、是什么

函数是 JavaScript 应用程序的基础，帮助我们实现抽象层、模拟类、信息隐藏和模块

在 TypeScript 里，虽然已经支持类、命名空间和模块，但函数仍然是主要定义行为的方式，TypeScript 为 JavaScript 函数添加了额外的功能，丰富了更多的应用场景

函数类型在 TypeScript 类型系统中扮演着非常重要的角色，它们是可组合系统的核心构建块

二、使用方式

跟javascript 定义函数十分相似，可以通过funciton 关键字、箭头函数等形式去定义，例如下面一个简单的加法函数：

const add = (a: number, b: number) => a + b

上述只定义了函数的两个参数类型，这个时候整个函数虽然没有被显式定义，但是实际上 TypeScript 编译器是能够通过类型推断到这个函数的类型，如下图所示：

当鼠标放置在第三行add函数名的时候，会出现完整的函数定义类型，通过: 的形式来定于参数类型，通过 => 连接参数和返回值类型

当我们没有提供函数实现的情况下，有两种声明函数类型的方式，如下所示：

// 方式一
type LongHand = {
  (a: number): number;
};

// 方式二
type ShortHand = (a: number) => number;

当存在函数重载时，只能使用方式一的形式

可选参数

当函数的参数可能是不存在的，只需要在参数后面加上 ? 代表参数可能不存在，如下：

const add = (a: number, b?: number) => a + (b ? b : 0)

这时候参数b可以是number类型或者undefined类型，即可以传一个number类型或者不传都可以

剩余类型

剩余参数与JavaScript的语法类似，需要用 ... 来表示剩余参数

如果剩余参数 rest 是一个由number类型组成的数组，则如下表示：

const add = (a: number, ...rest: number[]) => rest.reduce(((a, b) => a + b), a)

函数重载

允许创建数项名称相同但输入输出类型或个数不同的子程序，它可以简单地称为一个单独功能可以执行多项任务的能力

关于typescript函数重载，必须要把精确的定义放在前面，最后函数实现时，需要使用 |操作符或者?操作符，把所有可能的输入类型全部包含进去，用于具体实现

这里的函数重载也只是多个函数的声明，具体的逻辑还需要自己去写，typescript并不会真的将你的多个重名 function 的函数体进行合并

例如我们有一个add函数，它可以接收 string类型的参数进行拼接，也可以接收 number 类型的参数进行相加，如下：

// 上边是声明
function add (arg1: string, arg2: string): string
function add (arg1: number, arg2: number): number
// 因为我们在下边有具体函数的实现，所以这里并不需要添加 declare 关键字

// 下边是实现
function add (arg1: string | number, arg2: string | number) {
  // 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单的写一个 arg1 + arg2
  if (typeof arg1 === 'string' && typeof arg2 === 'string') {
    return arg1 + arg2
  } else if (typeof arg1 === 'number' && typeof arg2 === 'number') {
    return arg1 + arg2
  }
}

三、区别

从上面可以看到：

从定义的方式而言，typescript 声明函数需要定义参数类型或者声明返回值类型
typescript 在参数中，添加可选参数供使用者选择
typescript 增添函数重载功能，使用者只需要通过查看函数声明的方式，即可知道函数传递的参数个数以及类型

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对 TypeScript 中泛型的理解？应用场景？

一、是什么

泛型程序设计（generic programming）是程序设计语言的一种风格或范式

泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型，在实例化时作为参数指明这些类型
在typescript中，定义函数，接口或者类的时候，不预先定义好具体的类型，而在使用的时候在指定类型的一种特性

假设我们用一个函数，它可接受一个 number 参数并返回一个 number 参数，如下写法：

function returnItem (para: number): number {
    return para
}

如果我们打算接受一个 string 类型，然后再返回 string类型，则如下写法：

function returnItem (para: string): string {
    return para
}

上述两种编写方式，存在一个最明显的问题在于，代码重复度比较高

虽然可以使用 any类型去替代，但这也并不是很好的方案，因为我们的目的是接收什么类型的参数返回什么类型的参数，即在运行时传入参数我们才能确定类型

这种情况就可以使用泛型，如下所示：

function returnItem<T>(para: T): T {
    return para
}

可以看到，泛型给予开发者创造灵活、可重用代码的能力

二、使用方式

泛型通过<>的形式进行表述，可以声明：

函数
接口
类

函数声明

声明函数的形式如下：

function returnItem<T>(para: T): T {
    return para
}

定义泛型的时候，可以一次定义多个类型参数，比如我们可以同时定义泛型 T 和泛型 U：

function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}

swap([7, 'seven']); // ['seven', 7]

接口声明

声明接口的形式如下：

interface ReturnItemFn<T> {
    (para: T): T
}

那么当我们想传入一个number作为参数的时候，就可以这样声明函数:

const returnItem: ReturnItemFn<number> = para => para

类声明

使用泛型声明类的时候，既可以作用于类本身，也可以作用与类的成员函数

下面简单实现一个元素同类型的栈结构，如下所示：

class Stack<T> {
    private arr: T[] = []
    public push(item: T) {
        this.arr.push(item)
    }
    public pop() {
        this.arr.pop()
    }
}

使用方式如下：

const stack = new Stacn<number>()

如果上述只能传递 string 和 number 类型，这时候就可以使用 <T extends xx> 的方式猜实现约束泛型，如下所示：

除了上述的形式，泛型更高级的使用如下：

例如要设计一个函数，这个函数接受两个参数，一个参数为对象，另一个参数为对象上的属性，我们通过这两个参数返回这个属性的值

这时候就设计到泛型的索引类型和约束类型共同实现

索引类型、约束类型

索引类型 keyof T 把传入的对象的属性类型取出生成一个联合类型，这里的泛型 U 被约束在这个联合类型中，如下所示：

function getValue<T extends object, U extends keyof T>(obj: T, key: U) {
  return obj[key] // ok
}

上述为什么需要使用泛型约束，而不是直接定义第一个参数为 object类型，是因为默认情况 object 指的是{}，而我们接收的对象是各种各样的，一个泛型来表示传入的对象类型，比如 T extends object

使用如下图所示：

多类型约束

例如如下需要实现两个接口的类型约束：

interface FirstInterface {
  doSomething(): number
}

interface SecondInterface {
  doSomethingElse(): string
}

可以创建一个接口继承上述两个接口，如下：

interface ChildInterface extends FirstInterface, SecondInterface {

}

正确使用如下：

class Demo<T extends ChildInterface> {
  private genericProperty: T

  constructor(genericProperty: T) {
    this.genericProperty = genericProperty
  }
  useT() {
    this.genericProperty.doSomething()
    this.genericProperty.doSomethingElse()
  }
}

通过泛型约束就可以达到多类型约束的目的

三、应用场景

通过上面初步的了解，后述在编写 typescript 的时候，定义函数，接口或者类的时候，不预先定义好具体的类型，而在使用的时候在指定类型的一种特性的时候，这种情况下就可以使用泛型

灵活的使用泛型定义类型，是掌握typescript 必经之路

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对 TypeScript 中高级类型的理解？有哪些？

一、是什么

除了string、number、boolean 这种基础类型外，在 typescript 类型声明中还存在一些高级的类型应用

这些高级类型，是typescript为了保证语言的灵活性，所使用的一些语言特性。这些特性有助于我们应对复杂多变的开发场景

二、有哪些

常见的高级类型有如下：

交叉类型
联合类型
类型别名
类型索引
类型约束
映射类型
条件类型

交叉类型

通过 & 将多个类型合并为一个类型，包含了所需的所有类型的特性，本质上是一种并的操作

语法如下：

T & U

适用于对象合并场景，如下将声明一个函数，将两个对象合并成一个对象并返回：

function extend<T , U>(first: T, second: U) : T & U {
    let result: <T & U> = {}
    for (let key in first) {
        result[key] = first[key]
    }
    for (let key in second) {
        if(!result.hasOwnProperty(key)) {
            result[key] = second[key]
        }
    }
    return result
}

联合类型

联合类型的语法规则和逻辑 “或” 的符号一致，表示其类型为连接的多个类型中的任意一个，本质上是一个交的关系

语法如下：

T | U

例如 number | string | boolean 的类型只能是这三个的一种，不能共存

如下所示：

function formatCommandline(command: string[] | string) {
  let line = '';
  if (typeof command === 'string') {
    line = command.trim();
  } else {
    line = command.join(' ').trim();
  }
}

类型别名

类型别名会给一个类型起个新名字，类型别名有时和接口很像，但是可以作用于原始值、联合类型、元组以及其它任何你需要手写的类型

可以使用 type SomeName = someValidTypeAnnotation的语法来创建类型别名：

type some = boolean | string

const b: some = true // ok
const c: some = 'hello' // ok
const d: some = 123 // 不能将类型“123”分配给类型“some”

此外类型别名可以是泛型:

type Container<T> = { value: T };

也可以使用类型别名来在属性里引用自己：

type Tree<T> = {
    value: T;
    left: Tree<T>;
    right: Tree<T>;
}

可以看到，类型别名和接口使用十分相似，都可以描述一个对象或者函数

两者最大的区别在于，interface 只能用于定义对象类型，而 type 的声明方式除了对象之外还可以定义交叉、联合、原始类型等，类型声明的方式适用范围显然更加广泛

类型索引

keyof 类似于 Object.keys ，用于获取一个接口中 Key 的联合类型。

interface Button {
    type: string
    text: string
}

type ButtonKeys = keyof Button
// 等效于
type ButtonKeys = "type" | "text"

类型约束

通过关键字 extend 进行约束，不同于在 class 后使用 extends 的继承作用，泛型内使用的主要作用是对泛型加以约束

type BaseType = string | number | boolean

// 这里表示 copy 的参数
// 只能是字符串、数字、布尔这几种基础类型
function copy<T extends BaseType>(arg: T): T {
  return arg
}

类型约束通常和类型索引一起使用，例如我们有一个方法专门用来获取对象的值，但是这个对象并不确定，我们就可以使用 extends 和 keyof 进行约束。

function getValue<T, K extends keyof T>(obj: T, key: K) {
  return obj[key]
}

const obj = { a: 1 }
const a = getValue(obj, 'a')

映射类型

通过 in 关键字做类型的映射，遍历已有接口的 key 或者是遍历联合类型，如下例子：

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

interface Obj {
  a: string
  b: string
}

type ReadOnlyObj = Readonly<Obj>

上述的结构，可以分成这些步骤：

keyof T：通过类型索引 keyof 的得到联合类型 ‘a’ | ‘b’
P in keyof T 等同于 p in ‘a’ | ‘b’，相当于执行了一次 forEach 的逻辑，遍历 ‘a’ | ‘b’

所以最终ReadOnlyObj的接口为下述：

interface ReadOnlyObj {
    readonly a: string;
    readonly b: string;
}

条件类型

条件类型的语法规则和三元表达式一致，经常用于一些类型不确定的情况。

T extends U ? X : Y

上面的意思就是，如果 T 是 U 的子集，就是类型 X，否则为类型 Y

三、总结

可以看到，如果只是掌握了 typeScript 的一些基础类型，可能很难游刃有余的去使用 typeScript，需要了解一些typescript的高阶用法

并且typescript在版本的迭代中新增了很多功能，需要不断学习与掌握

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对 TypeScript 装饰器的理解？应用场景？

一、是什么

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上

是一种在不改变原类和使用继承的情况下，动态地扩展对象功能

同样的，本质也不是什么高大上的结构，就是一个普通的函数，@expression 的形式其实是Object.defineProperty的语法糖

expression 求值后必须也是一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入

二、使用方式

由于typescript是一个实验性特性，若要使用，需要在tsconfig.json文件启动，如下：

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
    }
}

typescript装饰器的使用和javascript基本一致

类的装饰器可以装饰：

类
方法/属性
参数
访问器

类装饰

例如声明一个函数 addAge 去给 Class 的属性 age 添加年龄.

function addAge(constructor: Function) {
  constructor.prototype.age = 18;
}

@addAge
class Person{
  name: string;
  age!: number;
  constructor() {
    this.name = 'huihui';
  }
}

let person = new Person();

console.log(person.age); // 18

上述代码，实际等同于以下形式：

Person = addAge(function Person() { ... });

上述可以看到，当装饰器作为修饰类的时候，会把构造器传递进去。 constructor.prototype.age 就是在每一个实例化对象上面添加一个 age 属性

方法/属性装饰

同样，装饰器可以用于修饰类的方法，这时候装饰器函数接收的参数变成了：

target：对象的原型
propertyKey：方法的名称
descriptor：方法的属性描述符

可以看到，这三个属性实际就是Object.defineProperty的三个参数，如果是类的属性，则没有传递第三个参数

如下例子：

// 声明装饰器修饰方法/属性
function method(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(target);
  console.log("prop " + propertyKey);
  console.log("desc " + JSON.stringify(descriptor) + "\n\n");
  descriptor.writable = false;
};

function property(target: any, propertyKey: string) {
  console.log("target", target)
  console.log("propertyKey", propertyKey)
}

class Person{
 @property
 name: string;
 constructor() {
   this.name = 'huihui';
 }

 @method
 say(){
   return 'instance method';
 }

 @method
 static run(){
   return 'static method';
 }
}

const xmz = new Person();

// 修改实例方法say
xmz.say = function() {
 return 'edit'
}

输出如下图所示：

参数装饰

接收3个参数，分别是：

target ：当前对象的原型
propertyKey ：参数的名称
index：参数数组中的位置

function logParameter(target: Object, propertyName: string, index: number) {
  console.log(target);
  console.log(propertyName);
  console.log(index);
}

class Employee {
  greet(@logParameter message: string): string {
      return `hello ${message}`;
  }
}
const emp = new Employee();
emp.greet('hello');

输入如下图：

访问器装饰

使用起来方式与方法装饰一致，如下：

function modification(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(target);
  console.log("prop " + propertyKey);
  console.log("desc " + JSON.stringify(descriptor) + "\n\n");
};

class Person{
 _name: string;
 constructor() {
   this._name = 'huihui';
 }

 @modification
 get name() {
   return this._name
 }
}

装饰器工厂

如果想要传递参数，使装饰器变成类似工厂函数，只需要在装饰器函数内部再函数一个函数即可，如下：

function addAge(age: number) {
  return function(constructor: Function) {
    constructor.prototype.age = age
  }
}

@addAge(10)
class Person{
  name: string;
  age!: number;
  constructor() {
    this.name = 'huihui';
  }
}

let person = new Person();

执行顺序

当多个装饰器应用于一个声明上，将由上至下依次对装饰器表达式求值，求值的结果会被当作函数，由下至上依次调用，例如如下：

function f() {
    console.log("f(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");
    }
}

function g() {
    console.log("g(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("g(): called");
    }
}

class C {
    @f()
    @g()
    method() {}
}

// 输出
f(): evaluated
g(): evaluated
g(): called
f(): called

三、应用场景

可以看到，使用装饰器存在两个显著的优点：

代码可读性变强了，装饰器命名相当于一个注释
在不改变原有代码情况下，对原来功能进行扩展

后面的使用场景中，借助装饰器的特性，除了提高可读性之后，针对已经存在的类，可以通过装饰器的特性，在不改变原有代码情况下，对原来功能进行扩展

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 对 TypeScript 中命名空间与模块的理解？区别？

一、模块

TypeScript 与 ECMAScript 2015 一样，任何包含顶级 import 或者 export 的文件都被当成一个模块

相反地，如果一个文件不带有顶级的import或者export声明，那么它的内容被视为全局可见的

例如我们在在一个 TypeScript 工程下建立一个文件 1.ts，声明一个变量a，如下：

const a = 1

然后在另一个文件同样声明一个变量a，这时候会出现错误信息

提示重复声明a变量，但是所处的空间是全局的

如果需要解决这个问题，则通过import或者export引入模块系统即可，如下：

const a = 10;

export default a

在typescript中，export关键字可以导出变量或者类型，用法与es6模块一致，如下：

export const a = 1
export type Person = {
    name: String
}

通过import 引入模块，如下：

import { a, Person } from './export';

二、命名空间

命名空间一个最明确的目的就是解决重名问题

命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的

这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中

TypeScript 中命名空间使用 namespace 来定义，语法格式如下：

namespace SomeNameSpaceName {
   export interface ISomeInterfaceName {      }
   export class SomeClassName {      }
}

以上定义了一个命名空间 SomeNameSpaceName，如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口，则需要在类和接口添加 export 关键字

使用方式如下：

SomeNameSpaceName.SomeClassName

命名空间本质上是一个对象，作用是将一系列相关的全局变量组织到一个对象的属性，如下：

namespace Letter {
  export let a = 1;
  export let b = 2;
  export let c = 3;
  // ...
  export let z = 26;
}

编译成js如下：

var Letter;
(function (Letter) {
    Letter.a = 1;
    Letter.b = 2;
    Letter.c = 3;
    // ...
    Letter.z = 26;
})(Letter || (Letter = {}));

三、区别

命名空间是位于全局命名空间下的一个普通的带有名字的 JavaScript 对象，使用起来十分容易。但就像其它的全局命名空间污染一样，它很难去识别组件之间的依赖关系，尤其是在大型的应用中
像命名空间一样，模块可以包含代码和声明。不同的是模块可以声明它的依赖
在正常的TS项目开发过程中并不建议用命名空间，但通常在通过 d.ts 文件标记 js 库类型的时候使用命名空间，主要作用是给编译器编写代码的时候参考使用

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 如何在Vue项目中应用TypeScript？

一、前言

与link类似

在VUE项目中应用typescript，我们需要引入一个库vue-property-decorator，

其是基于vue-class-component库而来，这个库vue官方推出的一个支持使用class方式来开发vue单文件组件的库

主要的功能如下：

methods 可以直接声明为类的成员方法
计算属性可以被声明为类的属性访问器
初始化的 data 可以被声明为类属性
data、render 以及所有的 Vue 生命周期钩子可以直接作为类的成员方法
所有其他属性，需要放在装饰器中

二、使用

vue-property-decorator 主要提供了多个装饰器和一个函数:

@prop
@ProPsync
@model
@watch
@provide
@Inject
@ProvideReactive
@InjectReactive
@emit
@ref
@component (由 vue-class-component 提供)
Mixins (由 vue-class-component 提供)

@component

Component装饰器它注明了此类为一个Vue组件，因此即使没有设置选项也不能省略

如果需要定义比如 name、components、filters、directives以及自定义属性，就可以在Component装饰器中定义，如下：

import {Component,Vue} from 'vue-property-decorator';
import {componentA,componentB} from '@/components';

 @Component({
    components:{
        componentA,
        componentB,
    },
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus()
            }
        }
    }
})
export default class YourCompoent extends Vue{
   
}

computed、data、methods

这里取消了组件的data和methods属性，以往data返回对象中的属性、methods中的方法需要直接定义在Class中，当做类的属性和方法

@Component
export default class HelloDecorator extends Vue {
    count: number = 123 // 类属性相当于以前的 data

    add(): number { // 类方法就是以前的方法
        this.count + 1
    }

    // 获取计算属性
    get total(): number {
      return this.count + 1
    }

    // 设置计算属性
    set total(param:number): void {
      this.count = param
    }
}

@props

组件接收属性的装饰器，如下使用：

import {Component,Vue,Prop} from vue-property-decorator;

@Component
export default class YourComponent extends Vue {
    @Prop(String)
    propA:string;
    
    @Prop([String,Number])
    propB:string|number;
    
    @Prop({
     type: String, // type: [String , Number]
     default: 'default value', // 一般为String或Number
      //如果是对象或数组的话。默认值从一个工厂函数中返回
      // defatult: () => {
      //     return ['a','b']
      // }
     required: true,
     validator: (value) => {
        return [
          'InProcess',
          'Settled'
        ].indexOf(value) !== -1
     }
    })
    propC:string;
}

@watch

实际就是Vue中的监听器，如下：

import { Vue, Component, Watch } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {}

  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) {}

  @Watch('person')
  onPersonChanged2(val: Person, oldVal: Person) {}
}

@emit

vue-property-decorator 提供的 @Emit 装饰器就是代替Vue 中的事件的触发$emit，如下：

import {Vue, Component, Emit} from 'vue-property-decorator';
    @Component({})
    export default class Some extends Vue{
        mounted(){
            this.$on('emit-todo', function(n) {
                console.log(n)
            })
            this.emitTodo('world');
        }
        @Emit()
        emitTodo(n: string){
            console.log('hello');
        }
    }

三、总结

可以看到上述typescript版本的vue class的语法与平时javascript版本使用起来还是有很大的不同，多处用到class与装饰器，但实际上本质是一致的，只有不断编写才会得心应手

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 如何在React项目中应用TypeScript？

一、前言

单独的使用 TypeScript 并不会导致学习成本很高，但是绝大部分前端开发者的项目都是依赖于框架的

例如与 Vue、React 这些框架结合使用的时候，会有一定的门槛

使用 TypeScript 编写 React 代码，除了需要 TypeScript 这个库之外，还需要安装 @types/react、@types/react-dom

npm i @types/react -s

npm i @types/react-dom -s

至于上述使用 @types 的库的原因在于，目前非常多的 JavaScript 库并没有提供自己关于 TypeScript 的声明文件

所以，ts 并不知道这些库的类型以及对应导出的内容，这里 @types 实际就是社区中的 DefinitelyTyped 库，定义了目前市面上绝大多数的 JavaScript 库的声明

所以下载相关的 JavaScript 对应的 @types 声明时，就能够使用使用该库对应的类型定义

二、使用方式

在编写 React 项目的时候，最常见的使用的组件就是：

无状态组件
有状态组件
受控组件

无状态组件

主要作用是用于展示 UI，如果使用 js 声明，则如下所示：

import * as React from "React";

export const Logo = (props) => {
  const { logo, className, alt } = props;

  return <img src={logo} className={className} alt={alt} />;
};

但这时候 ts 会出现报错提示，原因在于没有定义 porps 类型，这时候就可以使用 interface 接口去定义 porps 即可，如下：

import * as React from "React";

interface IProps {
  logo?: string;
  className?: string;
  alt?: string;
}

export const Logo = (props: IProps) => {
  const { logo, className, alt } = props;

  return <img src={logo} className={className} alt={alt} />;
};

但是我们都知道 props 里面存在 children 属性，我们不可能每个 porps 接口里面定义多一个 children，如下：

interface IProps {
  logo?: string;
  className?: string;
  alt?: string;
  children?: ReactNode;
}

更加规范的写法是使用 React 里面定义好的 FC 属性，里面已经定义好 children 类型，如下：

export const Logo: React.FC<IProps> = (props) => {
  const { logo, className, alt } = props;

  return <img src={logo} className={className} alt={alt} />;
};

React.FC 显式地定义了返回类型，其他方式是隐式推导的
React.FC 对静态属性：displayName、propTypes、defaultProps 提供了类型检查和自动补全
React.FC 为 children 提供了隐式的类型（ReactElement | null）

有状态组件

可以是一个类组件且存在 props 和 state 属性

如果使用 TypeScript 声明则如下所示：

import * as React from "React";

interface IProps {
  color: string;
  size?: string;
}
interface IState {
  count: number;
}
class App extends React.Component<IProps, IState> {
  public state = {
    count: 1,
  };
  public render() {
    return <div>Hello world</div>;
  }
}

上述通过泛型对 props、state 进行类型定义，然后在使用的时候就可以在编译器中获取更好的智能提示

关于 Component 泛型类的定义，可以参考下 React 的类型定义文件 node_modules/@types/React/index.d.ts，如下所示：

class Component<P, S> {
  readonly props: Readonly<{ children?: ReactNode }> & Readonly<P>;

  state: Readonly<S>;
}

从上述可以看到，state 属性也定义了可读类型，目的是为了防止直接调用 this.state 更新状态

受控组件

受控组件的特性在于元素的内容通过组件的状态 state 进行控制

由于组件内部的事件是合成事件，不等同于原生事件，

例如一个 input 组件修改内部的状态，常见的定义的时候如下所示：

private updateValue(e: React.ChangeEvent<HTMLInputElement>) {
    this.setState({ itemText: e.target.value })
}

常用 Event 事件对象类型：

ClipboardEvent<T = Element> 剪贴板事件对象
DragEvent<T = Element> 拖拽事件对象
ChangeEvent<T = Element> Change 事件对象
KeyboardEvent<T = Element> 键盘事件对象
MouseEvent<T = Element> 鼠标事件对象
TouchEvent<T = Element> 触摸事件对象
WheelEvent<T = Element> 滚轮事件对象
AnimationEvent<T = Element> 动画事件对象
TransitionEvent<T = Element> 过渡事件对象

T 接收一个 DOM 元素类型

三、总结

上述只是简单的在 React 项目使用 TypeScript，但在编写 React 项目的时候，还存在 hooks、默认参数、以及 store 等等……

TypeScript 在框架中使用的学习成本相对会更高，需要不断编写才能熟练

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 使用 Typescript 有哪些优点和缺点

优点

提供可选的强静态类型

既然叫 TypeScript，那它的最大亮点自然就是提供静态类型（type）。我们可以对变量设置类型，比如你给 count 变量设置为数字类型（number），如果你从 input 元素提取 value （string 类型）赋予给 count，如果你忘记将其转换为数字，编译是不会通过的。

当然类型不是强求设置的，为了兼容 JavaScript，你也可以设置为 any 类型。所谓 any 类型是一个特殊的类型，任何类型的的值都可以赋予给它。

更早发现 BUG

TypeScript 要编译后才能使用。所以我们的类型错误会在编译过程中被编译器发现，更早发现 BUG。如果直接用 JavaScript 开发，需要在程序运行时，吭哧吭哧点来点去各种测试来判断行为是否正常，费时费力，开发体验极差。

比如原本应该是两个数字相加的，写错成两个数字形式的字符串相加，结果是差得十万八千里，且不易察觉。TypeScript 在编译时就给你找到了，你不改对别想过我编译。

代码可预测

声明的变量一旦指定类型，它的类型就再也不能修改。这样变量就具有可预测性。

JavaScript 的变量可以赋予任何类型的值。有时候，我们会看到一个变量在执行的过程中变成各种各样的类型，一会是字符串，一会是对象，非常不好预测，尤其是有复杂条件判断的时候。这其实是并不是好的开发习惯，但在 JavaScript 它就是可以这么干！

但如果你用 TypeScript，就没有这个烦恼，它直接给你一刀切了，你别想将字符串值赋予给一个数字类型变量，一旦声明就再也无法修改。

当然为了兼容，你也是可以将其设置 any 类型，但智能提升就没有了哦。

丰富的 IDE 支持

因为使用了类型，所以检测某个变量是什么类型、可以使用哪些方法就变得容易，在开发体验上就可以进行改善了。

目前在绝大多数 IDE（集成开发环境）中已经支持 TypeScript 的智能提示、自动补全、代码导航等功能，并能在编写时实时反馈类型错误并提供准确的建议，比如可以指出传入函数的对象缺了哪些属性。

方便重构

重构时，如果函数的参数修改了，调用它时如果不对，TypeScript 会提示你。这对重构代码提供了坚实的后盾。有了 TypeScript，就放心做重构吧，前提你不要到处用 any。

提供面向对象的写法

面向对象语言在实践中已经被证实是优秀的设计，拥有极高的可读性、可维护性。TypeScript 支持接口、抽象类、枚举等面向对象语言的特性，支持你更好地实现一些设计模式。TypeScript 还支持类型体操，有空多锻炼身体哈。

看了这么多优点，再看看 TypeScript 的缺点。

缺点

不是真正的静态类型

因为需要兼容 JavaScript 的缘故，TypeScript 的类型是可选的。你可以用 any 类型，也可以进行类型的强制转换，所以如果你在代码中写了太多这样的东西，甚至将其变成 AnyScript。那么实际运行还是可能会出现一些类型上的问题。

有一定的学习成本

学 TypeScript 其实和学习一门新语言差不多了，还是有不小的学习成本的。但因为兼容 JavaScript 的缘故，对前端开发者来说难度会低一点。

需要写更多的代码

主要是类型和接口声明的部分，但能够抵消掉你 debug 类型问题的时间，总体看还是物超所值的。另外，编译后类型和接口声明都会被移除，相比直接写 JavaScript，体积不会明显更大。

需要编译

浏览器和 Nodejs 并不支持 TypeScript，所以多了一步编译操作。对于普通项目来说通常不长，其实还好。但如果你用来写脚本的话，就需要多安装 tsc 编译工具，还要配置好 tsconfig.json 文件，还是有点麻烦。

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ Typescript中的内置类型有哪些？

Partial（部分的）

/**
 * Make all properties in T optional
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

作用是让传入类型中的所有属性变成都是可选的

export interface Student {
  name: string;
  age: number;
}

const student1: Student = {}

const student2: Partial<Student> = {}

变量student1的类型是Student，Student默认所有的属性都是不能为空的，所有会报错，student2就不会

Required（必须的）

/**
 * Make all properties in T required
 */
type Required<T> = {
    [P in keyof T]-?: T[P];
};

跟Partial的作用是相反的，是让传入类型中的所有属性变成都是必填的

export interface Student {
  name?: string;
  age?: number;
}

const student1: Student = {}

const student2: Required<Student> = {}

变量student1的类型是Student，Student默认所有的属性都是可以为空的，所有不会报错，student2会报错

Readonly（只读的）

/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

作用是让传入类型中的所有属性变成都是只读的（不能修改属性）

export interface Student {
  name: string;
  age: number;
}

const student1: Student = {
  name: '张三',
  age: 20
}
student1.age = 21

const student2: Readonly<Student> = {
  name: '李四',
  age: 20
}
student2.age = 21

给student1的属性age重新赋值不会报错，给student2的属性age重新赋值就会报错，因为student2所有的属性都是只读的

Pick（选择）

/**
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

作用是选择传入类型中的部分属性组成新类型

export interface Student {
  name: string;
  age: number;
}

const student1: Student = {
  name: '张三',
  age: 20
}

const student2: Pick<Student, 'name'> = {
  name: '李四'
}

const student3: Pick<Student, 'name'> = {
  name: '王五',
  age: 20
}

变量student1可以有所有属性name和age，变量student2就只能有属性name，变量student3加上属性age就会报错

Record（记录）

/**
 * Construct a type with a set of properties K of type T
 */
type Record<K extends keyof any, T> = {
    [P in K]: T;
};

作用是构建一个类型，这个类型用来描述一个对象，这个对象的属性都具有相同的类型

export const student1: Record<string, any> = {
  name: '张三',
  age: 20
}

Record应该是日常使用频率较高的内置类型了，主要用来描述对象，一般建议是不用Object来描述对象，而是用Record代替，Record<string, any>几乎可以说是万金油了

Exclude（排除）

/**
 * Exclude from T those types that are assignable to U
 */
type Exclude<T, U> = T extends U ? never : T;

针对联合类型（interface这种没用），用人话说，排除相同的，留下不同的

export type PersonAttr = 'name' | 'age'

export type StudentAttr = 'name' | 'age' | 'class' | 'school'

const student1: Exclude<StudentAttr, PersonAttr>

student1就只能被赋值为’class’ 或者’school’

Extract（取出）

/**
 * Extract from T those types that are assignable to U
 */
type Extract<T, U> = T extends U ? T : never;

与Exclude相反，针对联合类型，排除不同的的，取出相同的

export type PersonAttr = 'name' | 'age'

export type StudentAttr = 'name' | 'age' | 'class' | 'school'

const student1: Extract<StudentAttr, PersonAttr>

student1就只能被赋值为’name’或者’age’

Omit（省略）

/**
 * Construct a type with the properties of T except for those in type K.
 */
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

传入一个类型，和这个类型的几个属性，把传入的属性省略掉，组成一个新类型

export interface Student {
  name: string;
  age: number;
  class: string;
  school: string;
}

export type PersonAttr = 'name' | 'age'

export type StudentAttr = 'name' | 'age' | 'class' | 'school'

const student1: Omit<Student, PersonAttr> = {}

student1报错，提示没有属性’name’、’age’

NonNullable（不能为null）

/**
 * Exclude null and undefined from T
 */
type NonNullable<T> = T extends null | undefined ? never : T;

字面意思，不能为空

export interface Student {
  name: string;
  age: number;
}

const student1: NonNullable<Student | undefined | null> = null

student1赋值为null会报错（在tsconfig.json配置文件中开启类型检查，"skipLibCheck": false）

Parameters（参数）

/**
 * Obtain the parameters of a function type in a tuple
 */
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

获取传入函数的参数组成的类型

export interface Student {
  name: string;
  age: number;
}

export interface StudentFunc {
  (name: string, age: number): Student
}

const student1: Parameters<StudentFunc>

student1的类型为[name: string, age: number]

ConstructorParameters（构造参数）

/**
 * Obtain the parameters of a constructor function type in a tuple
 */
type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never;

获取传入构造函数的参数组成的类型

export interface Student {
  name: string;
  age: number;
}

export interface StudentConstructor {
  new (name: string, age: number): Student
}

const student1: ConstructorParameters<StudentConstructor>

student1的类型为[name: string, age: number]

ReturnType（返回类型）

/**
 * Obtain the return type of a function type
 */
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

获取传入函数的返回类型

export interface Student {
  name: string;
  age: number;
}

export interface StudentFunc {
  (name: string, age: number): Student
}

const student1: ReturnType<StudentFunc> = {}

student1的类型为Student

InstanceType（构造返回类型、实例类型）

/**
 * Obtain the return type of a constructor function type
 */
type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any;

获取传入构造函数的返回类型

const Student = class {
  name: string;
  age: number;
  constructor (name: string, age: number) {
    this.name = name
    this.age = age
  }
  showInfo () {
    console.log('name: ', this.name, 'age: ', this.age);
  }
}

const student1: InstanceType<typeof Student> = new Student('张三', 20)

个人认为这是一个非常好用的内置类型，目前在前端项目中，class是用的越来越多了，在TS中，class其实也是可以用作类型声明空间的，用来描述对象类型，但是一般来说好像很少这样用的，一般用interface或者type居多

export class Student {
  name: string;
  age: number;
}

所以一般就是直接把class用作变量声明空间，但是对于 class new 出的实例，怎么描述它的类型呢，就如上文的，直接const student1: Student那是铁定会报错的，因为Student用作变量声明空间，没有用作类型声明空间（听起来好绕），这时候就可以用到InstanceType，完美解决问题

Uppercase（大写）

/**
 * Convert string literal type to uppercase
 */
type Uppercase<S extends string> = intrinsic;

变大写

export type StudentSexType = 'male' | 'female'

const studentSex: Uppercase<StudentSexType> = 'MALE'

Lowercase（小写）

/**
 * Convert string literal type to lowercase
 */
type Lowercase<S extends string> = intrinsic;

变小写

export type StudentSexType = 'MALE' | 'FEMALE'

const studentSex: Lowercase<StudentSexType> = ''

Capitalize（首字母大写）

/**
 * Convert first character of string literal type to uppercase
 */
type Capitalize<S extends string> = intrinsic;

首字母变大写

export type StudentSexType = 'male' | 'female'

const studentSex: Capitalize<StudentSexType> = ''

Uncapitalize（首字母小写）

/**
 * Convert first character of string literal type to lowercase
 */
type Uncapitalize<S extends string> = intrinsic;

首字母变小写

export type StudentSexType = 'MALE' | 'FEMALE'

const studentSex: Uncapitalize<StudentSexType> = ''

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 能否将多个 `.ts` 文件组合成一个 `.js` 文件？如果是，那么如何？

这是可以的。需要添加 —outFILE [OutputJSFileName] 编译选项。

$ tsc --outFile comman.js file1.ts file2.ts file3.ts

上述命令将编译所有三个.ts文件，结果将存储到单个comman.js文件中。在这种情况下，当没有像下面的命令那样提供输出文件名时。

$ tsc --outFile file1.ts file2.ts file3.ts

然后，file2.ts和file3.ts会被编译，输出会放在file1.ts中。所以现在的 file1.ts 包含 JavaScript 代码。

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 是否可以通过 `.ts` 文件中的实时更改自动编译 `.ts` ？

是的，可以通过 .ts 文件中的实时更改自动编译.ts。这可以通过使用 --watch 编译器选项来实现。

tsc --watch file1.ts

上面的命令首先编译 file1.js 中的 file1.ts 并观察文件的变化。如果检测到任何更改，它将再次编译该文件。在这里，需要确保在使用 --watch 选项运行时不能关闭命令提示符。

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ interface语句和type语句有什么区别？

相同点

都可以描述一个对象或者函数

interface

interface User {
  name: string
  age: number
}

interface SetUser {
  (name: string, age: number): void;
}

type

type User = {
  name: string
  age: number
};

type SetUser = (name: string, age: number)=> void;

都允许拓展（extends）

interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。虽然效果差不多，但是两者语法不同。

interface extends interface

interface Name { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}
复制代码

type extends type

type Name = { 
  name: string; 
}
type User = Name & { age: number  };
复制代码

interface extends type

type Name = { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}
复制代码

type extends interface

interface Name { 
  name: string; 
}
type User = Name & { 
  age: number; 
}
复制代码

不同点

type 可以而 interface 不行

type 可以声明基本类型别名，联合类型，元组等类型

// 基本类型别名
type Name = string

// 联合类型
interface Dog {
    wong();
}
interface Cat {
    miao();
}

type Pet = Dog | Cat

// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]

复制代码

type 语句中还可以使用 typeof 获取实例的类型进行赋值

// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div
复制代码

其他骚操作

type StringOrNumber = string | number;  
type Text = string | { text: string };  
type NameLookup = Dictionary<string, Person>;  
type Callback<T> = (data: T) => void;  
type Pair<T> = [T, T];  
type Coordinates = Pair<number>;  
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };
复制代码

interface 可以而 type 不行

interface 能够声明合并

interface User {
  name: string
  age: number
}

interface User {
  sex: string
}

/*
User 接口为 {
  name: string
  age: number
  sex: string 
}
*/
复制代码

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 如何在Proxy中代理apply方法

 {
            var target = function () {
                return 'I am the target';
            }
            var handler = {
                apply: function () {
                    return 'I am the proxy';
                }
            };
            var p = new Proxy(target,handler);
            console.log("p",p());
        }
//上面代码中，变量p是Proxy的实例，当他作为函数调用时（p（））
//,就会被apply方法拦截，返回一个字符串

{
    var twice = {
                    //目标对象，目标对象的上下文对象，目标对象的参数数组
        apply:function (target,ctx,args) {
            //return console.log("target",target,"ctx",ctx,"args",args);
           return Reflect.apply(...arguments)*2;
        }
    };
    function sum (left,right) {
         return left*right;
    };
    var proxy = new Proxy(sum,twice);
    console.log("proxy1",proxy(1,2));
    console.log("proxy.call",proxy.call(null,5,6));
    console.log("proxy,apply",proxy.apply(null,[7,8]));
    console.log("proxy,apply",Reflect.apply(proxy,null,[7,8]));

}
//上面的实例执行顺序是当sum（）执行完后再执行twice中的apply()，
//上面代码中每当执行proxy函数（直接调用或call和apply调用），就会被apply方法拦截
//另外，直接调用Reflect.apply方法，也会被拦截。

参考文献：

[语音仓库]: “https://github.com/febobo/web-interview “

前端面试大全网络攻防

2022-11-01

技术面试 / 网络攻击

前端面试题大全（网络攻防）

前端面试题类目分类

HTML5 + CSS3
JavaScript
Vue + Vue3
React
Webpack
服务端

考点频率：♥︎ 、 ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎ ♥︎

网络攻防

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ XSS攻击

美团技术谈XSS攻防

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ CSRF攻击

美团技术谈CSRF攻击

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ 中间人攻击

中间人攻击

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ SQL注入

理解SQL注入

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ DDoS攻击

DDoS攻击——常见的具有破坏性的安全性问题(如果是分布式攻击的话就是DDos攻击)

攻击方式：Ping Flood攻击即利用ping命令不停的发送的数据包到服务器。

DDoS攻击

♥︎ ♥︎ ♥︎ ♥︎ ♥︎ DNS缓存污染

DNS缓存污染——常见的网站不可访问的问题

攻击方式：第三方可信赖的域名服务器缓存了一些DNS解析，但被别人制造一些假域名服务器封包污染了，指向错误网址。

前端面试题大全node

2022-11-01

技术面试 / node.js

前端面试题大全（node.js）

前端面试题类目分类

HTML5 + CSS3
JavaScript
Vue + Vue3
React
Webpack
服务端

考点频率：♥︎ 、 ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎、 ♥︎ ♥︎ ♥︎ ♥︎ ♥︎

node.js

♥︎ ♥︎ 说说你对Node.js 的理解？优缺点？应用场景？

一、是什么

Node.js 是一个开源与跨平台的 JavaScript 运行时环境

在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核），利用事件驱动、非阻塞和异步输入输出模型等技术提高性能

可以理解为 Node.js 就是一个服务器端的、非阻塞式I/O的、事件驱动的JavaScript运行环境

非阻塞异步

Nodejs采用了非阻塞型I/O机制，在做I/O操作的时候不会造成任何的阻塞，当完成之后，以时间的形式通知执行操作

例如在执行了访问数据库的代码之后，将立即转而执行其后面的代码，把数据库返回结果的处理代码放在回调函数中，从而提高了程序的执行效率

事件驱动

事件驱动就是当进来一个新的请求的时，请求将会被压入一个事件队列中，然后通过一个循环来检测队列中的事件状态变化，如果检测到有状态变化的事件，那么就执行该事件对应的处理代码，一般都是回调函数

比如读取一个文件，文件读取完毕后，就会触发对应的状态，然后通过对应的回调函数来进行处理

二、优缺点

优点：

处理高并发场景性能更佳
适合I/O密集型应用，值的是应用在运行极限时，CPU占用率仍然比较低，大部分时间是在做 I/O硬盘内存读写操作

因为Nodejs是单线程，带来的缺点有：

不适合CPU密集型应用
只支持单核CPU，不能充分利用CPU
可靠性低，一旦代码某个环节崩溃，整个系统都崩溃

三、应用场景

借助Nodejs的特点和弊端，其应用场景分类如下：

善于I/O，不善于计算。因为Nodejs是一个单线程，如果计算（同步）太多，则会阻塞这个线程
大量并发的I/O，应用程序内部并不需要进行非常复杂的处理
与 websocket 配合，开发长连接的实时交互应用程序

具体场景可以表现为如下：

第一大类：用户表单收集系统、后台管理系统、实时交互系统、考试系统、联网软件、高并发量的web应用程序
第二大类：基于web、canvas等多人联网游戏
第三大类：基于web的多人实时聊天客户端、聊天室、图文直播
第四大类：单页面浏览器应用程序
第五大类：操作数据库、为前端和移动端提供基于json的API

其实，Nodejs能实现几乎一切的应用，只考虑适不适合使用它

♥︎ ♥︎ 为什么 Node.js 是单线程的？

回答一：怼：如果不幸遇到面试官问这个问题，你反问他 nodejs 为什么叫做 nodejs.

回答二：苟：您好，贵公司的面试题还挺有深度的，这让我越来越期待加入贵公司了。关于 ndoejs 是单线程的，刚好前段时间阅读过有关 node 的文章。node 的作者在设计之初选择语言时，评估过当时的流行语言，最终选择了存在多年在后端却一直没有市场的 js,正是 js 的不被关注，使得使用 js 没有额外阻力，而 js 在浏览器中有广泛的事件驱动方面的应用，正符合作者的喜好。于是 node 使用了 js 作为开发语言，node 的作者在开发时保持了 js 单线程的特点，所以 nodejs 是单线程的。

♥︎ ♥︎ 什么是回调函数？

概念：

回调就是一种利用函数指针进行函数调用的过程。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，就说这是回调函数。

对普通函数的调用：

调用程序发出对普通函数的调用后，程序执行立即转向被调用函数执行，直到被调用函数执行完毕后，再返回调用程序继续执行。从发出调用的程序的角度看，这个过程为“调用–>等待被调用函数执行完毕–>继续执行”

对回调函数调用：

调用程序发出对回调函数的调用后，不等函数执行完毕，立即返回并继续执行。这样，调用程序执和被调用函数同时在执行。当被调函数执行完毕后，被调函数会反过来调用某个事先指定函数，以通知调用程序：函数调用结束。这个过程称为回调(Callback)，这正是回调函数名称的由来。
回调函数机制：

1、定义一个函数（图中的sub/mul函数）；

2、将此函数的地址注册给调用者test函数；

3、特定的事件或条件发生时（main主函数），调用者使用函数指针调用回调函数。

回调函数的缺点：

1）回调函数固然能解决一部分系统架构问题但是绝不能再系统内到处都是，如果你发现你的系统内到处都是回调函数，那么你一定要重构你的系统。

2）回调函数本身是一种破坏系统结构的设计思路，回调函数会绝对的变化系统的运行轨迹，执行顺序，调用顺序。

♥︎ ♥︎ Node.js 和 ajax 的区别是什么?

区别一：

Ajax（异步Javascript和XML的简称）是一种客户端技术，通常用于更新页面内容而不刷新它。

而Node.js是服务器端Javascript，是一个基于 Chrome V8 引擎的 JavaScript 运行环境，是一个让 JavaScript 运行在服务端的开发平台。

区别二：

Node.js不在浏览器中执行，而是由服务器执行。而Ajax在浏览器中执行。

区别三：

node主要是提供后台服务，而ajax主要是用来前后台数据的请求与发送数据的。

♥︎ ♥︎ 请使用 Node.js 原生的 HTTP 模块创建一个 web Server。

const http = require('http')
const port = 3000
const server = http.createServer((req, res) => {
 res.statusCode = 200
 res.setHeader('Content-Type', 'text/plain')
 res.end('Hello World')
})
server.listen(port, () => {
 console.log( Server is running on http://127.0.0.1:${port}/ )
})

获取 cookie： req.headers.cookie

设置 cookie： res.writeHead(200, { ‘Set-Cookie’: ‘myCookie=test’, ‘Content-Type’: ‘text/plain’ })

node操作cookie参考请点击

♥︎ ♥︎ ♥︎ setImmediate 和 setTimeOut 区别在哪里?

setImmediate 和 setTimeOut 都是延迟加载。而当这两个定时器同时运行在主模块时，运行顺序是不一定的。setTimeOut 受进程性能的约束，有可能比 setImmediate 快，也有可能慢于 setImmediate。

而在 I/O 事件的回调中，setImmediate 方法的回调永远在 setTimeOut 的回调前执行。

♥︎ ♥︎ ♥︎ 如何更新 Node.js 的版本?

npm install npm -g (在命令行中将 npm 在重新安装一遍，如需指定版本需要加上 @版本数字 )

♥︎ ♥︎ ♥︎ nextTick 和 setImmediate 的区别是什么？

nextTick 和 setImmediate 都是延迟加载。但是 nextTick 是放在当前队列的最后一个执行，

setImmediate 是在下一个队列的队首执行

♥︎ ♥︎ ♥︎ 请使用 Node.js 编写代码实现遍历文件夹并输出所有的文件名

const fs = require('fs')
const path = require('path')
const getAllFile = function (dir) {
 function traverse(dir) {
 fs.readdirSync(dir).forEach(file => {
 const pathname = path.join(dir, file)
 if (fs.statSync(pathname).isDirectory()) {
 traverse(pathname)
 } else {
 console.log(file)
 }
 })
 }
 traverse(dir)
}

♥︎ ♥︎ ♥︎ token 存储在 localStorage 里，当过期时过期的 token 怎么处理？

当前端进行页面跳转或者需要鉴权的操作时，会发送请求到后台，而 token 会跟随请求头一起发送，后台通过请求头接收到 token 时会进行判断，若是过期了，应该返回一个 401 的状态码给前端，前端接收到以后，应该重定向到登录页要求用户重新登陆。

♥︎ ♥︎ ♥︎ MySQL 和 MongoDB 的区别，他们都是怎么查询语句的，具体讲讲怎么查询的？

区别

数据库模型 mysql 是关系型数据库，现在使用最多的数据存储技术 mongodb 是非关系型数据库，并且是非关系型数据库中最像关系型的数据库

存储方式 mongodb-以类 JSON 的文档的格式存储 mysql-不同引擎有不同的存储方式

数据处理方式 mongodb-基于内存，将热数据存放在物理内存中，从而达到高速读写 mysql-不同引擎有自己的特点

查询语句

mongodb 的查询语句类似于 js 使用 api 的场景，通过 . 来调用，并传递参数来进行控制查询内容如：查询 username 为张三，age 为 27 的数据

db.users.find({ username: '张三', age: 27 })

而 mysql 则是标准的 sql 语句，同样查询代码如下：

select * from users where "username" = "张三" and age = 27

♥︎ ♥︎ ♥︎ 什么是服务端渲染，服务端渲染的优点？

服务端渲染：页面渲染过程是在服务端完成，最终的 HTML 字符串，直接通过请求发送给客户端。

服务器端渲染的优势就是利于 SEO 优化，首屏加载快，因为客户端接收到的是完整的 HTML 页面。

♥︎ ♥︎ ♥︎ 如何在 Node.js 中操作 MongoDb 数据库

一、在 Nodejs 中使用 Mongodb

Nodejs 操作 mongodb 数据库官方文档：

http://mongodb.github.io/node-mongodb-native/

npm install mongodb --save 
或者
cnpm install mongodb --save 
或者
yarn add mongodb

二、Nodejs 操作 MongoDb 数据库

// 1 cnpm install mongodb --save

//2、引入mongodb
const { MongoClient } = require('mongodb');

//3、定义数据库连接的地址
const url = 'mongodb://127.0.0.1:27017';

//4、定义要操作的数据库
const dbName = 'itying';

//5、实例化MongoClient 传入数据库连接地址
const client = new MongoClient(url, { useUnifiedTopology: true });

//6、连接数据库 操作数据

client.connect((err) => {
    if (err) {
        console.log(err);
        return;
    }
    console.log("数据库连接成功");

    let db = client.db(dbName);

    // //1、查找数据
    db.collection("user").find({"age":13}).toArray((err,data)=>{
       if(err){ 
            console.log(err);
            return;
        }
        console.log(data);       
        //操作数据库完毕以后一定要 关闭数据库连接
        client.close();
    })


    //2、增加数据

    // db.collection("user").insertOne({"username":"nodejs操作mongodb","age":10},(err,result)=>{
    //     if(err){ //增加失败
    //         console.log(err);
    //         return;
    //     }
    //     console.log("增加成功");
    //     console.log(result);
    //       //操作数据库完毕以后一定要 关闭数据库连接
    //      client.close();

    // })


    //3、修改数据

    // db.collection("user").updateOne({ "name": "zhangsan" }, { $set: { "age": 10 } }, (err, result) => {
    //     if (err) { //修改失败
    //         console.log(err);
    //         return;
    //     }
    //     console.log("修改成功");
    //     console.log(result);
    //     //操作数据库完毕以后一定要 关闭数据库连接
    //     client.close();
    // })


    //4、删除一条数据

    // db.collection("user").deleteOne({ "username": "nodejs" }, (err)=>{

    //     if (err) { 
    //         console.log(err);
    //         return;
    //     }
    //     console.log("删除一条数据成功");
    //     client.close();
    // })

     //5、删除多条数据

    // db.collection("user").deleteMany({ "username": "nodejs" }, (err)=>{

    //     if (err) { 
    //         console.log(err);
    //         return;
    //     }
    //     console.log("删除多条数据成功");
    //     client.close();
    // })

})

♥︎ ♥︎ ♥︎ 谈谈 socket 的三种常见使用方式

第一种方式是 netSocket，主要使用的是 node 中的 net 模块。服务端通过 new net.createServer() 创建服务，使用 on(‘connection’) 方法建立连接，在回调函数中即可获取到客户端发送的信息。客户端通过 new net.Socket() 创建 Socket，通过 connect 连接指定端口和域名后，即可调用 write 方法发送数据

第二种方式是 webSocket，服务端引入第三方插件 ws 创建 socket 服务，客户端使用 H5 新增 API new WebSocket 连接服务端，通过 send 方法发送数据，onmessage 方法接收数据

第三种方式是 socket.io，服务端引入 socket.io’ 模块创建服务，客户端引入 socket.io.js’ 文件，建立连接后，客户端和服务端都是通过 on 方法接收数据，都是使用 emit 方法发送数据。

♥︎ ♥︎ ♥︎ 前后端数据交互的常见使用方式

cookie：前端可以直接设置或获取 cookie，后端可以使用 req.set(‘set-cookie’， ‘’)设置 cookie，在前端发送请求时通过 req 的 header 字段中获取 cookie

利用 AJAX，和 JQuery 中已经封装好的 $.ajax、$.post、$.getJSON 通过创建一个 XMLHttpRequest 对象，来进行前后端交互。

服务端渲染，浏览器请求到的内容可以通过后端加工一下，将数据直接渲染好，再返回给浏览器。

♥︎ ♥︎ ♥︎ Node.js 优缺点以及适用场景

优点

Node.js 采用事件驱动、异步编程，为网络服务而设计。简单易学，可以很快上手做后端设计。

Node.js 非阻塞模式的 IO 处理给 Node.js 带来在相对低系统资源耗用下的高性能与出众的负载能力，非常适合用作依赖其它 IO 资源的中间层服务。

Node.js 轻量高效，可以认为是数据密集型分布式部署环境下的实时应用系统的完美解决方案。

缺点

单线程，可靠性低，一旦这个进程崩掉，那么整个 web 服务就崩掉了。

开源组件库质量参差不齐，更新快，向下不兼容

不适合做企业级应用开发，特别是复杂业务逻辑的，代码不好维护，事务支持不是很好。

适用场景

大量 Ajax 请求的应用，例如个性化应用，每个用户看到的页面都不一样，需要在页面加载的时候发起Ajax 请求，NodeJS 能响应大量的并发请求。

实时应用：如在线聊天，实时通知推送等等

工具类应用：海量的工具，小到前端压缩部署，大到桌面图形界面应用程序

总而言之，NodeJS 适合运用在高并发、I/O 密集、少量业务逻辑的场景。

♥︎ ♥︎ ♥︎ 说说对 Node 中的 process 的理解？有哪些常用方法？

一、是什么

process 对象是一个全局变量，提供了有关当前 Node.js 进程的信息并对其进行控制，作为一个全局变量

我们都知道，进程计算机系统进行资源分配和调度的基本单位，是操作系统结构的基础，是线程的容器

当我们启动一个js文件，实际就是开启了一个服务进程，每个进程都拥有自己的独立空间地址、数据栈，像另一个进程无法访问当前进程的变量、数据结构，只有数据通信后，进程之间才可以数据共享

由于JavaScript是一个单线程语言，所以通过node xxx启动一个文件后，只有一条主线程

二、属性与方法

关于process常见的属性有如下：

process.env：环境变量，例如通过 `process.env.NODE_ENV 获取不同环境项目配置信息
process.nextTick：这个在谈及 EventLoop 时经常为会提到
process.pid：获取当前进程id
process.ppid：当前进程对应的父进程
process.cwd()：获取当前进程工作目录，
process.platform：获取当前进程运行的操作系统平台
process.uptime()：当前进程已运行时间，例如：pm2 守护进程的 uptime 值
进程事件： process.on(‘uncaughtException’,cb) 捕获异常信息、 process.on(‘exit’,cb）进程推出监听
三个标准流： process.stdout 标准输出、 process.stdin 标准输入、 process.stderr 标准错误输出
process.title 指定进程名称，有的时候需要给进程指定一个名称

下面再稍微介绍下某些方法的使用：

process.cwd()

返回当前 Node 进程执行的目录

一个 Node 模块 A 通过 NPM 发布，项目 B 中使用了模块 A。在 A 中需要操作 B 项目下的文件时，就可以用 process.cwd() 来获取 B 项目的路径

process.argv

在终端通过 Node 执行命令的时候，通过 process.argv 可以获取传入的命令行参数，返回值是一个数组：

0: Node 路径（一般用不到，直接忽略）
1: 被执行的 JS 文件路径（一般用不到，直接忽略）
2~n: 真实传入命令的参数

所以，我们只要从 process.argv[2] 开始获取就好了

const args = process.argv.slice(2);

process.env

返回一个对象，存储当前环境相关的所有信息，一般很少直接用到。

一般我们会在 process.env 上挂载一些变量标识当前的环境。比如最常见的用 process.env.NODE_ENV 区分 development 和 production

在 vue-cli 的源码中也经常会看到 process.env.VUE_CLI_DEBUG 标识当前是不是 DEBUG 模式

process.nextTick()

我们知道NodeJs是基于事件轮询，在这个过程中，同一时间只会处理一件事情

在这种处理模式下，process.nextTick()就是定义出一个动作，并且让这个动作在下一个事件轮询的时间点上执行

例如下面例子将一个foo函数在下一个时间点调用

function foo() {
    console.error('foo');
}

process.nextTick(foo);
console.error('bar');

输出结果为bar、foo

虽然下述方式也能实现同样效果：

setTimeout(foo, 0);
console.log('bar');

两者区别在于：

process.nextTick()会在这一次event loop的call stack清空后（下一次event loop开始前）再调用callback
setTimeout()是并不知道什么时候call stack清空的，所以何时调用callback函数是不确定的

♥︎ ♥︎ ♥︎ 说说对 Node 中的 fs模块的理解? 有哪些常用方法

一、是什么

fs（filesystem），该模块提供本地文件的读写能力，基本上是POSIX文件操作命令的简单包装

可以说，所有与文件的操作都是通过fs核心模块实现

导入模块如下：

const fs = require('fs');

这个模块对所有文件系统操作提供异步（不具有sync 后缀）和同步（具有 sync 后缀）两种操作方式，而供开发者选择

二、文件知识

在计算机中有关于文件的知识：

权限位 mode
标识位 flag
文件描述为 fd

权限位 mode

针对文件所有者、文件所属组、其他用户进行权限分配，其中类型又分成读、写和执行，具备权限位4、2、1，不具备权限为0

如在linux查看文件权限位：

drwxr-xr-x 1 PandaShen 197121 0 Jun 28 14:41 core
-rw-r--r-- 1 PandaShen 197121 293 Jun 23 17:44 index.md

在开头前十位中，d为文件夹，-为文件，后九位就代表当前用户、用户所属组和其他用户的权限位，按每三位划分，分别代表读（r）、写（w）和执行（x），- 代表没有当前位对应的权限

标识位

标识位代表着对文件的操作方式，如可读、可写、即可读又可写等等，如下表所示：

符号	含义
r	读取文件，如果文件不存在则抛出异常。
r+	读取并写入文件，如果文件不存在则抛出异常。
rs	读取并写入文件，指示操作系统绕开本地文件系统缓存。
w	写入文件，文件不存在会被创建，存在则清空后写入。
wx	写入文件，排它方式打开。
w+	读取并写入文件，文件不存在则创建文件，存在则清空后写入。
wx+	和 w+ 类似，排他方式打开。
a	追加写入，文件不存在则创建文件。
ax	与 a 类似，排他方式打开。
a+	读取并追加写入，不存在则创建。
ax+	与 a+ 类似，排他方式打开。

文件描述为 fd

操作系统会为每个打开的文件分配一个名为文件描述符的数值标识，文件操作使用这些文件描述符来识别与追踪每个特定的文件

Window 系统使用了一个不同但概念类似的机制来追踪资源，为方便用户，NodeJS 抽象了不同操作系统间的差异，为所有打开的文件分配了数值的文件描述符

在 NodeJS 中，每操作一个文件，文件描述符是递增的，文件描述符一般从 3 开始，因为前面有 0、1、2三个比较特殊的描述符，分别代表 process.stdin（标准输入）、process.stdout（标准输出）和 process.stderr（错误输出）

三、方法

下面针对fs模块常用的方法进行展开：

文件读取
文件写入
文件追加写入
文件拷贝
创建目录

文件读取

fs.readFileSync

同步读取，参数如下：

第一个参数为读取文件的路径或文件描述符
第二个参数为 options，默认值为 null，其中有 encoding（编码，默认为 null）和 flag（标识位，默认为 r），也可直接传入 encoding

结果为返回文件的内容

const fs = require("fs");

let buf = fs.readFileSync("1.txt");
let data = fs.readFileSync("1.txt", "utf8");

console.log(buf); // <Buffer 48 65 6c 6c 6f>
console.log(data); // Hello

fs.readFile

异步读取方法 readFile 与 readFileSync 的前两个参数相同，最后一个参数为回调函数，函数内有两个参数 err（错误）和 data（数据），该方法没有返回值，回调函数在读取文件成功后执行

const fs = require("fs");

fs.readFile("1.txt", "utf8", (err, data) => {
   if(!err){
       console.log(data); // Hello
   }
});

文件写入

writeFileSync

同步写入，有三个参数：

第一个参数为写入文件的路径或文件描述符
第二个参数为写入的数据，类型为 String 或 Buffer
第三个参数为 options，默认值为 null，其中有 encoding（编码，默认为 utf8）、 flag（标识位，默认为 w）和 mode（权限位，默认为 0o666），也可直接传入 encoding

const fs = require("fs");

fs.writeFileSync("2.txt", "Hello world");
let data = fs.readFileSync("2.txt", "utf8");

console.log(data); // Hello world

writeFile

异步写入，writeFile 与 writeFileSync 的前三个参数相同，最后一个参数为回调函数，函数内有一个参数 err（错误），回调函数在文件写入数据成功后执行

const fs = require("fs");

fs.writeFile("2.txt", "Hello world", err => {
    if (!err) {
        fs.readFile("2.txt", "utf8", (err, data) => {
            console.log(data); // Hello world
        });
    }
});

文件追加写入

appendFileSync

参数如下：

第一个参数为写入文件的路径或文件描述符
第二个参数为写入的数据，类型为 String 或 Buffer
第三个参数为 options，默认值为 null，其中有 encoding（编码，默认为 utf8）、 flag（标识位，默认为 a）和 mode（权限位，默认为 0o666），也可直接传入 encoding

const fs = require("fs");

fs.appendFileSync("3.txt", " world");
let data = fs.readFileSync("3.txt", "utf8");

appendFile

异步追加写入方法 appendFile 与 appendFileSync 的前三个参数相同，最后一个参数为回调函数，函数内有一个参数 err（错误），回调函数在文件追加写入数据成功后执行

const fs = require("fs");

fs.appendFile("3.txt", " world", err => {
    if (!err) {
        fs.readFile("3.txt", "utf8", (err, data) => {
            console.log(data); // Hello world
        });
    }
});

文件拷贝

copyFileSync

同步拷贝

const fs = require("fs");

fs.copyFileSync("3.txt", "4.txt");
let data = fs.readFileSync("4.txt", "utf8");

console.log(data); // Hello world

copyFile

异步拷贝

const fs = require("fs");

fs.copyFile("3.txt", "4.txt", () => {
    fs.readFile("4.txt", "utf8", (err, data) => {
        console.log(data); // Hello world
    });
});

创建目录

mkdirSync

同步创建，参数为一个目录的路径，没有返回值，在创建目录的过程中，必须保证传入的路径前面的文件目录都存在，否则会抛出异常

// 假设已经有了 a 文件夹和 a 下的 b 文件夹
fs.mkdirSync("a/b/c")

mkdir

异步创建，第二个参数为回调函数

fs.mkdir("a/b/c", err => {
    if (!err) console.log("创建成功");
});

♥︎ ♥︎ ♥︎ 说说对 Node 中的 Buffer 的理解？应用场景？

一、是什么

在Node应用中，需要处理网络协议、操作数据库、处理图片、接收上传文件等，在网络流和文件的操作中，要处理大量二进制数据，而Buffer就是在内存中开辟一片区域（初次初始化为8KB），用来存放二进制数据

在上述操作中都会存在数据流动，每个数据流动的过程中，都会有一个最小或最大数据量

如果数据到达的速度比进程消耗的速度快，那么少数早到达的数据会处于等待区等候被处理。反之，如果数据到达的速度比进程消耗的数据慢，那么早先到达的数据需要等待一定量的数据到达之后才能被处理

这里的等待区就指的缓冲区（Buffer），它是计算机中的一个小物理单位，通常位于计算机的 RAM 中

简单来讲，Nodejs不能控制数据传输的速度和到达时间，只能决定何时发送数据，如果还没到发送时间，则将数据放在Buffer中，即在RAM中，直至将它们发送完毕

上面讲到了Buffer是用来存储二进制数据，其的形式可以理解成一个数组，数组中的每一项，都可以保存8位二进制：00000000，也就是一个字节

例如：

const buffer = Buffer.from("why")

其存储过程如下图所示：

二、使用方法

Buffer 类在全局作用域中，无须require导入

创建Buffer的方法有很多种，我们讲讲下面的两种常见的形式：

Buffer.from()
Buffer.alloc()

Buffer.from()

const b1 = Buffer.from('10');
const b2 = Buffer.from('10', 'utf8');
const b3 = Buffer.from([10]);
const b4 = Buffer.from(b3);

console.log(b1, b2, b3, b4); // <Buffer 31 30> <Buffer 31 30> <Buffer 0a> <Buffer 0a>

Buffer.alloc()

const bAlloc1 = Buffer.alloc(10); // 创建一个大小为 10 个字节的缓冲区
const bAlloc2 = Buffer.alloc(10, 1); // 建一个长度为 10 的 Buffer,其中全部填充了值为 `1` 的字节
console.log(bAlloc1); // <Buffer 00 00 00 00 00 00 00 00 00 00>
console.log(bAlloc2); // <Buffer 01 01 01 01 01 01 01 01 01 01>

在上面创建buffer后，则能够toString的形式进行交互，默认情况下采取utf8字符编码形式，如下

const buffer = Buffer.from("你好");
console.log(buffer);
// <Buffer e4 bd a0 e5 a5 bd>
const str = buffer.toString();
console.log(str);
// 你好

如果编码与解码不是相同的格式则会出现乱码的情况，如下：

const buffer = Buffer.from("你好","utf-8 ");
console.log(buffer);
// <Buffer e4 bd a0 e5 a5 bd>
const str = buffer.toString("ascii");
console.log(str); 
// d= e%=

当设定的范围导致字符串被截断的时候，也会存在乱码情况，如下：

const buf = Buffer.from('Node.js 技术栈', 'UTF-8');

console.log(buf)          // <Buffer 4e 6f 64 65 2e 6a 73 20 e6 8a 80 e6 9c af e6 a0 88>
console.log(buf.length)   // 17

console.log(buf.toString('UTF-8', 0, 9))  // Node.js �
console.log(buf.toString('UTF-8', 0, 11)) // Node.js 技

所支持的字符集有如下：

ascii：仅支持 7 位 ASCII 数据，如果设置去掉高位的话，这种编码是非常快的
utf8：多字节编码的 Unicode 字符，许多网页和其他文档格式都使用 UTF-8
utf16le：2 或 4 个字节，小字节序编码的 Unicode 字符，支持代理对（U+10000至 U+10FFFF）
ucs2，utf16le 的别名
base64：Base64 编码
latin：一种把 Buffer 编码成一字节编码的字符串的方式
binary：latin1 的别名，
hex：将每个字节编码为两个十六进制字符

三、应用场景

Buffer的应用场景常常与流的概念联系在一起，例如有如下：

I/O操作
加密解密
zlib.js

I/O操作

通过流的形式，将一个文件的内容读取到另外一个文件

const fs = require('fs');

const inputStream = fs.createReadStream('input.txt'); // 创建可读流
const outputStream = fs.createWriteStream('output.txt'); // 创建可写流

inputStream.pipe(outputStream); // 管道读写

加解密

在一些加解密算法中会遇到使用 Buffer，例如 crypto.createCipheriv 的第二个参数 key 为 string 或 Buffer 类型

zlib.js

zlib.js 为 Node.js 的核心库之一，其利用了缓冲区（Buffer）的功能来操作二进制数据流，提供了压缩或解压功能

♥︎ ♥︎ ♥︎ 说说对 Node 中的 Stream 的理解？应用场景？

一、是什么

流（Stream），是一个数据传输手段，是端到端信息交换的一种方式，而且是有顺序的,是逐块读取数据、处理内容，用于顺序读取输入或写入输出

Node.js中很多对象都实现了流，总之它是会冒数据（以 Buffer 为单位）

它的独特之处在于，它不像传统的程序那样一次将一个文件读入内存，而是逐块读取数据、处理其内容，而不是将其全部保存在内存中

流可以分成三部分：source、dest、pipe

在source和dest之间有一个连接的管道pipe,它的基本语法是source.pipe(dest)，source和dest就是通过pipe连接，让数据从source流向了dest，如下图所示：

二、种类

在NodeJS，几乎所有的地方都使用到了流的概念，分成四个种类：

可写流：可写入数据的流。例如 fs.createWriteStream() 可以使用流将数据写入文件
可读流：可读取数据的流。例如fs.createReadStream() 可以从文件读取内容
双工流：既可读又可写的流。例如 net.Socket
转换流：可以在数据写入和读取时修改或转换数据的流。例如，在文件压缩操作中，可以向文件写入压缩数据，并从文件中读取解压数据

在NodeJS中HTTP服务器模块中，request 是可读流，response 是可写流。还有fs 模块，能同时处理可读和可写文件流

可读流和可写流都是单向的，比较容易理解，而另外两个是双向的

双工流

之前了解过websocket通信，是一个全双工通信，发送方和接受方都是各自独立的方法，发送和接收都没有任何关系

如下图所示：

基本代码如下：

const { Duplex } = require('stream');

const myDuplex = new Duplex({
  read(size) {
    // ...
  },
  write(chunk, encoding, callback) {
    // ...
  }
});

双工流

双工流的演示图如下所示：

除了上述压缩包的例子，还比如一个 babel，把es6转换为，我们在左边写入 es6，从右边读取 es5

基本代码如下所示：

const { Transform } = require('stream');

const myTransform = new Transform({
  transform(chunk, encoding, callback) {
    // ...
  }
});

三、应用场景

stream的应用场景主要就是处理IO操作，而http请求和文件操作都属于IO操作

思想一下，如果一次IO操作过大，硬件的开销就过大，而将此次大的IO操作进行分段操作，让数据像水管一样流动，知道流动完成

常见的场景有：

get请求返回文件给客户端
文件操作
一些打包工具的底层操作

get请求返回文件给客户端

使用stream流返回文件，res也是一个stream对象，通过pipe管道将文件数据返回

const server = http.createServer(function (req, res) {
    const method = req.method; // 获取请求方法
    if (method === 'GET') { // get 请求
        const fileName = path.resolve(__dirname, 'data.txt');
        let stream = fs.createReadStream(fileName);
        stream.pipe(res); // 将 res 作为 stream 的 dest
    }
});
server.listen(8000);

文件操作

创建一个可读数据流readStream，一个可写数据流writeStream，通过pipe管道把数据流转过去

const fs = require('fs')
const path = require('path')

// 两个文件名
const fileName1 = path.resolve(__dirname, 'data.txt')
const fileName2 = path.resolve(__dirname, 'data-bak.txt')
// 读取文件的 stream 对象
const readStream = fs.createReadStream(fileName1)
// 写入文件的 stream 对象
const writeStream = fs.createWriteStream(fileName2)
// 通过 pipe执行拷贝，数据流转
readStream.pipe(writeStream)
// 数据读取完成监听，即拷贝完成
readStream.on('end', function () {
    console.log('拷贝完成')
})

一些打包工具的底层操作

目前一些比较火的前端打包构建工具，都是通过node.js编写的，打包和构建的过程肯定是文件频繁操作的过程，离不来stream，如gulp

♥︎ ♥︎ ♥︎ 说说Node中的EventEmitter? 如何实现一个EventEmitter?

一、是什么

我们了解到，Node 采用了事件驱动机制，而EventEmitter 就是Node实现事件驱动的基础

在EventEmitter的基础上，Node 几乎所有的模块都继承了这个类，这些模块拥有了自己的事件，可以绑定／触发监听器，实现了异步操作

Node.js 里面的许多对象都会分发事件，比如 fs.readStream 对象会在文件被打开的时候触发一个事件

这些产生事件的对象都是 events.EventEmitter 的实例，这些对象有一个 eventEmitter.on() 函数，用于将一个或多个函数绑定到命名事件上

二、使用方法

Node 的events模块只提供了一个EventEmitter类，这个类实现了Node异步事件驱动架构的基本模式——观察者模式

在这种模式中，被观察者(主体)维护着一组其他对象派来(注册)的观察者，有新的对象对主体感兴趣就注册观察者，不感兴趣就取消订阅，主体有更新的话就依次通知观察者们

基本代码如下所示：

const EventEmitter = require('events')

class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter()

function callback() {
    console.log('触发了event事件！')
}
myEmitter.on('event', callback)
myEmitter.emit('event')
myEmitter.removeListener('event', callback);

通过实例对象的on方法注册一个名为event的事件，通过emit方法触发该事件，而removeListener用于取消事件的监听

关于其常见的方法如下：

emitter.addListener/on(eventName, listener) ：添加类型为 eventName 的监听事件到事件数组尾部
emitter.prependListener(eventName, listener)：添加类型为 eventName 的监听事件到事件数组头部
emitter.emit(eventName[, …args])：触发类型为 eventName 的监听事件
emitter.removeListener/off(eventName, listener)：移除类型为 eventName 的监听事件
emitter.once(eventName, listener)：添加类型为 eventName 的监听事件，以后只能执行一次并删除
emitter.removeAllListeners([eventName])：移除全部类型为 eventName 的监听事件

三、实现过程

通过上面的方法了解，EventEmitter是一个构造函数，内部存在一个包含所有事件的对象

class EventEmitter {
    constructor() {
        this.events = {};
    }
}

其中events存放的监听事件的函数的结构如下：

{
  "event1": [f1,f2,f3]，
  "event2": [f4,f5]，
  ...
}

然后开始一步步实现实例方法，首先是emit，第一个参数为事件的类型，第二个参数开始为触发事件函数的参数，实现如下：

emit(type, ...args) {
    this.events[type].forEach((item) => {
        Reflect.apply(item, this, args);
    });
}

当实现了emit方法之后，然后实现on、addListener、prependListener这三个实例方法，都是添加事件监听触发函数，实现也是大同小异

on(type, handler) {
    if (!this.events[type]) {
        this.events[type] = [];
    }
    this.events[type].push(handler);
}

addListener(type,handler){
    this.on(type,handler)
}

prependListener(type, handler) {
    if (!this.events[type]) {
        this.events[type] = [];
    }
    this.events[type].unshift(handler);
}

紧接着就是实现事件监听的方法removeListener/on

removeListener(type, handler) {
    if (!this.events[type]) {
        return;
    }
    this.events[type] = this.events[type].filter(item => item !== handler);
}

off(type,handler){
    this.removeListener(type,handler)
}

最后再来实现once方法，再传入事件监听处理函数的时候进行封装，利用闭包的特性维护当前状态，通过fired属性值判断事件函数是否执行过

once(type, handler) {
    this.on(type, this._onceWrap(type, handler, this));
  }

  _onceWrap(type, handler, target) {
    const state = { fired: false, handler, type , target};
    const wrapFn = this._onceWrapper.bind(state);
    state.wrapFn = wrapFn;
    return wrapFn;
  }

  _onceWrapper(...args) {
    if (!this.fired) {
      this.fired = true;
      Reflect.apply(this.handler, this.target, args);
      this.target.off(this.type, this.wrapFn);
    }
 }

完整代码如下：

class EventEmitter {
    constructor() {
        this.events = {};
    }

    on(type, handler) {
        if (!this.events[type]) {
            this.events[type] = [];
        }
        this.events[type].push(handler);
    }

    addListener(type,handler){
        this.on(type,handler)
    }

    prependListener(type, handler) {
        if (!this.events[type]) {
            this.events[type] = [];
        }
        this.events[type].unshift(handler);
    }

    removeListener(type, handler) {
        if (!this.events[type]) {
            return;
        }
        this.events[type] = this.events[type].filter(item => item !== handler);
    }

    off(type,handler){
        this.removeListener(type,handler)
    }

    emit(type, ...args) {
        this.events[type].forEach((item) => {
            Reflect.apply(item, this, args);
        });
    }

    once(type, handler) {
        this.on(type, this._onceWrap(type, handler, this));
    }

    _onceWrap(type, handler, target) {
        const state = { fired: false, handler, type , target};
        const wrapFn = this._onceWrapper.bind(state);
        state.wrapFn = wrapFn;
        return wrapFn;
    }

    _onceWrapper(...args) {
        if (!this.fired) {
            this.fired = true;
            Reflect.apply(this.handler, this.target, args);
            this.target.off(this.type, this.wrapFn);
        }
    }
}

测试代码如下：

const ee = new EventEmitter();// 注册所有事件ee.once('wakeUp', (name) => { console.log(`${name} 1`); });ee.on('e

♥︎ ♥︎ ♥︎ 说说 Node 文件查找的优先级以及 Require 方法的文件查找策略?

一、模块规范

NodeJS对CommonJS进行了支持和实现，让我们在开发node的过程中可以方便的进行模块化开发：

在Node中每一个js文件都是一个单独的模块
模块中包括CommonJS规范的核心变量：exports、module.exports、require
通过上述变量进行模块化开发

而模块化的核心是导出与导入，在Node中通过exports与module.exports负责对模块中的内容进行导出，通过require函数导入其他模块（自定义模块、系统模块、第三方库模块）中的内容

二、查找策略

require方法接收一下几种参数的传递：

原生模块：http、fs、path等
相对路径的文件模块：./mod或../mod
绝对路径的文件模块：/pathtomodule/mod
目录作为模块：./dirname
非原生模块的文件模块：mod

require参数较为简单，但是内部的加载却是十分复杂的，其加载优先级也各自不同，如下图：

从上图可以看见，文件模块存在缓存区，寻找模块路径的时候都会优先从缓存中加载已经存在的模块

原生模块

而像原生模块这些，通过require 方法在解析文件名之后，优先检查模块是否在原生模块列表中，如果在则从原生模块中加载

绝对路径、相对路径

如果require绝对路径的文件，则直接查找对应的路径，速度最快

相对路径的模块则相对于当前调用require的文件去查找

如果按确切的文件名没有找到模块，则 NodeJs 会尝试带上 .js、.json 或 .node 拓展名再加载

目录作为模块

默认情况是根据根目录中package.json文件的main来指定目录模块，如：

{ "name" : "some-library",
  "main" : "main.js" }

如果这是在./some-library node_modules目录中，则 require('./some-library') 会试图加载 ./some-library/main.js

如果目录里没有 package.json文件，或者 main入口不存在或无法解析，则会试图加载目录下的 index.js 或 index.node 文件

非原生模块

在每个文件中都存在module.paths，表示模块的搜索路径，require就是根据其来寻找文件

在window下输出如下：

[ 'c:\\nodejs\\node_modules',
'c:\\node_modules' ]

可以看出module path的生成规则为：从当前文件目录开始查找node_modules目录；然后依次进入父目录，查找父目录下的node_modules目录，依次迭代，直到根目录下的node_modules目录

当都找不到的时候，则会从系统NODE_PATH环境变量查找

举个例子：

如果在/home/ry/projects/foo.js文件里调用了 require('bar.js')，则 Node.js 会按以下顺序查找：

/home/ry/projects/node_modules/bar.js
/home/ry/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js

这使得程序本地化它们的依赖，避免它们产生冲突

三、总结

通过上面模块的文件查找策略之后，总结下文件查找的优先级：

缓存的模块优先级最高
如果是内置模块，则直接返回，优先级仅次缓存的模块
如果是绝对路径 / 开头，则从根目录找
如果是相对路径 ./开头，则从当前require文件相对位置找
如果文件没有携带后缀，先从js、json、node按顺序查找
如果是目录，则根据 package.json的main属性值决定目录下入口文件，默认情况为 index.js
如果文件为第三方模块，则会引入 node_modules 文件，如果不在当前仓库文件中，则自动从上级递归查找，直到根目录

♥︎ ♥︎ ♥︎ 如何实现jwt鉴权机制？说说你的思路

一、是什么

JWT（JSON Web Token），本质就是一个字符串书写规范，如下图，作用是用来在用户和服务器之间传递安全可靠的信息

在目前前后端分离的开发过程中，使用token鉴权机制用于身份验证是最常见的方案，流程如下：

服务器当验证用户账号和密码正确的时候，给用户颁发一个令牌，这个令牌作为后续用户访问一些接口的凭证
后续访问会根据这个令牌判断用户时候有权限进行访问

Token，分成了三部分，头部（Header）、载荷（Payload）、签名（Signature），并以.进行拼接。其中头部和载荷都是以JSON格式存放数据，只是进行了编码

每个JWT都会带有头部信息，这里主要声明使用的算法。声明算法的字段名为alg，同时还有一个typ的字段，默认JWT即可。以下示例中算法为HS256

{  "alg": "HS256",  "typ": "JWT" }

因为JWT是字符串，所以我们还需要对以上内容进行Base64编码，编码后字符串如下：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

payload

载荷即消息体，这里会存放实际的内容，也就是Token的数据声明，例如用户的id和name，默认情况下也会携带令牌的签发时间iat，通过还可以设置过期时间，如下：

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

同样进行Base64编码后，字符串如下：

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ

Signature

签名是对头部和载荷内容进行签名，一般情况，设置一个secretKey，对前两个的结果进行HMACSHA25算法，公式如下：

Signature = HMACSHA256(base64Url(header)+.+base64Url(payload),secretKey)

一旦前面两部分数据被篡改，只要服务器加密用的密钥没有泄露，得到的签名肯定和之前的签名不一致

二、如何实现

Token的使用分成了两部分：

生成token：登录成功的时候，颁发token
验证token：访问某些资源或者接口时，验证token

生成 token

借助第三方库jsonwebtoken，通过jsonwebtoken 的 sign 方法生成一个 token：

第一个参数指的是 Payload
第二个是秘钥，服务端特有
第三个参数是 option，可以定义 token 过期时间

const crypto = require("crypto"),
  jwt = require("jsonwebtoken");
// TODO:使用数据库
// 这里应该是用数据库存储，这里只是演示用
let userList = [];

class UserController {
  // 用户登录
  static async login(ctx) {
    const data = ctx.request.body;
    if (!data.name || !data.password) {
      return ctx.body = {
        code: "000002", 
        message: "参数不合法"
      }
    }
    const result = userList.find(item => item.name === data.name && item.password === crypto.createHash('md5').update(data.password).digest('hex'))
    if (result) {
      // 生成token
      const token = jwt.sign(  
        {
          name: result.name
        },
        "test_token", // secret
        { expiresIn: 60 * 60 } // 过期时间：60 * 60 s
      );
      return ctx.body = {
        code: "0",
        message: "登录成功",
        data: {
          token
        }
      };
    } else {
      return ctx.body = {
        code: "000002",
        message: "用户名或密码错误"
      };
    }
  }
}

module.exports = UserController;

在前端接收到token后，一般情况会通过localStorage进行缓存，然后将token放到HTTP 请求头Authorization 中，关于Authorization 的设置，前面要加上 Bearer ，注意后面带有空格

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  config.headers.common['Authorization'] = 'Bearer ' + token; // 留意这里的 Authorization
  return config;
})

校验token

使用 koa-jwt 中间件进行验证，方式比较简单

/ 注意：放在路由前面
app.use(koajwt({
  secret: 'test_token'
}).unless({ // 配置白名单
  path: [/\/api\/register/, /\/api\/login/]
}))

secret 必须和 sign 时候保持一致
可以通过 unless 配置接口白名单，也就是哪些 URL 可以不用经过校验，像登陆/注册都可以不用校验
校验的中间件需要放在需要校验的路由前面，无法对前面的 URL 进行校验

获取token用户的信息方法如下：

router.get('/api/userInfo',async (ctx,next) =>{    const authorization =  ctx.header.authorization // 获取jwt    const token = authorization.replace('Beraer ','')    const result = jwt.verify(token,'test_token')    ctx.body = result

注意：上述的HMA256加密算法为单秘钥的形式，一旦泄露后果非常的危险

在分布式系统中，每个子系统都要获取到秘钥，那么这个子系统根据该秘钥可以发布和验证令牌，但有些服务器只需要验证令牌

这时候可以采用非对称加密，利用私钥发布令牌，公钥验证令牌，加密算法可以选择RS256

三、优缺点

优点：

json具有通用性，所以可以跨语言
组成简单，字节占用小，便于传输
服务端无需保存会话信息，很容易进行水平扩展
一处生成，多处使用，可以在分布式系统中，解决单点登录问题
可防护CSRF攻击

缺点：

payload部分仅仅是进行简单编码，所以只能用于存储逻辑必需的非敏感信息
需要保护好加密密钥，一旦泄露后果不堪设想
为避免token被劫持，最好使用https协议

♥︎ ♥︎ ♥︎ 如何实现文件上传？说说你的思路

一、是什么

文件上传在日常开发中应用很广泛，我们发微博、发微信朋友圈都会用到了图片上传功能

因为浏览器限制，浏览器不能直接操作文件系统的，需要通过浏览器所暴露出来的统一接口，由用户主动授权发起来访问文件动作，然后读取文件内容进指定内存里，最后执行提交请求操作，将内存里的文件内容数据上传到服务端，服务端解析前端传来的数据信息后存入文件里

对于文件上传，我们需要设置请求头为content-type:multipart/form-data

结构如下：

POST /t2/upload.do HTTP/1.1
User-Agent: SOHUWapRebot
Accept-Language: zh-cn,zh;q=0.5
Accept-Charset: GBK,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Content-Length: 60408
Content-Type:multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Host: w.sohu.com

--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Content-Disposition: form-data; name="city"

Santa colo
--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Content-Disposition: form-data;name="desc"
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
 
...
--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC
Content-Disposition: form-data;name="pic"; filename="photo.jpg"
Content-Type: application/octet-stream
Content-Transfer-Encoding: binary
 
... binary data of the jpg ...
--ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC--

boundary表示分隔符，如果要上传多个表单项，就要使用boundary分割，每个表单项由———XXX开始，以———XXX结尾

而xxx是即时生成的字符串，用以确保整个分隔符不会在文件或表单项的内容中出现

每个表单项必须包含一个 Content-Disposition 头，其他的头信息则为可选项，比如 Content-Type

Content-Disposition 包含了 type 和一个名字为name的 parameter，type 是 form-data，name 参数的值则为表单控件（也即 field）的名字，如果是文件，那么还有一个 filename 参数，值就是文件名

Content-Disposition: form-data; name="user"; filename="logo.png"

至于使用multipart/form-data，是因为文件是以二进制的形式存在，其作用是专门用于传输大型二进制数据，效率高

二、如何实现

关于文件的上传的上传，我们可以分成两步骤：

文件的上传
文件的解析

文件上传

传统前端文件上传的表单结构如下：

<form action="http://localhost:8080/api/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file" value="" multiple="multiple" />
    <input type="submit" value="提交"/>
</form>
action` 就是我们的提交到的接口，`enctype="multipart/form-data"` 就是指定上传文件格式，`input` 的 `name` 属性一定要等于`file

文件解析

在服务器中，这里采用koa2中间件的形式解析上传的文件数据，分别有下面两种形式：

koa-body
koa-multer

koa-body

安装依赖

npm install koa-body

引入koa-body中间件

const koaBody = require('koa-body');
app.use(koaBody({
    multipart: true,
    formidable: {
        maxFileSize: 200*1024*1024    // 设置上传文件大小最大限制，默认2M
    }
}));

获取上传的文件

const file = ctx.request.files.file; // 获取上传文件

获取文件数据后，可以通过fs模块将文件保存到指定目录

router.post('/uploadfile', async (ctx, next) => {
  // 上传单个文件
  const file = ctx.request.files.file; // 获取上传文件
  // 创建可读流
  const reader = fs.createReadStream(file.path);
  let filePath = path.join(__dirname, 'public/upload/') + `/${file.name}`;
  // 创建可写流
  const upStream = fs.createWriteStream(filePath);
  // 可读流通过管道写入可写流
  reader.pipe(upStream);
  return ctx.body = "上传成功！";
});

koa-multer

安装依赖：

npm install koa-multer

使用 multer 中间件实现文件上传

const storage = multer.diskStorage({  destination: (req, file, cb) => {    cb(null, "./upload/")  },  filename: (req, file, cb) => {    cb(null, Date.now() + path.extname(file.originalname))  }})
const upload = multer({  storage});
const fileRouter = new Router();
fileRouter.post("/upload", upload.single('file'), (ctx, next) => {  console.log(ctx.req.file); // 获取文件})app.use(fileRouter.routes());

♥︎ ♥︎ ♥︎ 如果让你来设计一个分页功能, 你会怎么设计? 前后端如何交互?

一、是什么

在我们做数据查询的时候，如果数据量很大，比如几万条数据，放在一个页面显示的话显然不友好，这时候就需要采用分页显示的形式，如每次只显示10条数据

要实现分页功能，实际上就是从结果集中显示第1~~10条记录作为第1页,显示第11~~20条记录作为第2页，以此类推

因此，分页实际上就是从结果集中截取出第M~N条记录

二、如何实现

前端实现分页功能，需要后端返回必要的数据，如总的页数，总的数据量，当前页，当前的数据

{
 "totalCount": 1836,   // 总的条数
 "totalPages": 92,  // 总页数
 "currentPage": 1   // 当前页数
 "data": [     // 当前页的数据
   {
 ...
   }
]

后端采用mysql作为数据的持久性存储

前端向后端发送目标的页码page以及每页显示数据的数量pageSize，默认情况每次取10条数据，则每一条数据的起始位置start为：

const start = (page - 1) * pageSize

当确定了limit和start的值后，就能够确定SQL语句：

const sql = `SELECT * FROM record limit ${pageSize} OFFSET ${start};`

上诉SQL语句表达的意思为：截取从start到start+pageSize之间（左闭右开）的数据

关于查询数据总数的SQL语句为，record为表名：

SELECT COUNT(*) FROM record

因此后端的处理逻辑为：

获取用户参数页码数page和每页显示的数目 pageSize ，其中page 是必须传递的参数，pageSize为可选参数，默认为10
编写 SQL 语句，利用 limit 和 OFFSET 关键字进行分页查询
查询数据库，返回总数据量、总页数、当前页、当前页数据给前端

代码如下所示：

router.all('/api', function (req, res, next) {
  var param = '';
  // 获取参数
  if (req.method == "POST") {
    param = req.body;
  } else {
    param = req.query || req.params;
  }
  if (param.page == '' || param.page == null || param.page == undefined) {
    res.end(JSON.stringify({ msg: '请传入参数page', status: '102' }));
    return;
  }
  const pageSize = param.pageSize || 10;
  const start = (param.page - 1) * pageSize;
  const sql = `SELECT * FROM record limit ${pageSize} OFFSET ${start};`
  pool.getConnection(function (err, connection) {
    if (err) throw err;
    connection.query(sql, function (err, results) {
      connection.release();
      if (err) {
        throw err
      } else {
        // 计算总页数
        var allCount = results[0][0]['COUNT(*)'];
        var allPage = parseInt(allCount) / 20;
        var pageStr = allPage.toString();
        // 不能被整除
        if (pageStr.indexOf('.') > 0) {
          allPage = parseInt(pageStr.split('.')[0]) + 1;
        }
        var list = results[1];
        res.end(JSON.stringify({ msg: '操作成功', status: '200', totalPages: allPage, currentPage: param.page, totalCount: allCount, data: list }));
      }
    })
  })
});

三、总结

通过上面的分析，可以看到分页查询的关键在于，要首先确定每页显示的数量pageSize，然后根据当前页的索引pageIndex（从1开始），确定LIMIT和OFFSET应该设定的值：

LIMIT 总是设定为 pageSize
OFFSET 计算公式为 pageSize * (pageIndex - 1)

确定了这两个值，就能查询出第 N页的数据

♥︎ ♥︎ ♥︎ ♥︎ koa 中间件的实现原理

每个中间件默认接受两个参数，第一个参数是 Context 对象，第二个参数是 next 函数。只要调用 next函数，就可以把执行权转交给下一个中间件。

如果中间件内部没有调用 next 函数，那么执行权就不会传递下去。

多个中间件会形成一个栈结构，以“先进后出”的顺序执行。整个过程就像，先是入栈，然后出栈的操作。

♥︎ ♥︎ ♥︎ ♥︎ 图片上传到服务器的过程

前端业务

根据后台接口发送请求，图片作为参数，需要带上一个 name 字段

后台业务

后台接收图片可以使用 ndoe 的 fs、path 文件系统加上 multer 的 npm 包实现。主要思想是通过multer 创建一个临时空间用来接收并存储前端发送过来的二进制图片数据。通过 fs 模块读取临时空间的数据，并使用 pipe 方法注入到 fs 模块创建 path 模块指向的服务器文件夹下

后台代码试例，express 环境

var express = require('express')
var router = express.Router()
var fs = require('fs')
var path = require('path')
/* 用于处理非表单的文件数据流 */
var multer = require('multer')
// 配置数据流向的文件,绝对路径，相对于根目录
var upload = multer({ dest: 'upload/' })
// 创建一个接收为编码的二进制数据流的方法实例 接收 name 为 newimg 字段的上传文件，最大接收
为 1
var cpUpload = upload.fields([{ name: 'newimg', maxCount: 1 }])
// 接口
router.post('/add', cpUpload, (req, res) => {
 // 前端发送请求后，服务器已经接受到了前端传递过来的图片数据，保存在 files 对象下
 // 加上 cpUpload，数据就会从这个方法所设置的地址流过来，生成一个本地临时空间，类似于虚拟
DOM
 // 获取这段数据
 var img = req.files.newimg[0]
 
 // fs 模块读取临时空间的数据 
 var readStream = fs.createReadStream(img.path) 
 // 设置图片存入的路径，并给文件名前面加上一个时间轴，防止命名重复 
 var imgpath = `/cdn/${Date.now()}-${img.originalname}` 
 // 创建一个写入图片数据的地址 
 var writeStram = fs.createWriteStream( path.resolve(__dirname, `../public${imgpath}`) )
 // 设置一个 pipe 管道，将读取的数据解析并注入到写入地址 
 readStream.pipe(writeStram) 
 // 监听注入地址的 close 事件，表示注入完毕 
 writeStram.on('close', () => { 
   // 返回给前端一个图片地址 
   res.json({ err: 0, msg: 'success', data: { img: imgpath } }) })
   })
module.exports = router

♥︎ ♥︎ ♥︎ ♥︎ koa 和 express 的区别

最大的区别在于语法，experss 的异步采用的是回调函数的形式，而 koa1 支持 generator + yeild，koa2 支持 await/async，无疑更加优雅。

中间件的区别：koa 采用洋葱模型，进行顺序执行，出去反向执行，支持 context 传递数据。express 本身无洋葱模型，需要引入插件，不支持 context express 的中间件中执行异步函数，执行顺序不会按照洋葱模型，异步的执行结果有可能被放到最后，response 之前。这是由于，其中间件执行机制，递归回调中没有等待中间件中的异步函数执行完毕，就是没有 await 中间件异步函数

集成度区别：express 内置了很多中间件，集成度高，使用省心， koa 轻量简洁，容易定制

♥︎ ♥︎ ♥︎ ♥︎ 了解 eggjs 吗？

eggjs 的特性提供基于 Egg 定制上层框架的能力高度可扩展的插件机制内置多进程管理基于 Koa 开发，性能优异框架稳定，测试覆盖率高渐进式开发

♥︎ ♥︎ ♥︎ ♥︎ 说说对Nodejs中的事件循环机制理解?

一、是什么

在浏览器事件循环中，我们了解到javascript在浏览器中的事件循环机制，其是根据HTML5定义的规范来实现

而在NodeJS中，事件循环是基于libuv实现，libuv是一个多平台的专注于异步IO的库，如下图最右侧所示：

上图EVENT_QUEUE 给人看起来只有一个队列，但EventLoop存在6个阶段，每个阶段都有对应的一个先进先出的回调队列

二、流程

上节讲到事件循环分成了六个阶段，对应如下：

timers阶段：这个阶段执行timer（setTimeout、setInterval）的回调
定时器检测阶段(timers)：本阶段执行 timer 的回调，即 setTimeout、setInterval 里面的回调函数
I/O事件回调阶段(I/O callbacks)：执行延迟到下一个循环迭代的 I/O 回调，即上一轮循环中未被执行的一些I/O回调
闲置阶段(idle, prepare)：仅系统内部使用
轮询阶段(poll)：检索新的 I/O 事件;执行与 I/O 相关的回调（几乎所有情况下，除了关闭的回调函数，那些由计时器和 setImmediate() 调度的之外），其余情况 node 将在适当的时候在此阻塞
检查阶段(check)：setImmediate() 回调函数在这里执行
关闭事件回调阶段(close callback)：一些关闭的回调函数，如：socket.on(‘close’, …)

每个阶段对应一个队列，当事件循环进入某个阶段时, 将会在该阶段内执行回调，直到队列耗尽或者回调的最大数量已执行, 那么将进入下一个处理阶段

除了上述6个阶段，还存在process.nextTick，其不属于事件循环的任何一个阶段，它属于该阶段与下阶段之间的过渡, 即本阶段执行结束, 进入下一个阶段前, 所要执行的回调，类似插队

流程图如下所示：

在Node中，同样存在宏任务和微任务，与浏览器中的事件循环相似

微任务对应有：

next tick queue：process.nextTick
other queue：Promise的then回调、queueMicrotask

宏任务对应有：

timer queue：setTimeout、setInterval
poll queue：IO事件
check queue：setImmediate
close queue：close事件

其执行顺序为：

next tick microtask queue
other microtask queue
timer queue
poll queue
check queue
close queue

三、题目

通过上面的学习，下面开始看看题目

async function async1() {
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}

async function async2() {
    console.log('async2')
}

console.log('script start')

setTimeout(function () {
    console.log('setTimeout0')
}, 0)

setTimeout(function () {
    console.log('setTimeout2')
}, 300)

setImmediate(() => console.log('setImmediate'));

process.nextTick(() => console.log('nextTick1'));

async1();

process.nextTick(() => console.log('nextTick2'));

new Promise(function (resolve) {
    console.log('promise1')
    resolve();
    console.log('promise2')
}).then(function () {
    console.log('promise3')
})

console.log('script end')

分析过程：

先找到同步任务，输出script start
遇到第一个 setTimeout，将里面的回调函数放到 timer 队列中
遇到第二个 setTimeout，300ms后将里面的回调函数放到 timer 队列中
遇到第一个setImmediate，将里面的回调函数放到 check 队列中
遇到第一个 nextTick，将其里面的回调函数放到本轮同步任务执行完毕后执行
执行 async1函数，输出 async1 start
执行 async2 函数，输出 async2，async2 后面的输出 async1 end进入微任务，等待下一轮的事件循环
遇到第二个，将其里面的回调函数放到本轮同步任务执行完毕后执行
遇到 new Promise，执行里面的立即执行函数，输出 promise1、promise2
then里面的回调函数进入微任务队列
遇到同步任务，输出 script end
执行下一轮回到函数，先依次输出 nextTick 的函数，分别是 nextTick1、nextTick2
然后执行微任务队列，依次输出 async1 end、promise3
执行timer 队列，依次输出 setTimeout0
接着执行 check 队列，依次输出 setImmediate
300ms后，timer 队列存在任务，执行输出 setTimeout2

执行结果如下：

script start
async1 start
async2
promise1
promise2
script end
nextTick1
nextTick2
async1 end
promise3
setTimeout0
setImmediate
setTimeout2

最后有一道是关于setTimeout与setImmediate的输出顺序

setTimeout(() => {
  console.log("setTimeout");
}, 0);

setImmediate(() => {
  console.log("setImmediate");
});

输出情况如下：

情况一：
setTimeout
setImmediate

情况二：
setImmediate
setTimeout

分析下流程：

外层同步代码一次性全部执行完，遇到异步API就塞到对应的阶段
遇到setTimeout，虽然设置的是0毫秒触发，但实际上会被强制改成1ms，时间到了然后塞入times阶段
遇到setImmediate塞入check阶段
同步代码执行完毕，进入Event Loop
先进入times阶段，检查当前时间过去了1毫秒没有，如果过了1毫秒，满足setTimeout条件，执行回调，如果没过1毫秒，跳过
跳过空的阶段，进入check阶段，执行setImmediate回调

这里的关键在于这1ms，如果同步代码执行时间较长，进入Event Loop的时候1毫秒已经过了，setTimeout先执行，如果1毫秒还没到，就先执行了setImmediate

♥︎ ♥︎ ♥︎ ♥︎ 说说对中间件概念的理解，如何封装 node 中间件？

一、是什么

中间件（Middleware）是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的

在NodeJS中，中间件主要是指封装http请求细节处理的方法

例如在express、koa等web框架中，中间件的本质为一个回调函数，参数包含请求对象、响应对象和执行下一个中间件的函数

在这些中间件函数中，我们可以执行业务逻辑代码，修改请求和响应对象、返回响应数据等操作

二、封装

koa是基于NodeJS当前比较流行的web框架，本身支持的功能并不多，功能都可以通过中间件拓展实现。通过添加不同的中间件，实现不同的需求，从而构建一个 Koa 应用

Koa 中间件采用的是洋葱圈模型，每次执行下一个中间件传入两个参数：

ctx ：封装了request 和 response 的变量
next ：进入下一个要执行的中间件的函数

下面就针对koa进行中间件的封装：

Koa 的中间件就是函数，可以是 async 函数，或是普通函数

// async 函数
app.use(async (ctx, next) => {
  const start = Date.now();
  await next();
  const ms = Date.now() - start;
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
});

// 普通函数
app.use((ctx, next) => {
  const start = Date.now();
  return next().then(() => {
    const ms = Date.now() - start;
    console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
  });
});

下面则通过中间件封装http请求过程中几个常用的功能：

token校验

module.exports = (options) => async (ctx, next) {
  try {
    // 获取 token
    const token = ctx.header.authorization
    if (token) {
      try {
          // verify 函数验证 token，并获取用户相关信息
          await verify(token)
      } catch (err) {
        console.log(err)
      }
    }
    // 进入下一个中间件
    await next()
  } catch (err) {
    console.log(err)
  }
}

日志模块

const fs = require('fs')
module.exports = (options) => async (ctx, next) => {
  const startTime = Date.now()
  const requestTime = new Date()
  await next()
  const ms = Date.now() - startTime;
  let logout = `${ctx.request.ip} -- ${requestTime} -- ${ctx.method} -- ${ctx.url} -- ${ms}ms`;
  // 输出日志文件
  fs.appendFileSync('./log.txt', logout + '\n')
}

Koa存在很多第三方的中间件，如koa-bodyparser、koa-static等

下面再来看看它们的大体的简单实现：

koa-bodyparser

koa-bodyparser 中间件是将我们的 post 请求和表单提交的查询字符串转换成对象，并挂在 ctx.request.body 上，方便我们在其他中间件或接口处取值

// 文件：my-koa-bodyparser.js
const querystring = require("querystring");

module.exports = function bodyParser() {
    return async (ctx, next) => {
        await new Promise((resolve, reject) => {
            // 存储数据的数组
            let dataArr = [];

            // 接收数据
            ctx.req.on("data", data => dataArr.push(data));

            // 整合数据并使用 Promise 成功
            ctx.req.on("end", () => {
                // 获取请求数据的类型 json 或表单
                let contentType = ctx.get("Content-Type");

                // 获取数据 Buffer 格式
                let data = Buffer.concat(dataArr).toString();

                if (contentType === "application/x-www-form-urlencoded") {
                    // 如果是表单提交，则将查询字符串转换成对象赋值给 ctx.request.body
                    ctx.request.body = querystring.parse(data);
                } else if (contentType === "applaction/json") {
                    // 如果是 json，则将字符串格式的对象转换成对象赋值给 ctx.request.body
                    ctx.request.body = JSON.parse(data);
                }

                // 执行成功的回调
                resolve();
            });
        });

        // 继续向下执行
        await next();
    };
};

koa-static

koa-static 中间件的作用是在服务器接到请求时，帮我们处理静态文件

const fs = require("fs");
const path = require("path");
const mime = require("mime");
const { promisify } = require("util");

// 将 stat 和 access 转换成 Promise
const stat = promisify(fs.stat);
const access = promisify(fs.access)

module.exports = function (dir) {
    return async (ctx, next) => {
        // 将访问的路由处理成绝对路径，这里要使用 join 因为有可能是 /
        let realPath = path.join(dir, ctx.path);

        try {
            // 获取 stat 对象
            let statObj = await stat(realPath);

            // 如果是文件，则设置文件类型并直接响应内容，否则当作文件夹寻找 index.html
            if (statObj.isFile()) {
                ctx.set("Content-Type", `${mime.getType()};charset=utf8`);
                ctx.body = fs.createReadStream(realPath);
            } else {
                let filename = path.join(realPath, "index.html");

                // 如果不存在该文件则执行 catch 中的 next 交给其他中间件处理
                await access(filename);

                // 存在设置文件类型并响应内容
                ctx.set("Content-Type", "text/html;charset=utf8");
                ctx.body = fs.createReadStream(filename);
            }
        } catch (e) {
            await next();
        }
    }
}

三、总结

在实现中间件时候，单个中间件应该足够简单，职责单一，中间件的代码编写应该高效，必要的时候通过缓存重复获取数据

koa本身比较简洁，但是通过中间件的机制能够实现各种所需要的功能，使得web应用具备良好的可拓展性和组合性

通过将公共逻辑的处理编写在中间件中，可以不用在每一个接口回调中做相同的代码编写，减少了冗杂代码，过程就如装饰者模式

♥︎ ♥︎ ♥︎ ♥︎ Node性能如何进行监控以及优化？

一、是什么

Node作为一门服务端语言，性能方面尤为重要，其衡量指标一般有如下：

CPU
内存
I/O
网络

CPU

主要分成了两部分：

CPU负载：在某个时间段内，占用以及等待CPU的进程总数
CPU使用率：CPU时间占用状况，等于 1 - 空闲CPU时间(idle time) / CPU总时间

这两个指标都是用来评估系统当前CPU的繁忙程度的量化指标

Node应用一般不会消耗很多的CPU，如果CPU占用率高，则表明应用存在很多同步操作，导致异步任务回调被阻塞

内存指标

内存是一个非常容易量化的指标。内存占用率是评判一个系统的内存瓶颈的常见指标。对于Node来说，内部内存堆栈的使用状态也是一个可以量化的指标

// /app/lib/memory.js
const os = require('os');
// 获取当前Node内存堆栈情况
const { rss, heapUsed, heapTotal } = process.memoryUsage();
// 获取系统空闲内存
const sysFree = os.freemem();
// 获取系统总内存
const sysTotal = os.totalmem();

module.exports = {
  memory: () => {
    return {
      sys: 1 - sysFree / sysTotal,  // 系统内存占用率
      heap: heapUsed / headTotal,   // Node堆内存占用率
      node: rss / sysTotal,         // Node占用系统内存的比例
    }
  }
}

rss：表示node进程占用的内存总量。
heapTotal：表示堆内存的总量。
heapUsed：实际堆内存的使用量。
external ：外部程序的内存使用量，包含Node核心的C++程序的内存使用量

在Node中，一个进程的最大内存容量为1.5GB。因此我们需要减少内存泄露

磁盘 I/O

硬盘的 IO 开销是非常昂贵的，硬盘 IO 花费的 CPU 时钟周期是内存的 164000 倍

内存 IO 比磁盘 IO 快非常多，所以使用内存缓存数据是有效的优化方法。常用的工具如 redis、memcached 等

并不是所有数据都需要缓存，访问频率高，生成代价比较高的才考虑是否缓存，也就是说影响你性能瓶颈的考虑去缓存，并且而且缓存还有缓存雪崩、缓存穿透等问题要解决

二、如何监控

关于性能方面的监控，一般情况都需要借助工具来实现

这里采用Easy-Monitor 2.0，其是轻量级的 Node.js 项目内核性能监控 + 分析工具，在默认模式下，只需要在项目入口文件 require 一次，无需改动任何业务代码即可开启内核级别的性能监控分析

使用方法如下：

在你的项目入口文件中按照如下方式引入，当然请传入你的项目名称：

const easyMonitor = require('easy-monitor');
easyMonitor('你的项目名称');

打开你的浏览器，访问 http://localhost:12333 ，即可看到进程界面

关于定制化开发、通用配置项以及如何动态更新配置项详见官方文档

三、如何优化

关于Node的性能优化的方式有：

使用最新版本Node.js
正确使用流 Stream
代码层面优化
内存管理优化

使用最新版本Node.js

每个版本的性能提升主要来自于两个方面：

V8 的版本更新
Node.js 内部代码的更新优化

正确使用流 Stream

在Node中，很多对象都实现了流，对于一个大文件可以通过流的形式发送，不需要将其完全读入内存

const http = require('http');
const fs = require('fs');

// bad
http.createServer(function (req, res) {
    fs.readFile(__dirname + '/data.txt', function (err, data) {
        res.end(data);
    });
});

// good
http.createServer(function (req, res) {
    const stream = fs.createReadStream(__dirname + '/data.txt');
    stream.pipe(res);
});

代码层面优化

合并查询，将多次查询合并一次，减少数据库的查询次数

// bad
for user_id in userIds 
     let account = user_account.findOne(user_id)

// good
const user_account_map = {}   // 注意这个对象将会消耗大量内存。
user_account.find(user_id in user_ids).forEach(account){
    user_account_map[account.user_id] =  account
}
for user_id in userIds 
    var account = user_account_map[user_id]

内存管理优化

在 V8 中，主要将内存分为新生代和老生代两代：

新生代：对象的存活时间较短。新生对象或只经过一次垃圾回收的对象
老生代：对象存活时间较长。经历过一次或多次垃圾回收的对象

若新生代内存空间不够，直接分配到老生代

通过减少内存占用，可以提高服务器的性能。如果有内存泄露，也会导致大量的对象存储到老生代中，服务器性能会大大降低

如下面情况：

const buffer = fs.readFileSync(__dirname + '/source/index.htm');

app.use(
    mount('/', async (ctx) => {
        ctx.status = 200;
        ctx.type = 'html';
        ctx.body = buffer;
        leak.push(fs.readFileSync(__dirname + '/source/index.htm'));
    })
);

const leak = [];

leak的内存非常大，造成内存泄露，应当避免这样的操作，通过减少内存使用，是提高服务性能的手段之一

而节省内存最好的方式是使用池，其将频用、可复用对象存储起来，减少创建和销毁操作

例如有个图片请求接口，每次请求，都需要用到类。若每次都需要重新new这些类，并不是很合适，在大量请求时，频繁创建和销毁这些类，造成内存抖动

使用对象池的机制，对这种频繁需要创建和销毁的对象保存在一个对象池中。每次用到该对象时，就取对象池空闲的对象，并对它进行初始化操作，从而提高框架的性能

参考文献：

[语音仓库]: “https://github.com/febobo/web-interview “