效果图如下

上图的组成可以分为两部分，一个为底图六边形的形成，一个为内容六边形的形成。

要生成对应的六边形，首先要获得需要绘制的六边形的中心坐标。

观察不难得出结论，以中心的六边形为基点，第二圈很明显能排6个，第三圈能排12个，以此进行类推。

这里可以以中心点为坐标原点[0,0],以[1,0], [1,1],[-1,1],[-1,0],[-1,-1],[1,-1]这种形式来表示第二圈在轴线上的六个六边形的中心点关系（这是一种形式，并非真实的坐标系坐标）。

// 第二圈时的对应圆上的坐标值

const pixiArr = [

  [1, 0],

  [1, 1],

  [-1, 1],

  [-1, 0],

  [-1, -1],

  [1, -1]

]



// 根据圈数生成对应轴线上的坐标

function generatePixiArrByWeight(weight) {

  if (weight === 2) {

    return pixiArr

  }

  const multiple = weight - 1

  const tempPixiArr = pixiArr.map((x) => {

    return [x[0] * multiple, x[1] * multiple]

  })

  return tempPixiArr

}

进一步观察，可知，第三圈时两条发散的轴中间夹了一个六边形，第四圈时两条发散的轴中间夹了两个六边形，依次类推。

六条发散轴上的六边形中心点坐标是最容易计算的，不过要计算三圈及其开外的，就得有那么一点点的数学基础，知道sin60度cos60度的意思。

const sin60 = Math.sin(Math.PI / 3)

const cos60 = Math.cos(Math.PI / 3)

有了上面的铺垫后就可以开始了，定义一个函数，传入的参数为六边形总个数和六边形的边长

// 生成六边形中心坐标

function getHexagonCoordinateArrayByTotal(total = 0, radius = 0){

    // 1、获取圈数weight

    if (total === 0) return []

  let tierList = [] // 用于存放每圈的个数

  let tierIndex = 0

  while (total > 0) {

    if (tierIndex === 0) {

      tierList.push(1)

      total = total - 1

    } else {

      let n = 6 * tierIndex

      total = total - n

      if (total < 0) {

        tierList.push(total + n)

      } else {

        tierList.push(n)

      }

    }

    tierIndex++

  }

  const weight = tierList.length

    // 2、根据圈数去获取coordinateArray坐标列表

    // getHexagonCoordinateArrayByWeight：根据圈数和边长返回对应的坐标点

    const weight = tierList.length

  let coordinateArray = []

  for (let i = 0; i < weight; i++) {

    if (i + 1 === weight) {

      coordinateArray = [

        ...coordinateArray,

        ...getHexagonCoordinateArrayByWeight(i + 1, radius).slice(

          0,

          tierList[weight - 1]

        )

      ]

    } else {

      coordinateArray = [

        ...coordinateArray,

        ...getHexagonCoordinateArrayByWeight(i + 1, radius)

      ]

    }

  }



  return coordinateArray

}

有个getHexagonCoordinateArrayByWeight需要实现其，方式为

function _abs(val = 0) {

  return Math.abs(val)

}



function getHexagonCoordinateArrayByWeight(weight = 1, radius = 0) {

  if (weight === 0) return []

  if (weight === 1) return [[0, 0]]

  const addNum = weight - 2

  const addArr = generatePixiArrByWeight(weight)

  const hypotenuse = radius * sin60 * 2 // 两倍的边心距长度

  let offsetArr = []

  let offsetX

  let offsetY

  for (let i = 0; i < addArr.length; i++) {

    const t = addArr[i]

    if (t[1] !== 0) {

      offsetX = t[0] * hypotenuse * cos60

      offsetY = t[1] * hypotenuse * sin60

    } else {

      offsetX = t[0] * hypotenuse

      offsetY = 0

    }

    offsetArr.push([offsetX, offsetY])

  }

  const tempOffsetArr = JSON.parse(JSON.stringify(offsetArr))

  let resArr = new Array(6 * (weight - 1))

  let lineArr = []

  for (let i = 0; i < 6; i++) {

    let lindex = i * (weight - 1)

    resArr[lindex] = tempOffsetArr[i]

    lineArr.push(lindex)

  }

  // 利用已知的六个发散轴上的中心坐标点推出剩余的中心坐标点

  if (addNum > 0) {

    for (let i = 0; i < 6; i++) {

      let s = tempOffsetArr[i]

      let e = i + 1 === 6 ? tempOffsetArr[0] : tempOffsetArr[i + 1]

      let si = lineArr[i]

      let sp = addNum + 1

      let fx

      let fy

      if (i === 0) {

        fx = (s[0] - e[0]) / sp

        fy = (e[1] - s[1]) / sp

      }

      if (i === 1) {

        fx = (_abs(s[0]) + _abs(e[0])) / sp

        fy = 0



      }

      if (i === 2) {

        fx = (_abs(e[0]) - _abs(s[0])) / sp

        fy = (_abs(s[1]) - _abs(e[1])) / sp

      }

      if (i === 3) {

        fx = (_abs(s[0]) - _abs(e[0])) / sp

        fy = (_abs(e[1]) - _abs(s[1])) / sp

      }

      if (i === 4) {

        fx = (_abs(s[0]) + _abs(e[0])) / sp

        fy = 0

      }

      if (i === 5) {

        fx = _abs(s[0]) / sp

        fy = (_abs(e[1]) - _abs(s[1])) / sp

      }

      let mr = []

      for (let j = 0; j < addNum; j++) {

        if (i === 0 || i === 1) {

          mr.push([s[0] - fx * (j + 1), s[1] + fy * (j + 1)])

        }

        if (i === 2) {

          mr.push([s[0] - fx * (j + 1), s[1] - fy * (j + 1)])

        }

        if (i === 3) {

          mr.push([s[0] + fx * (j + 1), s[1] - fy * (j + 1)])

        }

        if (i === 4) {

          mr.push([s[0] + fx * (j + 1), s[1] - fy * (j + 1)])

        }

        if (i === 5) {

          mr.push([s[0] + fx * (j + 1), s[1] - fy * (j + 1)])

        }

      }

      mr.forEach((x, index) => {

        resArr[si + index + 1] = x

      })

    }

  }

  return resArr

}

至此，生成六边形中心坐标点的方法完成。
有了中心坐标生成方式之后，就可以使用Konva这种辅助绘图的库来进行效果绘制了。

前言： 最近接到的一个需求十分有意思，设计整体实现了前端仿微信扫一扫的功能。整理了一下思路，做一个分享。

tips: 如果想要实现完整扫一扫的功能，你需要掌握一些前置知识，这次我们先讲如何实现拍照并且保存的功能。

一. window.navigator

1. 
   

   你想调取手机的摄像头，首先你得先检验当前设备是否有摄像设备，window 身上自带了一个 navigator 属性，这个对象有一个叫做 mediaDevices 的属性是我们即将用到的。

   
   


2. 
   

   于是我们就可以先设计一个叫做 checkCamera 的函数，用来在页面刚开始加载的时候执行。。
   
   
   

   
   


3. 
   

   我们先看一下这个对象有哪些方法，你也许会看到下面的场景，会发现这个属性身上只有一个值为 null 的 ondevicechange 属性，不要怕，真正要用的方法其实在它的原型身上。
   

   
   


4. 
   

   让我们点开它的原型属性，注意下面这两个方法，这是我们本章节的主角。
   
   

   
   


5. 
   

   我们到这一步只是需要判断当前设备是否有摄像头，我们先调取 enumerateDevices 函数来查看当前媒体设备是否存在。它的返回值是一个 promise 类型，我们直接用 async 和 await 来简化一下代码。
   
   
   从上图可以看出，我的电脑有两个音频设备和一个视频设备，那么我们就可以放下进行下一步了。

   
   

二. 获取摄像头

1. 
   

   接下来就需要用到上面提到的第二个函数，navigator.getUserMedia。这个函数接收一个对象作为参数，这个对象可以预设一些值，来作为我们请求摄像头的一些参数。

   
   


2. 
   

   这里我们的重点是 facingMode 这个属性，因为我们扫一扫一般都是后置摄像头
   
   当你执行了这个函数以后，你会看到浏览器有如下提示：
   
   
   

   
   


3. 
   

   于是你高兴的点击了允许，却发现页面没有任何变化。
   
   
   

   
   


4. 
   

   这里你需要知道，这个函数只是返回了一个媒体流信息给你，你可以这样简单理解刚刚我们干了什么，首先浏览器向手机申请我想用一下摄像头可以吗？在得到了你本人的确认以后，手机将摄像头的数据线递给了浏览器，：“诺，给你。”

   
   


5. 
   

   但浏览器现在仅仅拿到了一根数据线，然而浏览器不知道需要将这个摄像头渲染到哪里，它不可能自动帮你接上这根线，你需要自己找地方接上这根数据线。

   
   


6. 
   

   这里不卖关子，我们需要请到我们的 Video 标签。我没听错吧？那个播放视频的 video 标签？没错，就是原生的 video 标签。

   
   


7. 
   

   这里创建一个 video 标签，然后打上 ref 来获取这个元素。
   
   

   
   


8. 
   

   这里的关键点在于将流数据赋值给 video 标签的 srcObject 属性。就好像你拿到了数据线，插到了显示器上。
   
   (tips: 这里需要特别注意，不是 video.src 而是 video.srcObject 请务必注意)
   
   

   
   


9. 
   

   现在你应该会看到摄像头已经在屏幕上展示了，这里是我用电脑前置摄像头录制的一段视频做成了gif。(脉动请给我打钱，哼)
   

   
   

三. 截取当前画面

1. 
   

   这里我随手写了一个按钮当作拍摄键，接下来我们将实现点击这个按钮截取当前画面。
   
   

   
   


2. 
   

   这里你需要知道一个前提，虽然我们现在看到的视频是连贯的，但其实在浏览器渲染的时候，它其实是一帧一帧渲染的。就像宫崎骏有些动漫一样，是一张一张手写画。

   
   


3. 
   

   让我们打开 Performance 标签卡，记录一下打开掘金首页的过程，可以看到浏览器的整个渲染过程其实也是一帧一帧拼接到一起，才完成了整个页面的渲染。
   
   

   
   


4. 
   

   知道了这个前提，那么举一反三，我们就可以明白，虽然我们现在已经打开了摄像头，看到的视频好像是在连贯展示，但其实它也是一帧一帧拼到一起的。那现在我们要做的事情就非常明了，当我按下按钮的时候，想办法将 video 标签当前的画面保存下来。

   
   


5. 
   

   这里不是特别容易想到，我就直接说答案了，在这个场景，我们需要用到 canvas 的一些能力。不要害怕，我目前对 canvas 的使用也不是特别熟练，今天也不会用到特别复杂的功能。

   
   


6. 
   

   首先创建一个空白的 canvas 元素，元素的宽高设置为和 video 标签一致。
   
   

   
   


7. 
   

   接下来是重点： 我们需要用到 canvas 的 getContext 方法，先别着急头晕，这里你只需要知道，它接受一个字符串 "2d" 作为参数就行了，它会把这个画布的上下文返回给你。
   （ tips 如果这里还不清楚上下文的概念，也不用担心，这里你就简单理解为把这个 canvas 这个元素加工了一下，帮你在它身上添加了一些新的方法而已。)
   

   
   


8. 
   

   在这个 ctx 对象身上，我们只需要用到一个 drawImage 方法即可，不需要关心其它属性。
   
   

   
   


9. 
   

   感觉参数有点多？没关系，我们再精简一下，我们只需要考虑第二个用法，也就是5参数的写法。(sx,sy 是做裁切用到的，本文用不到，感兴趣可以自行了解。)
   
   

   
   


10. 
    

    这里先简单解释一下 dx 和 dy 是什么意思。在 canvas 里也存在一个看不见的坐标系，起点也是左上角。设想你想在一个 HTML 的 body 元素里写一个距离左边距离 100px 距离顶部 100px的画面，是不是得写 margin-left:100px margin-top:100px 这样的代码？没错，这里的 dy 和 dx 也是同样的道理。
    
    

    
    


11. 
    

    我们再看 dwidth，和 dheight，从这个名字你就能才出来，肯定和我们将要在画笔里画画的元素的宽度和高度有关，是的，你猜的没错，它就好像你设置一个 div 元素的高度和宽度一样，代表着你将在画布上画的截图的宽高属性。

    
    


12. 
    

    现在只剩下第一个参数还没解释，这里直接说答案，我们可以直接将 video 标签填进去，ctx 会自动将当前 video 标签的这一帧画面填写进去。现在按钮的代码应该是这个样子。

    
    

    function shoot() {
    
      if (!videoEl.value || !wrapper.value) return;
    
      const canvas = document.createElement("canvas");
    
      canvas.width = videoEl.value.videoWidth;
    
      canvas.height = videoEl.value.videoHeight;
    
      //拿到 canvas 上下文对象
    
      const ctx = canvas.getContext("2d");
    
          ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);
    
      wrapper.value.appendChild(canvas);//将 canvas 投到页面上
    
    }
    
    

    
    


13. 
    

    测试一下效果。
    
    

    
    

四. 源码

<script lang="ts" setup>

import { ref, onMounted } from "vue";



const wrapper = ref<HTMLDivElement>();

const videoEl = ref<HTMLVideoElement>();



async function checkCamera() {

  const navigator = window.navigator.mediaDevices;

  const devices = await navigator.enumerateDevices();

  if (devices) {

    const stream = await navigator.getUserMedia({

      audio: false,

      video: {

        width: 300,

        height: 300,

        // facingMode: { exact: "environment" }, //强制后置摄像头

        facingMode: "user", //前置摄像头

      },

    });

    if (!videoEl.value) return;



    videoEl.value.srcObject = stream;

    videoEl.value.play();

  }

}



function shoot() {

  if (!videoEl.value || !wrapper.value) return;

  const canvas = document.createElement("canvas");

  canvas.width = videoEl.value.videoWidth;

  canvas.height = videoEl.value.videoHeight;

  //拿到 canvas 上下文对象

  const ctx = canvas.getContext("2d");

  ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);

  wrapper.value.appendChild(canvas);

}



onMounted(() => {

  checkCamera();

});

</script>

<template>

  <div ref="wrapper" class="w-full h-full bg-red flex flex-col items-center">

    <video ref="videoEl" />

    <div

      @click="shoot"

      class="w-100px leading-100px text-center bg-black text-30px"

    >

      拍摄

    </div>

  </div>

</template>

五. 总结

实现拍照的整体思路其实很简单，仅仅需要了解到视频其实也是一帧一帧画面构成的，而 canvas 恰好有捕捉当前帧的能力。

预告：在下一篇会讲解如何实现扫一扫的功能，需要用到插件，感兴趣的同学可以先预习一下功课。🎁二维码扫码插件

趁热打铁🧭:前端实现微信扫一扫的思路

前言： 在有了获取手机摄像头权限并且记录当前画面的前置知识以后，我们现在已经可以进行下一步实现一个仿微信扫一扫的功能了。

tips: 如果你是直接看的本文，对如何打开摄像头拍照这个功能还不太熟悉，请移步 🎁前端如何打开摄像头拍照。这是你阅读本篇的必需前置知识。

一. 效果预览

这里先简单放一下整体界面效果，接下来带大家一步一步分析其中的功能如何实现。

本篇将重点讲解多张二维码识别的处理场景。

二. 简单了解二维码

1. 
   

   现在流行使用的二维码是 qrcode，其中 qr 两个字母其实就是 quick response 的缩写，简单来说就是快速响应的意思。三个角用来定位，黑点表示二进制的1，白色点代表0。（这里感兴趣可以自行了解) 它的本质其实就是将一个地址链接利用某种约定好的规则隐藏到一个图片当中，
   
   

   
   


2. 
   

   我们可以利用 chrome 自带的创建当前网站二维码的功能快速体验一下。
   

   
   


3. 
   

   你可以用手机自带的二维码扫码软件扫一下这个二维码，它将会将你引导到我掘金的个人主页。
   
   

   
   


4. 
   

   细心的你可能会发现二维码下面已经给你提示了你准备保存的链接地址，现在你观察一下浏览器地址栏是否正对应下面这个地址呢？
   

   
   

三. 实现扫码本地图片功能

1. 
   

   我们不需要深入了解这个二维码的转换规则，我们可以直接选用现有的插件即可完成识别功能。 这里我们选用 antfu 大佬的轮子。这里我们不过多介绍，你只需要它可以识别出图片中的二维码即可。如果感兴趣，这是具体仓库地址 qr-sanner-wechat。

   
   


2. 
   

   首先安装 npm i qr-scanner-wechat。

   
   


3. 
   

   它的使用方法也十分简单，这个依赖导出了一个方法，我们直接引入这个方法即 import { scan } from 'qr-scanner-wechat。

   
   


4. 
   

   这个函数可以接收一个 image 元素或者 canvas 元素作为参数，并且返回一个 promise 类型的值。

   
   


5. 
   

   我们先来测试最简单的，传入一个 image 元素，利用 input 标签的 type=file 属性，就可以从本地选择图片，比较基础的知识，不过多赘述，代码如下。

   
   

   function getImageFromLocal(e: Event) {
   
     const inputEl = e.target as HTMLInputElement;
   
     if (!inputEl) return;
   
     console.log("inputEl.files", inputEl.files);
   
   }
   
   
   
   
   
   

   
   

   然后我们可以通过 input 元素绑定的 onChange 回调中拿到 input 元素身上的 files 属性，就可以获取到刚刚我们选择的文件信息。
   
   

   
   


6. 
   

   但是目前这个数据对象我们还无法使用，需要借助 URL.createObjectUrl 方法来创建一个普通的 url 地址。
   
   

   
   


7. 
   

   当拿到这个 url 地址以后该如何使用呢？🤔
   

   
   


8. 
   

   一个熟悉的老朋友，有请 img 标签出场，👏，我们只需要将 img 标签的 src 替换成刚刚保存的 url 地址即可。
   
   
   
   现在整体效果应该是这样的：
   
   

   
   


9. 
   

   有了 img 元素，我们直接将这个元素赋值给 qr-scanner-wechat 插件提供的 scan 函数即可。
   
   
   

   
   


10. 
    

    我们来测试一下整体流程。
    
    
    

    
    


11. 
    

    可以看到，scan 函数返回了一个对象，这个对象身上有两个十分重要的属性。一个叫做 rect (rectangle 长方形的单词缩写)，这个属性描述了这个插件在什么位置扫描到了二维码，另外一个属性就是 text，也就是这个图片上隐藏的字符串地址。
    
    

    
    


12. 
    

    这里我们再讲解一下 rect 属性，因为后面的功能需要你对这个属性有比较清晰的理解。我们对比一个现实世界的例子。当你掏出手机扫描二维码的时候，往往并不会正好对准一个二维码的图片，或者会遇到一个图片中存在两个二维码的情况，如下图：
    
    

    
    


13. 
    

    这个 qr-scanner 插件会帮你把二维码所在整张图片的相对位置告诉你，因为这个插件每次调用 scan 函数只会返回一次结果。并不是说图片上有两个二维码，它的识别结果就会有两个，所以说这个 qr-scanner 插件的识别效果也并不是百分之一百准确的。

    
    

四. 理清思路

1. 
   

   说了这么多，那么这个 rect 我们该如何利用起来呢？别着急，我们先理清思路再动手写代码，到了目前这一步会出现两种情况。
   
   

   
   


2. 
   

   第一种是图片压根就没有二维码，这个简单，提示用户重新放置图片即可。

   
   


3. 
   

   关键点就在于第二张情况，当图片上扫码到存在一个二维码后，我们该如何判断是否存在第二个或多个维码呢？
   
   

   
   


4. 
   

   我们看一下微信的实现效果，当只有一张二维码的时候，它会直接跳转，当有多个二维码的时候，它会将整个页面暂停，并且提示用户有两张二维码，请点击选择一个进行跳转。
   
   

   
   


5. 
   

   但是我们上面提到了，scan 函数每次只会扫描一次图片，返回一个识别结果，它并不能准确知道图片上到底有几个二维码。那放到现实生活我们会怎么做呢？
   

   
   


6. 
   

   举个例子，假如我们现在掏出手机扫一扫的功能，现在给你的图片上有两个二维码，但是我明确的知道我就想扫第二个，你会怎么做？
   
   

   
   


7. 
   

   这不是很简单的道理吗？我拿手挡住第一个二维码不就可以了吗？
   
   

   
   


8. 
   

   那么利用同样的思路，我们可以再扫描到一张二维码的时候，想办法把当前识别到的这个二维码位置给遮挡住，然后将被遮挡后的照片传递给 scan 函数再次扫描。

   
   


9. 
   

   那么整个过程就是，我们首先将完整的照片传给 scan，然后 scan 觉得第一张二维码比较帅，就先识别了它。(tips: 这里需要提醒一下，scan 有时候会觉得第二张二维码比较帅，那我就识别第二张二维码，要注意的它的顺序性是随机的)
   
   

   
   


10. 
    

    然后我们想办法盖上遮挡物，然后将这个图片传给 scan，让它再次确认是否有第二个二维码。
    
    

    
    


11. 
    

    在哪覆盖？还记不记 rect 属性保留有这个二维码的位置信息？现在的问题就转变为如何覆盖了？

    
    


12. 
    

    这里需要用到 canvas 元素的一丢丢基础知识，这是 mdn canvas 基础知识的介绍，十分简单的就画出了一个绿色长方体。
    
    
    
    ctx.filleRect可以接收四个参数，分别是相对于画布起始轴的 x 和 y 的距离。
    
    简单来讲就可以理解为每一个 canvas 就相当于一个独立的 HTML 文件，也有自己的独立坐标系系统，x，y 就相当于 margin，至于后面两个参数，其实就代表着你要画的长方形的宽度和高度。
    

    
    

13.那这不巧了吗，scan 的返回值 rect 恰好就有这几个值。

14. 话不多说，马上开始实践。⛽️

五. 处理存在多张二维码的图片

1. 
   

   注意： 以下内容我统一选用从本地照片上传作为演示，从摄像头获取图片是同样的道理，详细介绍请移步 🎁前端如何打开摄像头拍照。在下面的讲解过程，我会默认你已经阅读了前置知识。

   
   


2. 
   

   这里我就继续沿用之前提到的图片，我将他们拼接到了一张图片上。
   
   

   
   


3. 
   

   下面应该是你目前从本地选择二维码图片识别的代码。
   

   
   

   async function getImageFromLocal(e: Event) {
   
     const inputEl = e.target as HTMLInputElement;
   
     if (!inputEl) return;
   
     if (!inputEl.files?.length) return;
   
     const image = inputEl.files[0];
   
     const url = URL.createObjectURL(image);
   
     src.value = url;
   
     const result = await scan(imgEl.value!);
   
     console.log("result", result);
   
   }
   
   

   
   


4. 
   

   接下来我们需要先创建一个 canvas 来将当前的照片拷贝到画布上，然后准备利用得到的 rect 信息在这个 canvas 元素上绘画。
   
   

   
   


5. 
   

   为了方便展示，我调用 appendChildren 方法将这个 canvas 元素打印到了界面上。
   
   

   
   


6. 
   

   然后用 result 中 rect 的坐标和宽度信息，去调用我们提到的 canvas 的 fillStyle fillRect 方法。
   
   
   
   下面是目前实现的效果:
   
   

   
   


7. 
   

   注意：scan 函数不仅仅可以接受 imgElment 作为扫描的参数，它还可以接受 canvas 元素作为扫描的参数。聪明的你看到这里，或许已经猜到我们下一步准备做什么了。

   
   


8. 
   

   那么此时我们就可以将这个已经被黑色涂鸦覆盖过的 canvas 进行二次扫描。(暂时不要考虑代码的优雅性，这里只是更清晰的说明我们在干什么，之后我们会封装几个方法，然后整理一下代码)
   
   
   
   让我们再看一下效果:
   
   

   
   


9. 
   

   通过多次重复上面的操作，就可以将图片上所有的二维码都尽量识别出来。
   
   
   
   现在实现的效果:
   
   
   
   同时图片上相对应的识别内容也全都被正确的被获取到了。
   
   

   
   


10. 
    

    此时我们创建一个 Map 来保存这些数据。Map 的 key 就是 text ，对应的 value 就是 rect 坐标信息。
    
    
    
    

    
    

六. 弹出可以点击的小蓝块

1. 
   

   有了坐标信息和位置信息，并且我们的 canvas 和 img 元素的坐标轴系统是一一对应的，那么我们就可以写一个函数来遍历这个 resultMap，然后根据位置信息在 img 元素所在的 div 上打印出我们想要的样式。

   
   


2. 
   

   首先在 img 元素外面包一层 div，打上 ref 叫做 imgWrapper 。因为之后我们要用它当作小蓝块的定位元素，所以先设置 position:relative。
   
   

   
   


3. 
   

   绘画代码如下，都是基础的方法，不再过多赘述。

   
   

   //多个二维码时添加动态小蓝点
   
   function draw() {
   
     resultMap.forEach((rect, link) => {
   
   if (!imgWrapper.value) return;
   
   const dom = document.createElement("div");
   
   const { x, y, width, height } = rect;
   
   const _x = (x || 0) + width / 2 - 20;
   
   const _y = (y || 0) + height / 2 - 20;
   
   dom.className = "blue-chunk";
   
   dom.style.width = "40px";
   
   dom.style.height = "40px";
   
   dom.style.background = "#2ec1cc";
   
   dom.style.position = "absolute";
   
   dom.style.zIndex = "9999999";
   
   dom.style.top = _y + "px";
   
   dom.style.left = _x + "px";
   
   dom.style.color = "#fff";
   
   dom.style.textAlign = "center";
   
   dom.style.borderRadius = "100px";
   
   dom.style.borderBlockColor = "#fff";
   
   dom.style.borderColor = "unset";
   
   dom.style.borderRightStyle = "solid";
   
   dom.style.borderWidth = "3px";
   
   dom.style.animation = "scale-animation 2s infinite";
   
   dom.addEventListener("click", () => {
   
     console.log(link);
   
   });
   
   imgWrapper.value.appendChild(dom);
   
     });
   
   }
   
   

   
   


4. 
   

   然后再 for 循环以后开始绘画小蓝块。
   
   

   
   


5. 
   

   让我们预览一下现在的效果:
   
   

   
   


6. 
   

   让我们测试一下相对应的点击事件
   
   

   
   

七. 源码

八.总结

本篇文章的关键点就是讲解了我在实现处理多张二维码的场景时的思路，利用 canvas 遮挡识别过的二维码这个思路是pbk-bin大佬最先想到的，在实现这个需求以后还是很感叹这个思路的巧妙。👏

再次特别感谢pbk-bin🎁～

如果文章对你有帮助，不妨赠人玫瑰，手有余香，预计将会在下篇更新较为完整的微信扫一扫界面和功能。

前段时间看了实习生的新项目，发现他启动不了项目，因为node版本太低，我让他去用nvm来管理node的版本，然后看到他切换版本的时候是这样的，先用nvm下载安装目标的node版本，然后在把安装好的node版本替换掉原先的node路径下的node_modules，而不是用命令行进行版本切换，才发现原来他使用nvm来切换node版本虽然显示切换成功，但全局的node版本一直是不变的，所以才用文件覆盖的方式强制进行解决，对于这个问题进行解决并且梳理

可以直接跳到第四步查看解决方案

1️⃣ 安装nvm

where nvm

找不到nvm路径的朋友可以用这个命令来找到nvm的安装路径，默认的安装路径都是差不多的

2️⃣ 查看目前node版本

可以看到目前的版本是node V16.14.2

3️⃣ nvm安装目标node版本

nvm的主要作用就是用来切换node的版本，为什么要切换node的版本，就是因为你的当前node版本和你要启动的项目不兼容，有两种可能，要么是你的项目太旧，你的node版本相对来说比较高，需要用到向下兼容；另外一种可能就是你项目用到的node比较新，你需要进行升级

先安装需要安装的目标版本，用isntall来安装你需要的对应node版本

回到你的nvm安装路径，就可以看到你已经安装的各种版本的node文件夹

当然也可以用命令行

nvm list

4️⃣ nvm切换到目标node版本

切换到目标node版本使用nvm use

nvm use

查看目前nvm安装了哪些版本 然后use来进行切换

到切换的时候发现了问题，这里无论怎么切换，node的版本依然不会变

可以看到我用的use来切换到15的版本，但是再次查看nvm的node历史版本，可以看到还是位于16.14.2的node版本，明明就是这么顺利的问题，出了一个让人摸不到头脑的事情

5️⃣寻找问题

既然nvm切换版本已经成功，那么为什么node版本不会变，有没有可能根本改的不是同一个node，或者是存在两个node，直到我打开环境变量一看，为啥会存在两个node的路径，可能的原因就是之前的node版本没有删除，node -v一直输出的是安装前的node

原来已经安装了一个node的，全局的node指向的node路径和nvm切换node的路径是不一样的

nvm切换的node是基于他文件夹中的nodejs

点进去看你会发现他也是有一个node.exe的程序的，所以问题是已经找到的了，目前系统上出现了两个node，并且nvm切换的node版本并不是全局的node，因为环境变量已经指向了旧的node，他的版本不会改变，那么nvm去怎么切换都是没有用的

6️⃣解决方案

看了网上的一些解决方案都是要在nvm中新建两个文件夹的方式来解决，但是其实直接把nodejs删除也是一个很直接的办法，先通过where node找到当前的node的安装目录，直接进行删除

最后是通过把另外一个目录的node进行删除，重新看一下node的安装路径，也就是重新执行一下 where node

可以看到在nvm配置正确的情况下是能直接指向nvm下的node的

最后重新切换一下node的版本，也就是上文的操作

PS

我指的手动切换是nvm下载node版本之后手动去替换node_modules，原来大家觉得用nvm use也是手动替换（确实是我的问题），经过评论区广大jym指正，可以尝试一下volta这个工具来进行切换版本，真正做到不用手动替换，后续我会亲自去体验一下并且发文，感谢评论区小伙伴

🙏 感谢您花时间阅读这篇文章！如果觉得有趣或有收获，请关注我的更新，给个喜欢和分享。您的支持是我写作的最大动力！

题目

给定两个数组，判断两数组内容是否相等。

• 不使用排序


• 不考虑元素位置

例：

[1, 2, 3] 和 [1, 3, 2] // true

[1, 2, 3] 和 [1, 2, 4] // false

思考几秒：有了😀😀

1. 直接遍历✍

• 直接遍历第一个数组，并判断是否存在于在第二个数组中


• 求差集, 如果差集数组有长度，也说明两数组不等（个人感觉比上面的麻烦就不举例了）

const arr1 =  ["apple", "banana", 1]

const arr2 =  ["apple", 1, "banana"]



function fn(arr1, arr2) {

  // Arrary.some: 有一项不满足 返回false

  // Arrary.indexOf: 查到返回下标，查不到返回 -1

  if (arr1.length !== arr2.length) {

    return false;

  }

  return !arr1.some(item => arr2.indexOf(item)===-1)

}



fn(arr1,arr2) // true

• 细心的小伙伴就会发现：NaN 会有问题

const arr1 =  ["apple", "banana", NaN]

const arr2 =  ["apple", NaN, "banana"]



function fn(arr1, arr2) {

  if (arr1.length !== arr2.length) {

    return false;

  }

  return !arr1.some(item => arr2.indexOf(item)===-1)

}



fn(arr1,arr2) // false

Arrary.prototype.indexOf() 是使用的严格相等算法 => NaN值永远不相等

Array.prototype.includes() 是使用的零值相等算法 => NaN值视作相等

• 严格相等算法: 与 === 运算符使用的算法相同


• 零值相等不作为 JavaScript API 公开， -0和0 视作相等，NaN值视作相等，具体参考mdn文档:

• 使用includes

const arr1 =  ["apple", "banana", NaN]

const arr2 =  ["apple", NaN, "banana"]



function fn(arr1, arr2) {

  if (arr1.length !== arr2.length) {

    return false;

  }

  return !arr1.some(item => !arr2.includes(item))

}



fn(arr1,arr2) // true

使用includes 确实可以判断NaN了，如果数组元素有重复呢？

// 重复的元素都是banana

const array1 = ["apple", "banana", "cherry", "banana"];

const array2 = ["banana", "apple", "banana", "cherry"];

// 或者

// 一个重复的元素是banana， 一个是apple

const array1 = ["apple", "banana", "cherry", "banana"];

const array2 = ["banana", "apple", "apple", "cherry"];

由上可知：这种行不通，接下来看看是否能从给数组元素添加标识入手

2. 把重复元素标识编号✍

这个简单：数组 元素重复 转换成val1, val2

function areArraysContentEqual(arr1, arr2) {

  if (arr1.length !== arr2.length) {

    return false;

  }



  // 重复数组元素 加1、2、3

  const countArr1 = updateArray(arr1)

  const countArr2 = updateArray(arr2)



  /**

   * 

   * @param {*} arr 数组 元素重复 转换成val1, val2

   * @returns 

   */

  function updateArray(arr) {

    const countMap = new Map();

    const updatedArr = [];



    for (const item of arr) {

      if (!countMap.has(item)) {

        // 如果元素是第一次出现，直接添加到结果数组

        countMap.set(item, 0);

        updatedArr.push(item);

      } else {

        // 如果元素已经出现过，添加带有编号的新元素到结果数组

        const count = countMap.get(item) + 1;

        countMap.set(item, count);

        updatedArr.push(`${item}${count}`);

      }

    }

    return updatedArr;

  }

  const flag = countArr1.some(item => !countArr2.includes(item))

  return !flag

}



const array1 = ["apple", "banana", "cherry", "banana"];

const array2 = ["banana", "apple", "banana", "cherry"];



areArraysContentEqual(array1, array2) // true



// 其实这种存在漏洞的

const array3 = ["apple", "banana", "cherry", "banana", 1, '1', '1' ];

const array4 = ["banana", "apple", "banana", "cherry", '1', 1, 1];

// 应该是false

areArraysContentEqual(array3, array4) // true

因为把判断的 转为了字符串 updatedArr.push(${item}${count}) 所以出问题了

3. 统计元素次数(最终方案)✍

function areArraysContentEqual(arr1, arr2) {

  if (arr1.length !== arr2.length) {

    return false;

  }



  // 创建计数对象，用于记录每个元素在数组中的出现次数

  const countMap1 = count(arr1)

  const countMap2 = count(arr2)



  // 统计数组中的元素出现次数

  function count(arr = []) {

    const resMap = new Map();

    for (const item of arr) {

      resMap.set(item, (resMap.get(item) || 0) + 1);

    }

    return resMap

  }

  // 检查计数对象是否相等

  for (const [key, count] of countMap1) {

    if (countMap2.get(key) !== count) {

      return false;

    }

  }



  return true;

}



const array1 = ["apple", "banana", "cherry", "banana", 1, '1', '11', 11];

const array2 = ["banana", "apple", "banana", "cherry", '1', 1, '11', 11];



areArraysContentEqual(array1, array2) // true

注意事项

这个题需要注意：

• 先判断长度，长度不等 必然不等


• 元素可重复


• 边界情况考虑
  
  
  
  • '1' 和 1 (Object的key是字符串， Map的key没有限制)
  
  
  • NaN
  
  
  • null undefined
  
  
  
  

结语：

如果本文对你有收获，麻烦动动发财的小手，点点关注、点点赞！！！👻👻👻

因为收藏===会了

如果有不对、更好的方式实现、可以优化的地方欢迎在评论区指出，谢谢👾👾👾

变量

变量概述

数据类型

运算符

算数运算符

递增递减运算符

比较运算符

逻辑运算符

赋值运算符

运算符优先级

选择结构

流程控制（顺序，分支，循环）

小结

数组

函数

函数基本概念

arguments

函数声明方式

JavaScript作用域

预解析

sum(1)(2,3)(4,5,6) js的链式调用

function sum(){

let arr = Array.prototype.slice.call(arguments);

fn = function(){

    let arr1 = Array.prototype.slice.call(arguements)

    return sum.apply(null,arr.concat(arr1))

}

//`reduce()` 方法将数组缩减为单个值。

//`reduce()` 方法为数组的每个值（从左到右）执行提供的函数。

//函数的返回值存储在累加器中（结果/总计）。

//注释：对没有值的数组元素，不执行 `reduce()` 方法。

//注释：`reduce()` 方法不会改变原始数组。

   fn.toString = function(){

       return arr.reduce((value,n)=>{

           return value+n

       })

   }

   return fn

}

//柯里化的高级实现

function curry(func){

    return curried(...args){

        if(args.length >= func.length){

            return func.apply(this,args);

        }else{

            return function(...args2){

                return curried.apply(this,args.concat(args2))

            }

        }

    }

}

面试点

sum(1)(2)(3)怎么实现

面试的时候，面试官让我讲一个这个怎么实现
当时想到的是嵌套闭包，调用返回值，进行累加

//这个是我在其他文章上看到的代码

function sum(a){

    function add(b){

        a =a+b

        return add;

    }

    add.toString = function(){

    return a;

    }    

    return sum;

    

查询了一下，涉及到了一个知识点，函数柯里化

//正常的函数

function sum(a,b){

    var sum = 0;

    sum = a+ b;

    console.log(sum);

}



//柯里化函数

function curry(a){

    return function(b){

        console.log(a+b)

    }

}

const sum = curry(1);

// 这个过程分为三步

// step1：

// addCurry(1)

// 返回下面的函数

// ƒ (arg) {

// 	return judge(1, arg);

// }

// step2：

// addCurry(1)(2)

// 返回下面的函数

// ƒ (arg) {

// 	return judge(1,2, arg);

// }

// step3：

// addCurry(1)(2)(3)

// 返回并执行下面的函数

// return fn(1,2,3);

// 最终得到结果6

函数柯里化

把接收多个参数的函数变换成接受一个单一参数的函数，并且但会接收余下的采纳数并且返回结果的新函数的技术。eg:它是指将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)(c)

参数复用

用于正则表达式的检验

//记录思路

    柯里化检验函数curry 

    const check = curry(); 

    生成工具化函数，进行验证

    const checkphone = check(/'正则表达式'/)

    检验电话号码

    checkphone('122333232');

延迟计算

返回的函数都不会立即执行，而是等待调用（开发者调用）

动态生成函数

比如说，在dom结点中每每绑定一次事件，都需要对环境进行判断，再去绑定这个事件；将这个过程进行柯里化，在使用前进行一次判断

const addEvent = (function() {

	if (window.addEventListener) {

		return function(ele) {

			return function(type) {

				return function(fn) {

					return function(capture) {

						ele.addEventListener(type, (e) => fn.call(ele, e), capture);

					}

				}

			}

		}

	} else if (window.attachEvent) {

		return function(ele) {

			return function(type) {

				return function(fn) {

					return function(capture) {

						ele.addEventListener(type, (e) => fn.call(ele, e), capture);

					}

				}

			}

		}

	}

})();



// 调用

addEvent(document.getElementById('app'))('click')((e) => {console.log('click function has been call:', e);})(false);



// 分步骤调用会更加清晰

const ele = document.getElementById('app');

// get environment

const environment = addEvent(ele)

// bind event

environment('click')((e) => {console.log(e)})(false);

//来自于[一文搞懂Javascript中的函数柯里化（currying） - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/120735088)

柯里化函数后虽然代码比较冗长，但是它的适用性增加了

柯里化封装

eg : sum(1,2,3...)

    //函数柯里化封装（这个封装可以直接复制走使用）

    function curry(fn, args) {

            var length = fn.length;

            var args = args || [];

            return function () {

                newArgs = args.concat(Array.prototype.slice.call(arguments));

                if (newArgs.length < length) {

                    return curry.call(this, fn, newArgs);

                } else {

                    return fn.apply(this, newArgs);

                }

            }

        }

        

        //需要被柯里化的函数

        function multiFn(a, b, c) {

            return a * b * c;

        }

        

        //multi是柯里化之后的函数

        var multi = curry(multiFn);

        console.log(multi(2)(3)(4));

        console.log(multi(2, 3, 4));

        console.log(multi(2)(3, 4));

        console.log(multi(2, 3)(4));

        //转载自[Javascript高级篇之函数柯里化 - 掘金 (juejin.cn)](https://juejin.cn/post/7111902909796712455)

Function.prototype

四个方法：apply，bind，call，toString

Function.prototype.bind()

定义

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。（MDN）

const module = {

  x: 42,

  getX: function () {

    return this.x;

  },

};



const unboundGetX = module.getX;

console.log(unboundGetX()); // The function gets invoked at the global scope

// Expected output: undefined



const boundGetX = unboundGetX.bind(module);

console.log(boundGetX());

// Expected output: 42

Function.prototype.apply()

function 的实例的apply（）方法会以给定的this值和作为数组（或类数组对象）提供arguments调用该函数

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);

// Expected output: 7

const min = Math.min.apply(null, numbers);

console.log(min);

// Expected output: 2

语法

apply(thisArg) apply(thisArg, argsArray)

参数

//argsArray --- 用于指定调用func时的参数，或者如果不需要向函数提供参数，则为null或undefined



//thisArg --- 调用func 时提供的this值，如果函数不处于严格对象，则null 和undefined 会被替换成全局对象，原始值会被转换成对象

返回值

使用指定的this值和参数调用函数的结果

Function.prototype.call()

Function 实例的 call() 方法会以给定的 this 值和逐个提供的参数调用该函数

//示例

function Product(name, price) {

  this.name = name;

  this.price = price;

}



function Food(name, price) {

  Product.call(this, name, price);

  this.category = 'food';

}



console.log(new Food('cheese', 5).name);

// Expected output: "cheese"

//语法

call(thisArg)

call(thisArg, arg1)

call(thisArg, arg1, arg2)

call(thisArg, arg1, arg2, /* …, */ argN)

Function.prototype.toString()

Function 实例的 toString() 方法返回一个表示该函数源码的字符串。

function sum(a, b) {

  return a + b;

}



console.log(sum.toString());

// Expected output: "function sum(a, b) {

//                     return a + b;

//                   }"



console.log(Math.abs.toString());

// Expected output: "function abs() { [native code] }"

放一个JavaScript的链接

转载自：http://www.cnblogs.com/wangdan0915…

:is()

你是否曾经写过下方这样冗余的CSS选择器:

.active a,

.active button,

.active label {

  color: steelblue;

}

其实上面这段代码可以这样写：

.active :is(a, button, label) {

  color: steelblue;

}

看~是不是简洁了很多！

是的，你可以使用 :is() 对选择器的任何部分进行分组，例如，你可以对如下代码：

.section h2,

.aside h2,

.nav h2 {

  color: steelblue;

}

进行转换：

:is(.section, .aside, .nav) h2 {

  color: steelblue;

}

但是 :is() 不仅对父选择器和子选择器有用，它也可以选择多个相邻的选择器，比如:

button:is(:focus, :hover, :active) {

  color: steelblue;

}



button:is(.active, .pressed) {

  color: lightsteelblue;

}

上述代码等价于：

button:focus, button:hover, button:active {

  color: steelblue;

}



button.active, button.pressed {

  color: lightsteelblue;

}

:where()

:where() 是一个与 :is() 非常相似的伪类，也值得注意。它们看起来非常相似:

:where(.section, .aside, .nav) h2 {

  color: steelblue;

}

但区别在于 :where 的权重为 0，而:is() 总是会采用列表中最特高的选择器的权重。例如，你知道下面的 CSS 代码中的按钮是什么颜色吗?

:is(html) button {

  color: red;

}



:where(html) button {

  color: blue;

}

在上面的例子中，虽然以 :where() 开头的块在以 :is() 开头的块下面，但 :is() 块具有更高的权重。

:has()

一个相关但非常不同的伪类是:has()。:has() 允许选择包含匹配选择器(或选择器集)的子元素的父元素。

:has() 的一个示例是不显示下划线的情况下包含图像或视频的链接:

a { text-decoration: underline }



/* 链接有下划线，除非它们包含图像或视频 */

a:has(img, video) {

  text-decoration: none;

}

现在，如果默认情况下我们的 a 标记有下划线文本，但其中有图像或视频，则任何匹配的锚元素的下划线将被删除。

你也可以结合 :is() 使用：

:is(a, button):has(img, video) {

  text-decoration: none;

}

我们还需要预处理器吗?

现在你可能会说“SCSS可以做到这一点!，你甚至可能更喜欢它的语法:

.active {

  button, label, a {

    color: steelblue;

  }

}

说的没错，这很优雅。但是，CSS 似乎现在已经都能获取到我们曾经需要SCSS(或其他预处理器)才能获得的特性。

CSS 变量也是 CSS 本身的另一个不可思议的补充，它回避了一个问题：就是什么时候或者多久你真的需要预处理程序:

.active :is(a, button, label) {

  --color: steelblue;

  color: var(--steelblue);

}

这并不是说预处理器没有它们的用例和优点。

但我认为在某个时间点上，它们确实是处理任何重要CSS的强制要求，而现在情况不再如此了。

惊喜

我想说的是，CSS的未来仍然是光明的。CSS 工作组正积极致力于直接向CSS中添加嵌套选择器。他们正在积极地在3种可能的语法之间进行选择:

/* 1 */

article {

  font-family: avenir;

  & aside {

    font-size: 1rem;

  }

}



/* 2 */

article {

  font-family: avenir;

} {

  aside {

    font-size: 1rem;

  }

}



/* 3 */

@nest article {

  & {

    font-family: avenir;

  }

  aside {

    font-size: 1rem;

  }

}

你最喜欢哪一个?

庆幸的是，第 1 种已经被官方采纳！所以我们可能很快就会看到一个非常像 scss 的嵌套语法。

浏览器支持

目前所有主流浏览器都支持 :is() 和 :where() 伪类:

但是，需要注意，我们在这里提到的 :has() 伪类没有相同级别的支持，所以使用 :has() 时要小心:

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。

大家设想一下，如果有一个超级大的表单页面，用户好不容易填完了，然后点击提交，这个时候请求接口居然返回401，然后跳转到登录页。。。那用户心里肯定是一万个草泥马~~~

所以项目里实现token无感知刷新是很有必要的~

这几天在项目中实践了一套token无感知刷新的方案，其实也有看了一下网上那些解决方案，也知道这类的方案已经烂大街了，但是感觉不太符合我想要的效果，主要体现在以下几个方面：

• 逻辑都写拦截器里，耦合性高，不太好


• 接口重试的机制做的不太好


• 接口并发时的逻辑处理做的不太好

我为什么不想要让这套逻辑耦合在拦截器里呢？一方面是因为，我想要写一套代码，在很多的项目里面可以用，把代码侵入性降到最低

另一方面，因为我觉得token无感知刷新涉及到了接口重发，我理解是接口维度的，不应该把这套逻辑放在响应拦截器里去做。。我理解重发之后就是一个独立的新接口请求了，不想让两个独立的接口请求相互有交集~

所以我还是决定自己写一套方案，并分享给大家，希望大家可以提提意见啥的，共同进步~

温馨提示：需要有一些Promise基础

思路

其实大体思路是一样的，只不过实现可能有差别~就是需要有两个 token

• accessToken：普通 token，时效短


• refreshToken：刷新 token，时效长

accessToken用来充当接口请求的令牌，当accessToken过期时效的时候，会使用refreshToken去请求后端，重新获取一个有效的accessToken，然后让接口重新发起请求，从而达到用户无感知 token 刷新的效果

具体分为几步：

• 1、登录时，拿到accessToken和refreshToken，并存起来


• 2、请求接口时，带着accessToken去请求


• 3、如果accessToken过期失效了，后端会返回401


• 4、401时，前端会使用refreshToken去请求后端再给一个有效的accessToken


• 5、重新拿到有效的accessToken后，将刚刚的请求重新发起


• 6、重复1/2/3/4/5

有人会问：那如果refreshToken也过期了呢？

好问题，如果refreshToken也过期了，那就真的过期了，就只能乖乖跳转到登录页了~

Nodejs 模拟 token

为了方便给大家演示，我用 express 模拟了后端的 token 缓存与获取，代码如下图（文末有完整代码）由于这里只是演示作用，所以我设置了

• accessToken：10秒失效


• refreshToken：30秒失效

前端模拟请求

先创建一个constants.ts来储存一些常量（文末有完整源码)

接着我们需要对axios进行简单封装，并且模拟：

• 模拟登录之后获取双 token 并存储


• 模拟10s后accessToken失效了


• 模拟30s后refreshToken失效了

理想状态下，用户无感知的话，那么控制台应该会打印

test-1

test-2

test-3

test-4

打印test-1、test-2比较好理解

打印test-3、test-4是因为虽然accessToken失效了，但我用refreshToken去重新获取有效的accessToken，然后重新发起3、4的请求，所以会照常打印test-3、test-4

不会打印test-5、test-6是因为此时refreshToken已经过期了，所以这个时候双token都过期了，任何请求都不会成功了~

但是我们看到现状是，只打印了test-1、test-2

不急，我们接下来就实现token无感知刷新这个功能~

实现

我的期望是封装一个class，这个类提供了以下几个功能：

• 1、能带着refreshToken去获取新accessToken


• 2、不跟axios的拦截器耦合


• 3、当获取到新accessToken时，可以重新发起刚刚失败了的请求，无缝衔接，达到无感知的效果


• 4、当有多个请求并发时，要做好拦截，不要让多次去获取accessToken

针对这几点我做了以下这些事情：

• 1、类提供一个方法，可以发起请求，带着refreshToken去获取新accessToken


• 2、提供一个wrapper高阶函数，对每一个请求进行额外处理


• 3/4、维护一个promise，这个promise只有在请求到新accessToken时才会fulfilled

并且这个类还需要支持配置化，能传入以下参数：

• baseUrl：基础url


• url：请求新accessToken的url


• getRefreshToken：获取refreshToken的函数


• unauthorizedCode：无权限的状态码，默认 401


• onSuccess：获取新accessToken成功后的回调


• onError：获取新accessToken失败后的回调

以下是代码（文末有完整源码）

使用示例如下

最后实现了最终效果，打印出了这四个文本

完整代码

constants.ts

// constants.ts



// localStorage 存储的 key

export const LOCAL_ACCESS_KEY = 'access_token';

export const LOCAL_REFRESH_KEY = 'refresh_token';



// 请求的baseUrl

export const BASE_URL = 'http://localhost:8888';

// 路径

export const LOGIN_URL = '/login';

export const TEST_URL = '/test';

export const FETCH_TOKEN_URL = '/token';

retry.ts

// retry.ts



import { Axios } from 'axios';



export class AxiosRetry {

  // 维护一个promise

  private fetchNewTokenPromise: Promise<any> | null = null;



  // 一些必须的配置

  private baseUrl: string;

  private url: string;

  private getRefreshToken: () => string | null;

  private unauthorizedCode: string | number;

  private onSuccess: (res: any) => any;

  private onError: () => any;



  constructor({

    baseUrl,

    url,

    getRefreshToken,

    unauthorizedCode = 401,

    onSuccess,

    onError,

  }: {

    baseUrl: string;

    url: string;

    getRefreshToken: () => string | null;

    unauthorizedCode?: number | string;

    onSuccess: (res: any) => any;

    onError: () => any;

  }) {

    this.baseUrl = baseUrl;

    this.url = url;

    this.getRefreshToken = getRefreshToken;

    this.unauthorizedCode = unauthorizedCode;

    this.onSuccess = onSuccess;

    this.onError = onError;

  }



  requestWrapper<T>(request: () => Promise<T>): Promise<T> {

    return new Promise((resolve, reject) => {

      // 先把请求函数保存下来

      const requestFn = request;

      return request()

        .then(resolve)

        .catch(err => {

          if (err?.status === this.unauthorizedCode && !(err?.config?.url === this.url)) {

            if (!this.fetchNewTokenPromise) {

              this.fetchNewTokenPromise = this.fetchNewToken();

            }

            this.fetchNewTokenPromise

              .then(() => {

                // 获取token成功后，重新执行请求

                requestFn().then(resolve).catch(reject);

              })

              .finally(() => {

                // 置空

                this.fetchNewTokenPromise = null;

              });

          } else {

            reject(err);

          }

        });

    });

  }



  // 获取token的函数

  fetchNewToken() {

    return new Axios({

      baseURL: this.baseUrl,

    })

      .get(this.url, {

        headers: {

          Authorization: this.getRefreshToken(),

        },

      })

      .then(this.onSuccess)

      .catch(() => {

        this.onError();

        return Promise.reject();

      });

  }

}

index.ts

import { Axios } from 'axios';

import {

  LOCAL_ACCESS_KEY,

  LOCAL_REFRESH_KEY,

  BASE_URL,

  LOGIN_URL,

  TEST_URL,

  FETCH_TOKEN_URL,

} from './constants';

import { AxiosRetry } from './retry';



const axios = new Axios({

  baseURL: 'http://localhost:8888',

});



axios.interceptors.request.use(config => {

  const url = config.url;

  if (url !== 'login') {

    config.headers.Authorization = localStorage.getItem(LOCAL_ACCESS_KEY);

  }

  return config;

});



axios.interceptors.response.use(res => {

  if (res.status !== 200) {

    return Promise.reject(res);

  }

  return JSON.parse(res.data);

});



const axiosRetry = new AxiosRetry({

  baseUrl: BASE_URL,

  url: FETCH_TOKEN_URL,

  unauthorizedCode: 401,

  getRefreshToken: () => localStorage.getItem(LOCAL_REFRESH_KEY),

  onSuccess: res => {

    const accessToken = JSON.parse(res.data).accessToken;

    localStorage.setItem(LOCAL_ACCESS_KEY, accessToken);

  },

  onError: () => {

    console.log('refreshToken 过期了，乖乖去登录页');

  },

});



const get = (url, options?) => {

  return axiosRetry.requestWrapper(() => axios.get(url, options));

};



const post = (url, options?) => {

  return axiosRetry.requestWrapper(() => axios.post(url, options));

};



const login = (): any => {

  return post(LOGIN_URL);

};

const test = (): any => {

  return get(TEST_URL);

};



// 模拟页面函数

const doing = async () => {

  // 模拟登录

  const loginRes = await login();

  localStorage.setItem(LOCAL_ACCESS_KEY, loginRes.accessToken);

  localStorage.setItem(LOCAL_REFRESH_KEY, loginRes.refreshToken);



  // 模拟10s内请求

  test().then(res => console.log(`${res.name}-1`));

  test().then(res => console.log(`${res.name}-2`));



  // 模拟10s后请求，accessToken失效

  setTimeout(() => {

    test().then(res => console.log(`${res.name}-3`));

    test().then(res => console.log(`${res.name}-4`));

  }, 10000);



  // 模拟30s后请求，refreshToken失效

  setTimeout(() => {

    test().then(res => console.log(`${res.name}-5`));

    test().then(res => console.log(`${res.name}-6`));

  }, 30000);

};



// 执行函数

doing();

结语 & 加学习群 & 摸鱼群

我是林三心

• 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；


• 一个偏前端的全干工程师；


• 一个不正经的掘金作者；


• 一个逗比的B站up主；


• 一个不帅的小红书博主；


• 一个喜欢打铁的篮球菜鸟；


• 一个喜欢历史的乏味少年；


• 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点

作者：Sunshine_Lin

链接：juejin.cn/post/728169…

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

① 自动打断点（抛异常时自动断点）

偶然一次可能不小心打开某个设置选项，可能设置了英文又不知道是打开了什么，只知道当每次打开F11打开控制台调试看数据的时候，就是不会自动停在某个位置，又不知道怎么停掉，怀疑会不会是安装了什么谷歌插件或者是油猴哪个脚本代码写错写了什么。

不小心打钩了断点调试的遇到未捕获的异常时暂停，或者在遇到异常时暂停这两个选项其中一个。就有可能导致了谷歌的调试器暂停，取决于这个网站有没有一些异常触发到这一点，勾选上每次异常浏览器会帮我们打断点。

所以解决办法就是把谷歌浏览器中的这两个勾去掉，如果不是你本意打开想要调试网站中一些异常的报错。

② 一键重发请求（不用每次重新请求就刷新页面）

排查接口的时候，需要重新请求该接口，不必要每次重新刷新页面去请求试接口里面传参对不对返回来的数据对不对。重发请求很简单，右击该接口重发xhr即可。

③ 断点调试+debugger+console+try...catch

(1) console.log

找bug解决bug是很重要滴。console.log-输出某个变量值是非常非常常用的，只要做码农一定得会各种语言的输出消息和变量的语句，方便我们查看和调试。

(2) debugger（不用每次都console）

在代码某个语句后面或者前面输debugger

在我入行到在学校生涯那段时间都不知道debugger;这玩意，有一次项目有一个比较棘手不知道怎么解决的问题，甲方公司项目负责人开会重点讲了那个问题，就见他这里输一下dubugger，那里输一个debugger，当时就觉得那玩意很神（反正意识上只要我们不懂的东西刚开始接触都是这样，这里神那里神的，接触久了就觉的也就那样不过如此，很平常），最后也没看出什么来。

debugger就是在某个状态下，用这个debugger;语句在那里断一下点，然后当下，上下文的状态和值都可以在查看，哪个分支导致变量状态错误。

使用debugger可以查看:

• 作用域变量


• 函数参数


• 函数调用堆栈


• 代码整个执行过程（从哪一句到哪一句的）


• 如果是异步promise async...await 等这种的话就需要在then和catch里面debugger去调试

(3) try...catch 捕获异常

try {

    // 可能会抛出异常的代码

} catch {

    // 处理所有异常的代码

}

用try...catch捕获异常，包括运行时错误和自定义以及语法错误。

在try...catch中还可以在某些情况下用throw在代码中主动抛出异常。

try {

    // 可能会抛出异常的代码

    

    if (某某情况下) throw '某某错误提示信息'

    

} catch {

    // 处理所有异常的代码

} finally {

    // 结束处理用于清理操作

}

④ 联调查看接口数据

如上图这个接口，如果想要复制接口preview里面的数据，

除了去Responese里面去找我们需要的某个值去选择复制之外（这个有个缺点就是要找值不直观），还可以右击某个值，然后通过点击store object as global variable(存储为全局变量) 获取。

当我们点击了之后，控制台就会出现tempXX这个变量。

我们就只需要在控制台输入copy(temp3)copy(要复制的json名)，在粘贴板上就有这个json数据了。

💡
全局方法copy()在console里copy任何你能拿到的数据资源。

⑤ 后端接口数据返回json

这个有时候有的同学有可能碰到类似这种的JSON数据{\"name\":\"John\",\"address\":\"123 Main St, City\"}

解决方法

直接打开控制台console，输入 JSON.parse("{"name":"John","address":"123 Main St, City"}")，这样

如果你想复制下来用，直接跟上面我们用copy这好碰上，赋值加上一个copy就可以了。

这样这个值就在粘贴板上了。

总结

报错和bug，多多少少会贯穿我们的职业生涯中，如何定位问题、解决问题，加以调试，是我们必须也是不能不必备的技能。

☎️ 希望对大家有所帮助，如有错误，望不吝赐教，欢迎评论区留言互相学习。

最近遇到一个问题，计算滚动距离，滚动比例达到某界定值时，显示mask，很常见吧^ _ ^

这里讲的不是这个需求的实现，是其中遇到了一个比较有意思的bug，靠这个bug才达到了正确效果，以及这个bug是如何暴露的（很重要）。

下面是演示代码和动图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .container {

            width: 300px;

            max-height: 300px;

            background-color: black;

            position: absolute;

            top: 60px;

            left: 50%;

            transform: translateX(-50%);

            overflow-y: auto;

        }

        .child {

            width: 260px;

            height: 600px;

            margin: 0px 20px;

            background-color: pink;

            position: relative;

        }

        .flag {

            position: absolute;

            width: 100%;

            height: 25px;

            background-color: blueviolet;

            color: aliceblue;

            text-align: center;

            line-height: 25px;

            font-size: 14px;

            left: 0;

            right: 0;

        }

        .top {

            top: 0;

        }

        .bottom {

            bottom: 0px;

        }

    </style>

</head>



<body>

    <div class="container">

        <div class="child">

            <div class="flag top">top</div>

            <div class="flag bottom">bottom</div>

        </div>

    </div>

</body>

</html>

开始计算啦，公式：滚动比例 = 滚动距离 / 可滚动距离

滚动距离: $0.scrollTop

可滚动距离: $0.scrollHeight - $0.offsetHeight

即：scrollRatio = scrollTop / (scrollHeight - offsetHeight)

滚动到底部，计算结果是 300 / (600 - 300) = 1

我们需要拿scrollRatio和某界定值（比如0.1）作大小的比较，计算是true还是false（用isShow = scrollRatio < 某界定值来保存）。

这里一切正常。

不正常的情况出现了

就是没有出现滚动条的情况，即.child的高度没有超过.container的高度时，把.child的高度设成.container的max-height，就没有滚动条了（下面讲的情景也都是没有滚动条的情况）。

这个时候再去计算，得到了NaN，以至于 NaN < 0.1 = false。

因为isShow的预期就是false，所以一直都没有发现这个bug。

那么它是如何暴露的呢？

后来新的需求给.container加了border。演示一下加border，然后再去计算：

发现没，这时候$0.offsetHeight的高度把border的高度也算进去了，结果就成了true，这不是想要的结果 ❌。

然后就是一番查验

offsetHeight是一个元素的总高度，包括可见内容的高度、内边距（padding）、滚动条的高度（如果存在）以及边框（border）的高度。

而我们这里只需要可见的高度，就可以用到另一个属性了clientHeight。

clientHeight是指元素的可见内容区域的高度，不包括滚动条的高度和边框的高度。它仅包括元素的内部空间，即内容加上内边距。

当然这也只是继续使除数为0，然后得到结果为NaN，不过bug已经暴露出来了，后面就是一些其他的优化啦～

总结 + 复习（盒模型 box-sizing）

发现没有，offsetHeight和clientHeight的区别，就像盒模型中的标准盒模型和怪异盒模型的区别:

box-sizing: content-box(默认，标准盒模型)：宽度和高度的计算值都 不包含 内容的边框（border）和内边距（padding）。添加padding和border时， 会 使整个div的宽高变大。

box-sizing: border-box（怪异盒模型）：宽度和高度的计算值都 包含 内容的边框（border）和内边距（padding）。添加padding和border时， 不会 使整个div的宽高变大。

这样讲是不是加深一下对这两种属性的印象

^ - ^

在此之前我是自由职业者，满打满算一年空窗期，在被动收入不稳定，心想还是需要一份收入来维持日常生活开销，再去考虑打造自己的额外收入。

前前后后从准备到上岸历时一个半月，今天从三个方面分享这个过程我做了什么？

心态

做事情之前，心态很重要，我遇事很少否定自己，在我看来，别人可以做到的，自己也可以，虽然一年空窗，基本上不接触技术，写代码量远不如以前，但又不是要上天或者造原子弹，取决于谁执行力强，谁付出的时间多，仅此而已。

换作以前，相信大部分的同学去找半个月都可以入职自己期望的岗位，看了一下网上的情绪，行情在这个环境下的确蛮消极的，很多人找了几个月都没有上岸的，当然我自己也有感受到，简历丢出去之后没有声音，并且在各大招聘网站上坑位也减少了，相比两三年前如日中天的行情，难免会有这类情绪。

但我没有那么焦虑，为什么呢？其一是我心态比较好，其二是跟我的定位有关。

定位

第一个是我要找的岗位定位为中高级开发，而这类人在市场上来看一直都是稀缺资源，其他行业也如此。

第二个是薪酬范围定位在20k-25k范围，给不到我会觉得工作没劲，累点没关系，主要还是相信自己可以胜任。

第三个是前期投几个低于期望值的试试水，了解一下目前行情顺便找找感觉。

所以，接下来我只需要把目标定位在寻找中高级开发岗位即可，完善自己达到这个能力要求，下面是行动计划，细看下来你会发现这又是个PDCA。

计划

我把计划分为这几个模块：

1. 简历优化

我一开始是不会写简历的，因为中间没有跳过槽，也没定时更新，所以就随便拿了以前的模板改了改时间和项目就开始投了，简历回复少不说，即使有机会面试了也没有把简历提到的讲清楚，结果可想而知。

后面想想不行，虽然没写过，但是我会看简历啊，之前带团队有时候一天要看上百份简历，大概知道面试官青睐哪些人才，优化之后断断续续才有面试。

其次是我在面试过程结束时问面试官哪些地方还需要提升的，不少也会反馈简历问题，诸如：

• 管理工作内容太笼统了，看不出具体做了什么


• 没有说清楚空窗期做了什么


• 没有体现出你在项目中做了什么


• ......

知道自己问题之后，前后迭代了大概十几个版本，越到后面的质量越高，直至我入职之后，还有一个目标企业发来邀请。

2. 技能要求

前端领域涉及到这么多技能，需要有方向进行准备，分享一下我是如何分类：

基础：

• 前端三大件：HTML、CSS、JS


• 主流框架：Vue2/Vue3、React


• 状态管理：Vuex、redux、mobox


• 构建工具：webpack、Vue-cli、Vite、gulp


• 前端安全：xss、csrf、cors 常见问题和防御措施

进阶：

• JS运行机制、事件轮询机制、浏览器运行原理


• 前端性能监控、前端异常监控如何做？


• 前端工程化体系包含哪些


• 前端性能优化手段：页面性能、构建性能、代码性能


• Vue、React核心原理


• 基础算法数据结构


• Http协议

面对上面的技术基础类，主要是刷官方文档+常见面试题，这些更多是概念性的东西，在这里就不多说了，相信大家手上多少都有八股文资料，如果没有可以私信我。

而面对进阶类，首先总结自己项目中用到了哪些，吃透它。其次，面对不太熟悉的板块如HTTP网络，我会通过专栏学习或者一些讲得好的课程来弥补。

除了上面的方法，还有一种我常用的技巧来覆盖知识盲区，就是下面要说的模拟面试，几乎适用于任何技能面试。

3. 模拟面试

这里要说的模拟面试并不是找一些大佬一对一模拟训练，而是换位思考（当然能够模拟面试效果更好啦~）。

即把自己想象成面试官，在考察某一个知识点的时候，你会问自己什么问题呢？

举2个栗子🌰

对于用Vue的同学，我会问：

• vue diff 与 react diff有什么区别？


• 为什么v-for中建议带:key，有什么情况下是可以不带的？


• 写过组件或者插件吗，有什么注意点？


• vue-router原理是什么

结合一些热门的话题，我会问：

• vue2与vue3对比，你觉得主要区别是什么？


• vue2与vue3在性能优化做了什么？两者的构建产物有什么区别？


• 如果你去学vue3，你会从哪里开始，怎么学？

除了以上我给自己虚构的问题之外，还有诸如vue生命周期啊、组件通信啊等等基础肯定是要会的，我会刷文档或虚构题目，这些比较简单，搞懂就行了。

对于设计模式，我也问了自己几个问题：

• 你知道的设计模式有哪些，知道他们的应用场景吗（解决了什么问题）？


• 在工作中用到的设计模式有哪些？说说它们的优劣势


• Vue中用了哪些设计模式?


• 观察者和发布订阅有什么不同？

基本上这个薪酬范围的设计模式，搞懂了以上问题大差不差。

再来说说这种方式有什么优势？

首先，问题是通过我们自身思考提出并主动寻求解决的，这本身已经存在闭环了，有利于我们理解一个知识点。其次，我们思考提出某个问题，意味着大脑🧠的神经元网络中有存在某些游离神经节点，它没有被连接到一起，随着提出并解决的问题越多，连接起来的网络就越大，这就形成了所谓的知识网络，相比没有目的刷题，它的持久性更强，更能抗遗忘。

总结

结束之前，再分享面试过程中的一个小插曲，当时面了一家小企业，终面的时候面试官问我期望薪酬，就报了18k，但是面试官说给不到，17k考不考虑？我当时没有回绝，就说回去考虑一下。

回去考虑一番之后，我根据当时岗位给到的薪资范围，加上当时家里事情比较多，想先稳定下来再考虑其他的，打算接了这个offer准备上班，突然闹了个乌龙，HR说老板那边重新定了价，只能给到16k，我说还能这么操作？这不明摆着欺负老实人嘛？

想了想如果接了这个offer，岂不是比之前离职时更低，更别说对比以前的同事了。心里忍不下这口气，以至于那两周，每天都撸到一点钟，功夫不负有心人，最后顺利上岸了！

分享几点个人觉得比较关键的：

• 永远相信自己，心态很重要，不仅仅面试，它贯穿人的一生


• 简历真实，不玩心思，例如空窗期这种，如实说明


• 吃透简历内容，不留疑点


• 面试过程中不着急回答问题，可以先澄清问题动机，不要为了回答而拼凑答案


• 前面几次不通过没关系，但一次要比一次好

以至于如何备战高级开发，等我升级了再来分享~

最后，祝愿所有航海者都能够顺利靠岸！！！

注：由于最近比较多朋友私信我咨询简历优化建议或者八股文，可以加我的微信followJavaScript，丢简历过来即可，备注“掘金”。

前言

最近，政府为了刺激消费，发放了大量的消费券，大家应该参与了抢券大军吧。但是如果你是一个前端程序员，你有没有想过，这个消费券样式我能实现吗？今天给大家分享一下，常用的票券的样式实现。

抽象一下

对我们常用的票券进行抽象后，大概就是下面几种样式了，我们来看看怎么实现吧

实现方案

对于内凹圆角或者镂空的这类样式，我们一般实现方案是使用mask(遮罩)；mask语法很简单，我们就当成background来用就好了，可以是PNG图片、SVG图片、也可以是渐变绘制的图片，同时也支持多图片叠加。然后我们了解一下他的遮罩原理：最终效果只显示不透明的部分，透明部分将不可见，半透明类推。

<1>实现一个内凹圆角

class="content">
 

.content {     

   width: 300px;     

   height: 150px;     

   margin: auto;     

   -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 0);     

   background: red; } 

   ellipse

当前（2016.10.19）mask 处于 候选标准阶段（CR），还不是正式标准（REC），webkit/blink 内核加前缀 -webkit- 可使用。

<2>实现两个内凹圆角之遮罩合成

  .content{           

    width:300px;           

    height:150px;           

    background:red ;           

   -webkit-mask:radial-gradient(circle at left center,transparent 20px,red 20px)  ,     radial-gradient(circle at right center,transparent 20px,red 20px) ;           

    }

上面的写法是没有效果的，此时使用为两个重合后，整个区域都是不透明的，导致没有效果，这个时候我们需要使用遮罩合成；我们通过ps了解一下遮罩合成

遮罩合成mask-composite

-webkit-mask-composite: destination-in; /只显示重合的地方/

<3>实现两个内凹圆角之平铺

 .content{           

         width:300px;           

         height:150px;           

         background:red ;           

          -webkit-mask:radial-gradient(circle at 20px center,transparent 20px,red 20px);           

         -webkit-mask-position: -20px;       

}

<4>实现四个内凹圆角

 .content{           

       width:300px;           

       height:150px;           

       background:red ;           

       -webkit-mask:radial-gradient(circle at 20px 20px,transparent 20px,red 20px);           

      -webkit-mask-position: -20px -20px;       

}

<5>实现六个内凹圆角

 .content{           

     width:300px;           

     height:150px;           

     background:red ;           

     -webkit-mask:radial-gradient(circle at 20px 20px,transparent 20px,red 20px);           

     -webkit-mask-position: -20px -20px;           

     -webkit-mask-size:50% 100%;       

}

<6>实现中间一排的镂空

.content{           

       width:300px;           

       height:150px;           

       background:red;           

        -webkit-mask:           

            radial-gradient(circle at 20px 20px,transparent 20px,red 20px) -20px -20px/50% 100% ,           

            radial-gradient(circle at center 5px,transparent 5px,red 5px) 0px -5px/100% 30px;           

      -webkit-mask-composite: destination-in;        }

<7>实现两边多个内凹圆角

其实很简单:只需把遮罩的高度，变小，让他们平铺就可以了

 .content{           

       width:300px;           

      height:150px;           

       background:red ;           

      -webkit-mask:radial-gradient(circle at 10px 10px,transparent 10px,red 10px);           

     -webkit-mask-position: -10px 5px;           

     -webkit-mask-size:100% 30px;       

}

引言

事情起源还得从一个需求讲起, 需求内容如下:

1. 假设有串字符串如下:

const str = `Pharmaceuticals progress events.



JSON output:

{

  "name": "moyuanjun",

  "age": 28

}`

2. 现需要从字符串中, 提取到 JSON output: 后面的所有字符串, 后面还需要将其解析为对象(当然这不是本文的重点)

需求本身很简单, 实现起来也容易, 具体方案如下, 那么请问以下实现方法有啥问题呢?

const jsonStr = str.replace(/^(\s|\S|.)*?JSON output:/, '')

由于字符串是 gpt 返回的, 它是不可控的, 这里当字符串为 No, this text is not a transaction event. Therefore, the requested entities cannot be extracted. 时, 通过上文的正则进行匹配时就会导致页面卡住, 这里如果大家好奇的话, 可以尝试将下面代码复制到 浏览器控制台 并执行

'No, this text is not a transaction event. Therefore, the requested entities cannot be extracted.'.replace(/^(\s|\S|.)*?JSON output:/, '')

上面主要问题还是出在正则上, 执行上面正则匹配, 会陷入 回溯 陷阱, 我们可以看下上面正则在 regex101 的测试结果, 从测试结果来看正则的匹配次数是有点夸张的

下面我们来针对 回溯 问题进行展开....

一、正则引擎

传统正则引擎分为 NFA (非确定性有限状态自动机) 和 DFA(确定性有限状态自动机), 那么, 什么是确定型、非确定型、有限状态以及自动机呢?

确定型与非确定型: 假设有一个字符串 abc 需要匹配, 在没有编写正则表达式的前提下, 就能够确定 字符匹配顺序 的就是确定型, 不能确定字符匹配顺序的则为非确定型

有限状态: 所谓有限, 指的是在有限次数内能够得到结果

自动机: 自动机即自动完成, 在我们设置好匹配规则后由引擎自动完成, 不需要人为干预即为自动

根据上面的解释我们可得知 NFA 引擎和 DFA 引擎的主要区别就在于: 在没有编写正则表达式的前提下, 是否能确定字符执行顺序;, 下面我们来简单介绍下这两种引擎:

1.1 NFA 引擎

NFA(Nondeterministic finite automaton)又名 非确定性有限状态自动机, 主要特点如下:

1. 
   

   表达式驱动: 由要执行的正则表达式进行驱动的算法, 正则引擎从正则表达式起始位置开始, 尝试与文本进行匹配, 如果匹配成功, 都前进一步, 否则文本一直前进到下一个字符, 直到匹配成功

   
   


2. 
   

   会记录位置: 当正则表达式需要进行选择时, 它会 选择 一个 路径 进行匹配, 同时会 记录 当前的 位置, 如果选择的路径匹配不成功则需要回退回去, 重新选择一个路径进行尝试, 直到匹配完成, 如果所有可能情况全部匹配不成功, 则本次匹配失败

   
   


3. 
   

   单个字符可能会检查多次: 从👆🏻可以看出, 字符串中一个字符可能会被多次匹配到, 因为当一条正则路径不通时, 会进行回退

   
   


4. 
   

   支持零宽断言: 因为具有回退功能, 所以可以很容易实现零宽、断言、捕获、反向引用等功能

   
   

最后借用 猪哥 制作的一个小动画, 方便大家理解:

1.2 DFA

DFA(Deterministic finite automaton) 又名 确定性有限自动机, 主要特点如下:

1. 
   

   文本驱动: 由要搜索的文本驱动的算法, 文本中的每个字符 DFA 引擎只会查看一次, 简单理解就是对字符串进行一次循环, 每次循环都和正则进行一次匹配, 匹配成功字符串和正则指针都相应的向下移动

   
   


2. 
   

   DFA 引擎会记得所有的匹配可能, 并且每次匹配都会返回其中 最长的匹配, 这么做的目的是为了让后面的匹配能够更加轻松, 正因为如此字符串 nfa not 在 (nfa|nfa not) 中匹配结果为: nfa not

   
   


3. 
   

   优点: 优点很明显, 由于只会会循环一直字符串、并且会提前记住所有可能情况, 所以相对来说匹配效率是很高的

   
   


4. 
   

   缺点:

   
   

• 它始终将返回最长匹配结果, 无法控制表达式来改变这个规则


• 因为需要记住所以可能情况, 所以正则表达式预编译时间会更长, 占用更多内存


• 没有回退, 所有重复的运算符 都是贪婪 的, 会尽可能匹配更多的内容


• 因为不存在回退, 所以自然不支持零宽断言、捕获、反向引用等功能

最后借用 猪哥 制作的一个小动画, 方便大家理解:

补充说明: 上面只是对传统的两个正则引擎进行简单介绍, 在 JS 中正则引擎使用的则是 NFA 下面我们也只是对 JS 中的正则、以及 回溯 进行简单介绍, 同时在 regex101 中我们选用的语言则是 PHP, 主要是因为在 PHP 用的也是 NFA 引擎并且在 regex101 下会多一个 Regex Debugger 功能(不知道为什么 JS 没有 😭)

二、回溯

我们知道, NFA 引擎是用表达式去匹配文本, 而表达式又有若干 分支 和 范围, 一个分支或者范围匹配失败并不意味着最终匹配失败, 正则引擎会进行回退去尝试 下一个 分支或者范围, 这种行为就被称之为 回溯

类比于迷宫, 想象一下, 面前有两条路, 我们选择了一条, 走到尽头发现是条死路, 只好原路返回尝试另一条路, 则这个原路返回的过程就被称之为 回溯, 它在正则中的含义是 吐出已经匹配过的文本, 同时 正则匹配位置也会进行回退

一般的, NFA,如果匹配失败, 会尝试进行 回溯, 因为它并不知道后面还有没有可能匹配成功, 他是蒙在鼓里的, 但是 DFA 从一开始就知道所有的可能匹配, 因为在预编译时就它就已经存储了所以可能情况, 所以正则编写的好坏对 NFA 来说是特别的重要的

引擎会真正按照正则表达式进行匹配, 让你选择达到完全匹配所需的每个步骤, 所以我们必须很谨慎地告诉它, 首先检查哪种选择才能达到您的期望, 你也有机会调整正则表达式, 以最大程度地减少回溯并尽早进行匹配

三、量词

3.1 在 JS 中量词表示要匹配的字符或表达式的数量, 常见的量词有:

3.2 贪婪 与 非贪婪

3.3 贪婪模式下的回溯

现在我们看一个简单例子, 有如下正则 .*c 以及待匹配字符串 bbbcaaaaaaaaa, 下面我们使用 regex101 来进行测试

这里选择 Debugger 查看整个正则匹配流程(重点看 回溯)

从图中可以看出, .* 会优先匹配到所有内容, 然后在匹配字符串 c 时, 只要匹配失败, 字符串匹配位置就会进行回退(吐出一个字符), 然后再次进行匹配, 如此反复直到匹配到字符串 c

3.4 解决办法

针对上文回溯问题, 下面我们来简单优化下正则, 来避免 回溯

1. 使用非贪婪模式: .*?c

2. 使用反向字符集: [^c]*c

3.5 绝对不用「量词嵌套」

特别特别需要注意的是, 嵌套的量词 将会制造指数级的回溯, 下面我们就以 .*c 以及 (.+)*c 为例, 从 regex101 测试结果来看, 相同匹配字符串 .*c 需要 13 个步骤, (.+)*c 则直接飚到 61144 了, 但最终这两个表达式匹配到的结果却是一样的

四、多选分支

已知在 JS 中正则可使用 | 定义多个分支, 例如: x|y 可匹配 x 或者 y,

那么正则在匹配过程中如果遇到多选分支时, 引擎则会按照 从左到右 的顺序检查表达式中的多选分支, 如果某个分支匹配失败, 表达式和字符串都会进行回退(回溯), 然后选择另一个分支进行尝试... 这个过程会不断重复, 直到完成全局匹配，或所有的分支都尝试穷尽为止

4.1 回溯现象

假设有正则表达式 num(1234567890|1234567891) 待匹配字符串如下 num1234567891, 下面我们使用 regex101 来进行测试

这里选择 Debugger 查看整个正则匹配流程(重点看 回溯)

4.2 优化手段

1. 提取多选分支中的必须元素: num123456789(0|1)

2. 高优先级分支提前: num123456789(1|0)

由于正则引擎遇到分支是按照 从左到右 的顺序, 来选择分支进行匹配的, 所以我们可以通过调整分支的顺序来提高匹配效率

3. 使用字符组: num123456789[01]

这里我们还可以使用字符组 [], 和 | 不同的是它不存在分支选择问题, 本质上分支越多, 可能的回溯次数越多, 所以如果可以我们需要尽可能减少分支

五、其他正则优化手段

• 使用非捕获型括号 (): 如果不需要引用括号内的文本, 请使用非捕获括号, 不但能节省捕获的时间, 而且会减少回溯使用的状态的数量, 从两方面提高速度


• 不要滥用字符组 []: 不使用只包含一个字符的字符组, 需要付出处理字符组的代价


• 分析待匹配字符串, 将最可能匹配的分支放在前面


• 正则进行适当拆分: /最明确的规则/.test() && /更细的规则/.test(str)


• 必要时可以考虑更换正则引擎, 比如使用 DFA


• 使用检测工具进行测试, 比如: regex101


• 使用有明显确定的特征的具体字符、字符组代替通配符, 说白了尽可能描述清楚你的正则

六、回到正文

回到我们最开始的那个正则, 可以优化如下

'No, this text is not a transaction event. Therefore, the requested entities cannot be extracted.'.replace(/^[\s\S]*?JSON output:/, '')

在 regex101 的测试结果如下, 从测试结果来看前后性能提升可不是一点两点

七、参考:

• 正则表达式是如何让你的网页卡住的


• 一个正则导致浏览器页面卡死


• 正则表达式优化 - 避免灾难性回溯


• 正则引擎的几种分类


• 正则表达式引擎执行原理——从未如此清晰!


• 深入正则表达式(3):正则表达式工作引擎流程分析与原理释义...

背景

使用低代码接入了一个移动端老系统，新增页面（以及部分旧页面）使用低代码体系搭建。功能开发完成后才发现性能问题比较严重，所以进行了一次移动端的性能优化。本文就优化过程进行一个记录。

问题分析

为什么一接入低代码体系性能（主要是加载性能）就出现明显的下降，如果首屏访问的是低代码页面则更加明显

• 最主要的原因是比之前额外加载了大量的 js 和 css，初步统计有 10 个 css 和 15 个 js


• 老系统自身 js 资源过大，依赖包 vendor.js 有 8M 多


• 低代码体系下，非静态资源的接口请求也成为影响页面渲染的因素。页面必须等待接口获取到 schema 后才由低代码渲染器进行渲染

低代码体系接入

有必要简单说明下低代码体系是如何接入的，这对后面的优化是有直接影响的

• 低代码体系资源大概分为三方依赖、渲染引擎和组件库资源，都是独立的 npm 库，发布单独的 CDN


• 三方依赖就是像 react、moment、lodash 等最基础的依赖资源


• 渲染引擎要想渲染页面，又直接依赖于两个资源
  
  
  
  • 页面 schema：服务端接口返回，schema 本质上是一个 json，描述了一个组件树
  
  
  • 组件集合：由 CDN 引入的各个组件库集合，它需要先于页面 schema 加载
  
  
  
  

静态资源为何影响加载性能

静态资源加载如何影响性能，简单分析下，详细的原理可以参考 MDN

• HTML 自上而下解析，遇到 script 标签（不带 defer 和 async 属性）就会暂停解析，等待 script 加载和执行完毕后才会继续


• HTML 解析时如果遇到 css 资源，解析会继续进行。但是在 css 资源加载完成前，页面是不会渲染的，并且如果此时有 JavaScript 正在执行，也会被阻塞


• 所以 js 或 css 体积越大，则在网络传输、下载、浏览器解析和执行上所花的时间就会相应的增加，而这些时间都是会阻塞页面渲染的


• js 或者 css 的个数对于渲染的影响，很大程度上取决于项目和浏览器是否支持 http2
  
  
  
  • 如果使用了 http2，则静态资源个数对于加载性能影响不大，除非多到几百个资源
  
  
  • 如果还是 http1.1，静态资源个数对于加载有明显影响，因为此时浏览器存在并发限制，大概在 4-6 个左右，即一批次只能发送几个请求，等到请求完成后，再发下一批，是个同步的过程
  
  
  • 本项目已经支持 http2，所以优化加载性能的重点还是在减小总的资源体积上
  
  
  
  

优化指标

用户对于页面性能的感受是主观的，而优化工作则需要客观的数据。
更重要的是，有些优化措施是否有效果，有多少效果是需要数据说明的。举例来说，去除冗余资源几乎是可以预见性能提升。但是做 CDN 合并在移动端能够有多少优化效果，事前其实并不清楚
这里采用 2 种方式作为优化指标

• 旧版本 chrome(69)的 perfomance
  
  
  
  • 使用这个版本是因为后台数据显示该引擎访问量较多
  
  
  • chrome 的 performance 不仅能获取性能数据，也有助于我们分析，找出具体问题
  
  
  
  


• 使用 web-vitals 库获得具体的性能数据，主要关注
  
  
  
  • FCP，白屏时间
  
  
  • LCP，页面可视区域渲染完成时间
  
  
  
  

现状

• 点击 performance 的刷新按钮，就会自动进行一次页面的加载
  
  
  
  • 建议使用无痕模式，排除其他干扰
  
  
  • network 中勾选 Disable cache，虽然最终用户会用到缓存，但在优化非缓存项时，建议先禁用缓存，获取最真实的数据
  
  
  
  


• 静态资源的加载大概花了 3.5s


• 而后续静态资源的解析则一直持续到页面加载完成，大概在 9 秒多


• 使用 web-vitals 测量的平均数据
  
  
  
  • FCP: 5.5s
  
  
  • LCP: 9s
  
  
  
  

目标

• performance 页面渲染完成：4s 以内


• web-vitals 平均数据
  
  
  
  • FCP：3s 以内
  
  
  • LCP：4s 以内
  
  
  
  

如果从绝对性能看，这个目标只能是个中下水平。主要基于以下几点考虑

• 策略上不会对原系统或者低代码体系进行大刀阔斧的改动


• 老系统大概就是这么个性能情况，维持这个水平起码不会降低用户体验。作为内部系统，对性能没有极致的要求


• 考虑到时间成本，性能优化是一项持续性的工作，而实际项目是有时间限制和上线压力的

优化措施

根据以上分析，最重要的就是要减小总的关键资源体积。
低代码体系所需要的直接资源都属于关键资源。因为用户是可能首次直接进入一个低代码页面的（也是本次主要的优化场景）

优化前包分析

CDN 三方库资源直接就能看出哪些是冗余的，或者是公共资源加载了多遍等问题，但是自己的仓库打包后就需要借助 webpack-bundle-analyzer 插件分析了
该项目中有多个 npm 仓库需要分析，这里就举老系统自己的例子，优化前的 bundle 分析图

三方依赖 vendor.min.js 8MB 左右，项目 JS 800 多 KB，下面分析下最严重的几点

• 标 ① 部分， @ali_4ever 开头的是富文本依赖，有接近 2M 左右的大小，优化为懒加载


• 标 ② 部分，echarts5 全量引入了，1M 左右大小，计划优化为按需加载


• 标 ③ 部分，ali-oss，500 多 KB，ali-oss 不支持按需引入。这里因为多个低代码组件库中也用到了该依赖，所以计划提取为 CDN 作为公共依赖，但是大小还是 500 多 KB，只是去掉了重复加载部分


• 标 ④ 部分，antd-mobile 加载了两个版本的全量仓库，按照官方推荐，考虑将 antd-mobile-v2 按需加载

一、移除冗余资源

• 排查 CDN，是否引用了多余的 CDN，比如项目中移动端引用了 PC 端的组件库，引用了已经废弃（迁移）的工具库等等


• 排查项目 bundle，正常情况下是不可能有冗余资源的，因为如果一点没用到这个库，webpack 也不会将其打包进去
  
  
  
  • 可能存在使用到了一小部分，却打包了整个库的情况，这个属于下一部分按需引入
  
  
  
  


• 排查下线上 CDN 是否都使用生产版本或者压缩版本，这点事先没有想到，是在优化过程中意外发现存在非压缩版本

二、按需引入

按需引入即只引入三方库中项目用到的部分。现代的大部分三方库都已经支持 TreeShaking，正常打包即是按需引入。特殊情况在于 CDN、懒加载和一些老的库，这些刚好在项目中都有所实践

按需引入 和 CDN

项目中只用到了 ahooks 中的个别方法，却将整个包作为 CDN 引入，显然是不合理的

• 需要按需引入的库，是不能使用 CDN 引入的，它们之间是互斥的
  
  
  
  • 因为 CDN 需要配置 external 才能在项目里使用，external 一般是将一个三方库作为整体配置的
  
  
  
  


• CDN 自身作为一种优化手段，那是和将静态资源放置在业务服务器对比的。
  
  
  
  • 在该场景下，引入 ahooks CDN 导致 TreeShaking 失效，引入了全量包，同时增加了一次 http 请求，总的来看肯定是得不偿失的
  
  
  • 并且最终项目的 bundle 也会发布 CDN
  
  
  
  


• 因此去掉了 ahooks 的 CDN，改为直接打进项目 bundle 就行了

按需引入 和 懒加载

在该项目中，echarts 也按需引入了，echarts 的按需引入总体效果就没有 ahooks 那么好了

• echarts 无论绘制哪种类型图表，都需要引入核心库，就有 100 多 KB 的大小了


• 所以 echarts 也可以选择懒加载，懒加载会让没有使用 echarts 的页面加载速度变快，但是最终浏览器解析的资源是全量的，可以根据实际情况选择


• 懒加载 和 按需引入也无法并存。因为懒加载需要动态导入，动态导入 webpack 就没法做静态分析，这是 TreeShaking 的基础，所以就没法按需引入了

利用 babel-import-plugin

有一些老版本的库，可能还不支持按需引入，比方说 antd-mobile-v2，对于这种仓库，可以利用 babel-import-plugin 做按需引入
只需要做一下 babel 配置就行

{

  "plugins": [

    [

      "import",

      {

        "libraryName": "antd-mobile-v2",

        "style": "css"

      },

      "antd-mobile-v2"

    ]

  ]

}

• 本项目最终没有那么做，因为体积几乎没有减小。对于一个完整的项目，需要使用到的组件是非常多的


• 对于 antd-mobile 多个版本的问题，最终的优化方案还是合并为最新版，只是开发和测试的工作量大了点


• 注意点：babel-import-plugin 插件并不能让所有仓库都支持按需。本质上还是三方库做了分包才行

三、懒加载

懒加载的资源不同，也可以分为多种类型

• 三方库资源懒加载：比如之前说的，某个组件依赖于 echarts，那么就可以懒加载 echarts，只有页面中使用了该组件时才去请求和加载 echarts 依赖


• 组件懒加载：将整个组件都懒加载，在本项目中没有做组件懒加载
  
  
  
  • 低代码体系下，组件本身不能懒加载，否则 schema 解析到这个组件时找不到会报错
  
  
  • 解决方案也可以给组件套一层，实际内容懒加载，导出的组件不懒加载
  
  
  • 更重要的原因是组件库本身不大，不是影响性能的关键因素
  
  
  • 另外低代码页面本身就是由各个组件拼凑而成，如果将组件都懒加载了，那么页面各个部分都会有 Loading 的中间态，效果不好把控
  
  
  
  


• 路由懒加载：本质上它就是组件懒加载的一种，一个组件就是一个路由页面，项目中对于系统不太访问的页面做了路由懒加载

三方库资源懒加载

懒加载依赖也需要分析具体情况，比方说移动端使用了 antd-mobile 作为组件库，这个依赖就完全没必要等使用的时候再加载。因为几乎进入任意一个页面，都需要用到这个资源。什么情况下合适

• 依赖资源比较大


• 使用的频率较低，只在个别地方使用了

并且这个三方资源也是分两种情况引入，第一种是以 CDN 的形式外部引入，第二种是直接打包入库，这两种引入方式的懒加载处理是不同的，下面分别举例

CDN 引入的三方资源懒加载

比如低代码组件库中存在一个富文本组件，比较特殊，比较适合使用 CDN 的方式懒加载依赖资源

• 富文本组件依赖于公司内部的一个富文本编辑器。鉴于富文本的复杂性，所以它的依赖很大，JS+css 将近有 3M 左右。


• 但是其实只有极少的页面使用到了富文本，对于大多数用户来说，是不需要这个富文本的

下面介绍下具体实现，利用 ahooks 的 useExternal，动态注入 js 或 css 资源（也可以原生实现），封装一个高阶组件，方便调用

type LoadStatus = 'loading' | 'ready' | 'error';

interface LoadOptions {

  url: string;

  libraryName: string;

  cssUrl?: string;

  LoadingRender?: () => React.ReactNode;

  errorRender?: () => React.ReactNode;

}

export const LazyLoad = (Component, { url, libraryName, cssUrl, LoadingRender, errorRender }: LoadOptions) => {

  const LazyCom = (props) => {

    const initStatus = typeof window[libraryName] === 'undefined' ? 'loading' : 'ready';

    const [loadStatus, setStatus] = useState<LoadStatus>(initStatus);

    const jsStatus = useExternal(url, {

      keepWhenUnused: true,

    });

    const cssStatus = useExternal(cssUrl, {

      keepWhenUnused: true,

    });



    useEffect(() => {

      if (loadStatus === 'ready' || loadStatus === 'error') {

        return;

      }

      if (jsStatus === 'error' || cssStatus === 'error') {

        setStatus('error');

      }

      if (jsStatus === 'ready' && (cssStatus === 'ready' || cssStatus === 'unset')) {

        setStatus('ready');

      }

    }, [jsStatus, cssStatus, loadStatus]);



    const content = useMemo(() => {

      switch (loadStatus) {

        case 'loading':

          return typeof LoadingRender === 'function' ? LoadingRender() : <div>加载中...</div>;

        case 'ready':

          return <Component {...props} />;

        case 'error':

          return typeof errorRender === 'function' ? errorRender() : <div>加载失败</div>;

        default:

          return null;

      }

    }, [loadStatus]);



    return content;

  };

  return LazyCom;

};



// 使用示例，BaseEditor即需要懒加载的原组件，BaseEditor组件内部直接通过window取相应依赖

export const FormEditor = LazyLoad(BaseEditor, {

  url: 'xxxx',

  cssUrl: 'xxxxx',

  libraryName: 'xxxxxx',

});

打包入 bundle 依赖懒加载

总体思路是一样的，只是这类资源利用 webpack 的 import 动态导入能力，import 动态导入的资源打包时会单独分包，只在使用到时才会加载
具体实现：

export const InnerLazyLoad = (Component, loadResource, LoadingRender?) => {

  const LazyCom = (props) => {

    const [loaded, setLoaded] = useState(false);

    const [LazyResource, setResource] = useState({});



    useEffect(() => {

      if (loaded) {

        return;

      }

      loadResource().then((resource) => {

        setResource(resource);

        setLoaded(true);

      });

    }, [loaded]);

    const LoadingNode = typeof LoadingRender === 'function' ? LoadingRender() : <div>...加载中</div>;

    return loaded ? <Component {...props} LazyResource={LazyResource} /> : LoadingNode;

  };

  return LazyCom;

};



// 具体使用

const loadResource = async () => {

  // 动态导入的资源会单独分包，在使用到时才会加载

  const echarts = await import('echarts/core');

  const { PieChart } = await import('echarts/charts');

  const { TitleComponent } = await import('echarts/components');

  const { CanvasRenderer } = await import('echarts/renderers');

  return {

    echarts,

    PieChart,

    TitleComponent,

    CanvasRenderer,

  };

};



const AgentWork = InnerLazyLoad(BaseAgentWork, loadResource);

路由懒加载

路由懒加载原理和内部资源懒加载类似，分包然后首次进入该页面时才请求页面资源
本项目没有把所有页面都懒加载

• 页面懒加载后，进入页面前会有一个短暂的加载过程，需要评估影响


• 还是和通用懒加载一样，使用频率较低、页面 js 又比较大的比较适合懒加载

比如在该项目中

• 应用上存在部分页面是给第三方使用的，不能通过导航点击到达，直接分享地址给第三方


• 这些页面使用频率低，而且基本不影响本应用，因为无法通过导航点击切换到达，是通过 url 的形式直接访问，所以加载中的中间态和页面加载一起

路由懒加载的实现，不同框架都有些差异。本项目中只需在路由配置中增加配置项即可开启，就不再阐述具体代码实现

四、合并公共资源

合并公共资源，即不要重复加载相同资源
一般来说打包工具都会做依赖分析，只会打包一份相同路径的引用依赖。但是如果相同依赖分散在多个仓库中就有可能出现重复资源了
比如该项目中，老系统自身和多个组件库都使用了 ali-oss 库实现上传功能，并且还有一些条件使得将其提取为公共 CDN 是利益最大化的

• ali-oss 打包后 500 多 KB 的大小，已经算是一个不小的包了


• ali-oss 不支持按需引入，所以引用到它的多个仓库，无论引用了什么功能，都将全量打包入 ali-oss


• 如果 ali-oss 支持按需引入，就需要计算是提取为公共 CDN 划算，还是将其按需打入各个仓库中划算

实现步骤比较简单

• 在引用 ali-oss 的仓库配置 external，使仓库本身打包时不打入 ali-oss 依赖


• 在项目 HTML 中提前引入 ali-oss CDN

五、缓存

静态资源缓存

• 该项目静态资源使用 CDN+版本号，本身已经支持了缓存。CDN 的缓存时间是通过 Cache-Control 的 s-maxage 字段控制，这是 CDN 特有的字段


• 如果静态资源是放置在自己的服务器上，需要考虑 http 缓存和缓存更新的事项，这个也是老生常谈的话题，这里不再赘述

如果想要详细了解 http 缓存，推荐看下这篇文章

options 请求缓存

在实际优化过程中发现，该项目的大部分 ajax 请求，都是跨域请求，所以伴随着大量的 options 请求
推动服务端做了这些预检请求的缓存，其原理就是通过 access-control-max-age 响应头设置预检请求的缓存时间

Service Worker

Service Worker 是一项很强大的技术，它能够对网络请求进行缓存和处理，它的最大应用场景是在弱网甚至离线环境下
一旦使用了 Service Worker 技术，用户在首次安装完成后，后续的访问相当于直接在本地读取静态资源，访问速度自然能够得到提升
虽然能够提升使用体验，但是使用 Service Worker 是存在一定限制和风险的

• 必须运行在 https 协议下，调试时允许在 localhost、127.0.0.1


• Service Worker 自身不能跨越，即主线程上注册的 Service Worker 必须在当前域名下


• 一旦被安装成功就永远存在，除非线程被程序主动解除


• Service Worker 的更新是比较复杂的，如果对其了解不深，建议还是只将不常更新的资源使用 Service Worker 缓存，降低风险

项目中直接使用 workbox（对 Service Worker 做了封装，并提供一些插件），以下为示例代码

主线程上注册 Service Worker

if ('serviceWorker' in navigator) {

  navigator.serviceWorker

    .register('./sw.js')

    .then((reg) => {

      navigator.serviceWorker.addEventListener('message', (event) => {

        // 处理Worker传递的消息逻辑

      });

      console.log('注册成功：', reg);

    })

    .catch((err) => {

      console.log('注册成功：', err);

    });

}

Service Worker 线程处理缓存逻辑

//首先是异常处理

self.addEventListener('error', function (e) {

  self.clients.matchAll().then(function (clients) {

    if (clients && clients.length) {

      clients[0].postMessage({

        type: 'ERROR',

        msg: e.message || null,

        stack: e.error ? e.error.stack : null,

      });

    }

  });

});



self.addEventListener('unhandledrejection', function (e) {

  self.clients.matchAll().then(function (clients) {

    if (clients && clients.length) {

      clients[0].postMessage({

        type: 'REJECTION',

        msg: e.reason ? e.reason.message : null,

        stack: e.reason ? e.reason.stack : null,

      });

    }

  });

});



//然后引入workbox

importScripts('https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js');



// 预缓存资源示例，不更新的资源使用预缓存

const resources = ['https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js'];



// 预缓存功能

workbox.precaching.precacheAndRoute(resources);



// 图片缓存 使用CacheFirst策略

workbox.routing.registerRoute(

  /\.(jpe?g|png)/,

  new workbox.strategies.CacheFirst({

    cacheName: 'image-runtime-cache',

    plugins: [

      new workbox.expiration.Plugin({

        // 对图片资源缓存 1 天

        maxAgeSeconds: 24 * 60 * 60,

        // 匹配该策略的图片最多缓存 20 张

        maxEntries: 20,

      }),

    ],

  })

);



// 需要更新的js和css资源使用staleWhileRevalidate策略

workbox.routing.registerRoute(

  new RegExp('https://g.alicdn.com/'),

  workbox.strategies.staleWhileRevalidate({

    cacheName: 'static-runtime-cache',

    plugins: [

      new workbox.expiration.Plugin({

        maxEntries: 20,

      }),

    ],

  })

);

• 预缓存功能：
  
  
  
  • 正常情况下，Service Worker 是在主程序首次请求时将资源拦截，在之后的请求中根据缓存策略处理
  
  
  • 预缓存功能是在 Service Worker 在安装阶段主动发起资源请求，并将其缓存下来
  
  
  • 当页面真正发起预缓存当中的资源请求时，资源已经被缓存了，就可以直接使用了
  
  
  • 预缓存是使用 Cache Only 策略，即在预缓存主动发起请求并获取缓存后，就只会在缓存中读取资源，不在进行缓存更新，所以适合项目中不更新的静态资源
  
  
  
  


• 图片缓存：
  
  
  
  • 图片一般情况下是不更新的，所以采用 Cache First 缓存优先策略
  
  
  • 当有缓存时会优先读取缓存，读取成功直接使用本地缓存，不再发起请求
  
  
  • 读取失败时再发起网络请求，并将结果更新到缓存中
  
  
  
  


• 对于需要更新的 JS 和 CSS
  
  
  
  • 使用 Stale While Revalidate 策略
  
  
  • 跟 Cache First 策略比较类似，都是优先返回本地缓存的资源
  
  
  • 区别在于 Stale While Revalidate 策略无论在缓存读取是否成功的时候都会发送网络请求更新本地缓存
  
  
  • 这是兼顾页面加载速度和缓存更新的策略，相对安全一些