简单模拟一个热更新

什么是热更新

热更新是指在应用程序运行时，对程序的部分内容进行更新，而无需重启整个应用程序。通常，热更新是在不停止整个应用程序的情况下，将新的代码、资源或配置应用于正在运行的应用程序，以实现功能修复、性能优化或新增功能等目的。

热更新的优点

实时反馈，提高开发效率：热更新允许开发人员在进行代码更改后立即看到结果，无需重新编译和重启应用程序。这大大减少了开发、测试和调试代码所需的时间，提高了开发效率。

保持应用程序状态：通过热更新，应用程序的状态可以在代码更改时得以保留。这意味着开发人员不需要在每次更改后重新导航到特定页面或重现特定的应用程序状态，从而节省了时间和精力。

webpack 中的热更新

在Webpack中，热更新（Hot Module Replacement，HMR）是一种通过在应用程序运行时替换代码的技术，而无需重新加载整个页面或应用程序。它提供了一种高效的开发方式，可以在开发过程中快速看到代码更改的效果，而不中断应用程序的状态。

原理如下：

客户端连接到开发服务器：当启动Webpack开发服务器时，它会在浏览器中创建一个WebSocket连接。

打包和构建模块：在开发模式下，Webpack会监视源代码文件的变化，并在代码更改时重新打包和构建模块。这些模块构成了应用程序的各个部分。

将更新的模块发送到浏览器：一旦Webpack重新构建了模块，它会将更新的模块代码通过WebSocket发送到浏览器端。

浏览器接收并处理更新的模块：浏览器接收到来自Webpack的更新模块代码后，会根据模块的标识进行处理。它使用模块热替换运行时（Hot Module Replacement Runtime）来执行以下操作：（个人理解就像是 AJAX 局部刷新的过程，不对请指出）

（1）找到被替换的模块并卸载它。

（2）下载新的模块代码，并对其进行注入和执行。

（3）重新渲染或更新应用程序的相关部分。

保持应用程序状态：热更新通过在模块替换时保持应用程序状态来确保用户不会失去当前的状态。这意味着在代码更改后，开发人员可以继续与应用程序进行交互，而无需手动重新导航到特定页面或重现特定状态。

代码模拟

在同一个目录下创建 server.js 和 watcher.js

server.js

const http = require("http");

const server = http.createServer((req, res) => {

  res.statusCode = 200;

  // 设置字符编码为 UTF-8，若有中文也不乱码

  res.setHeader("Content-Type", "text/plain; charset=utf-8"); 

  res.end("offer get!!!");

});



server.listen(7777, () => {

  console.log("服务已启动在 7777 端口");

  process.send("started");

});



// 监听来自 watcher.js 的消息

process.on("message", (message) => {

  if (message === "refresh") {

    // 重新加载资源或执行其他刷新操作

    console.log("重新加载资源");

  }

});

（1）使用 http.createServer 方法创建一个 HTTP 服务器实例，该服务器将监听来自客户端的请求。

（2）启动服务，当服务器成功启动并开始监听指定端口时，回调函数将被调用。

（3）通过调用 process.send 方法，我们向父进程发送一条消息，消息内容为字符串 "started"，表示服务器已经启动。

（4）使用 process.on 方法监听来自父进程的消息。当收到名为 "refresh" 的消息时，回调函数将被触发。

（5）在回调函数中，我们可以执行资源重新加载或其他刷新操作。一般是做页面的刷新操作。

server.js 创建了一个简单的 HTTP 服务器。当有请求到达时，服务器会返回 "offer get!!!" 的文本响应。它还与父进程进行通信，当收到名为 "refresh" 的消息时，会执行资源重新加载操作。

watcher.js

const fs = require("fs");

const { fork } = require("child_process");



let childProcess = null;



const watchFile = (filePath, callback) => {

  fs.watch(filePath, (event) => {

    if (event === "change") {

      console.log("文件已经被修改，重新加载");



      // 如果之前的子进程存在，终止该子进程

      childProcess && childProcess.kill();



      // 创建新的子进程

      childProcess = fork(filePath);

      childProcess.on("message", callback);

    }

  });

};



const startServer = (filePath) => {

  // 创建一个子进程，启动服务器

  childProcess = fork(filePath);

  childProcess.on("message", () => {

    console.log("服务已启动！");

    // 监听文件变化

    watchFile(filePath, () => {

      console.log("文件已被修改");

    });

  });

};



// 注意文件的相对位置

startServer("./server.js");

watcher.js 是一个用于监视文件变化并自动重新启动服务器的脚本。

（1）首先，引入 fs 模块和 child_process 的 fork 方法，fork 方法是 Node.js 中 child_process 模块提供的一个函数，用于创建一个新的子进程，通过调用 fork 方法，可以在主进程中创建一个全新的子进程，该子进程可以独立地执行某个脚本文件。

（2）watchFile 函数用于监视指定文件的变化。当文件发生变化时，会触发回调函数。

（3）startServer 函数负责启动服务器。它会创建一个子进程，并以指定的文件作为脚本运行。子进程将监听来自 server.js 的消息。

（4）在 startServer 函数中，首先创建了一个子进程来启动服务器并发送一个消息表示服务器已启动。

（5）然后，通过调用 watchFile 函数，开始监听指定的文件变化。当文件发生变化时，会触发回调函数。

（6）回调函数中，会终止之前的子进程（如果存在），然后创建一个新的子进程，重新运行 server.js。

watcher.js 负责监视特定文件的变化，并在文件发生变化时自动重新启动服务器。它使用 child_process 模块创建子进程来运行 server.js，并在需要重新启动服务器时终止旧的子进程并创建新的子进程。这样就可以实现服务器的热更新，当代码发生变化时，无需手动重启服务器，watcher.js 将自动处理这个过程。

效果图

打开本地的 7777 端口，看到了 'offet get!!!' 的初始字样

当修改了响应文字时，刷新页面，无需重启服务，也能看到更新的字样！

本人是95前端菜鸟一枚，目前在广州打工混口饭吃。刚好换了工作，感觉生活节奏变得慢了下来，打了这么多年工总觉得想纪录些什么，怕以后自己老了忘记自己还有这么一些风流往事。书接上回。

楔子

又是一个闲暇的周末，正读一年级的我坐在床上，把象棋的旗子全部倒了出来，根据颜色分为红色和绿色阵营，旗子翻盖为建筑，正面为单位，被子和枕头作为地图障碍，双手不断的移动着双方阵营的象棋，脑海中演练着星级争霸的游戏画面，将两枚不同阵营的旗子进行碰撞后，通过我对两枚旗子主观的判断，一方阵营的旗子直接被销毁，进入回收，一方的单位对建筑物全部破坏取得游戏胜利。因为我的父亲酷爱玩这款游戏，年少的我也被其玩法、画面所深深吸引，不过最主要的还是父亲获胜或者玩累后，能幸运的奖励我玩上几把。星际争霸成了我第一个启蒙游戏，那时候怎么样都获胜不了，直到发现了show me the money。因为Blizzard这个英文单词一直在游戏的启动界面一闪一闪，那时候还以为这款游戏的名字叫Blizzard，最后才发现，其实Blizzard是魔鬼的意思。

纸笔乐趣

小学一二年级的时候家里管得严，电视也不给我看，电脑直接上锁，作为家里的独生子女，没有同龄人的陪伴，闲暇时间要不就看《格林童话》、《安徒生童话》、《伊索寓言》，要不就打开这副象棋在那里自娱自乐。

起源

在某一天的音乐课上，老师喉咙不舒服，在教室播放猫和老鼠给我们观看，正当我看的津津有味，前面的同学小张突然转过头来，问我“要不要跟我玩个游戏”。小孩子一般都比较贪玩，我直接拒绝了他，“我想看猫和老鼠”。小张满脸失落转了回去，因为我是个特别怕伤害别人情绪的人，所以不忍心又用铅笔的橡皮端戳了戳他，问他“什么游戏，好玩不”。他顿时也来了精神，滔滔不绝的介绍起了这款游戏。

“游戏的规则非常的简单~~在一张纸上中间画一条分割线，双方有各自的基地，每人基地都有5点血量，双方通过猜拳，获胜的一方可以在自己阵营画一个火柴人，火柴人可以攻击对面的火柴人和基地，基地被破坏则胜利。管你听没听懂，试一把就完了！”

我呆呆的看着他，“这么无聊，赢了又怎样？”。他沉默了一会，好像我说的的确有点道理，突然想到了一个好办法，“谁获得胜利扇对方一巴掌”。我顿时来了兴趣。随着游戏逐渐深入，我们的猜拳速度和行动力也越来越快，最后发现扇巴掌还是太狠，改为扇对方的手背，这节课以双方手背通红结束了。

游戏改良

这个《火柴人对战》小游戏在班里火了一会儿，但很快就又不火了，我玩着玩着也发现没啥意思，总是觉得缺少点什么，但毕竟我也只是个没有吃APTX4869的小学生，想不出什么好点子。时间一晃，受到九年义务教育的政策，我也成功成为了一名初中生。在一节音乐课上，老师想让我们放松放松，给我们班看猫和老鼠，隔壁同桌小王撕了一张笔记本的纸，问我有没有玩过《火柴人对战》游戏，只能说，熟悉的配方，熟悉的味道。

当天晚上回到家，闲来无事，我在想这个《火柴人游戏》是不是可以更有优化，这种形式的游戏是不是可以让玩家更有乐趣。有同学可能会问，你那个年代没东西玩的吗？既然你诚心诚意发问，那我就大发慈悲的告诉你。玩的东西的确很多，但是能光明正大摆在课桌上玩的基本没有，一般有一个比较新鲜的好玩的东西，都会有一群人围了过来，这时候老师会默默站在窗户旁的阴暗角落，见一个收一个。

坐在家里的椅子上，我整理了一下思绪，突然产生了灵感，将《魔兽争霸》和《游戏王》这两个游戏产生化学反应，游戏拥有着资源，单位，建筑，单位还有攻击力，生命值，效果，攻击次数。每个玩家每回合通过摇骰子的方式获得随机能源点，能源能够解锁建筑，建筑关联着高级建筑和单位，通过单位进行攻击，直至对方玩家生命值为0，那么如何在白纸上面显示呢？我想到比较好的解决方案，单位的画像虽然名字叫骷髅，但是在纸上面用代号A表示，建筑骷髅之地用代号1表示。我花了几天时间，弄了两个阵营，不死族和冰结界。立刻就拿去跟同桌试玩了一下，虽然游戏很丰富，但是有一个严重的弊端就是玩起来还挺耗费时间的，而且要人工计算单位之间的扣血量，玩家的剩余生命，在纸片上去完成这些操作，拿个橡皮擦来擦去，突然觉得有点蠢，有点尴尬，突然明白，一张白纸的承受能力是有限的。之后，我再也没有把游戏拿出来玩过，但我没有将他遗忘，而是深深埋藏在我的心里。

筑梦

直到大学期间《炉石传说》横空出世，直到《游戏王》上架网易，直到我的项目组完成1.0后迎来空窗期一个月，我再也蚌埠住了，之前一直都对微信小游戏很有兴趣，每天闲着也是闲着，所以我有了做一个微信小游戏的想法。而且，就做一款在十几年前，就已经被我设计好的游戏。

但是我不从来不是一个好学的人，领悟能力也很低，之前一直在看cocos和白鹭引擎学习文档，也很难学习下去，当然也因为工作期间没有这么多精力去学习，所以我什么框架也不会，不会框架，那就用原生。我初步的想法是，抛弃所有花里胡哨的动效，把基础的东西做出来，再作延伸。第一次做游戏，我也十分迷茫，最好的做法肯定是打飞机————研究这个微信项目如何用js原生，做出一个小游戏。

虽然微信小游戏刚出来的时候看过代码，但是也只是一扫而过，而这次带着目标进行细细品味，果然感觉不一样。微信小游戏打飞机这个项目是js原生使用纯gL的模式编写的，主要就是在canvas这个画布上面作展示和用户行为。

  // 触摸事件处理逻辑

  touchEventHandler(e) {

    e.preventDefault()



    const x = e.touches[0].clientX

    const y = e.touches[0].clientY



    const area = this.gameinfo.btnArea



    if (x >= area.startX

        && x <= area.endX

        && y >= area.startY

        && y <= area.endY) this.restart()

    }

点击事件我的理解就是用户点击到屏幕的坐标为(x, y)，如果想要一个按钮上面做处理逻辑，那么点击的范围就要落在这个按钮的范围内。当我知道如何在canvas上面做点击行为时，我感觉我已经成功了一半，接下来就是编写基础js代码。

首先这个游戏确定的元素分别为，场景，用户，单位，建筑，资源(后面改用能源替代)，我先将每个元素封装好一个类，一边慢慢的回忆着之前游戏是如何设计的，一边编程，身心完全沉浸进去，已经很久很久没有试过如此专注的去编写代码。用了大概三天的时间，我把基本类该有的逻辑写完了，大概长这个样子

上面为敌方的单位区域，下方为我方的单位区域，单位用ABCDEFG表示，右侧1/1/1 则是 攻击力/生命值/攻击次数，通过点击最下方的icon弹出创建建筑，然后创建单位，每次的用户操作，都是一个点击。

一开始我设想的游戏名为想象博弈，因为每个单位每个建筑都只有名称，单位长什么样子的就需要玩家自己去脑补了，我只给你一个英文字母，你可以想象成奥特曼，也可以想象成哥斯拉，只要不是妈妈生的就行。

湿了

游戏虽然基本逻辑都写好了，放到整个微信小游戏界别人一定会认为是依托答辩，但我还是觉得这是我的掌上明珠，虽然游戏没有自己的界面，但是它有自己的玩法。好像上天也认可我的努力，但是觉得这个游戏还能更上一层楼，在某个摸鱼的moment，我打开了微信准备和各位朋友畅谈人生理想，发现有位同学发了一幅图，上面有四个格子，是赛博朋克风格的一位篮球运动员。他说这个AI软件生成的图片很逼真，只要把你想要的图片告诉给这个AI软件，就能发你一幅你所描绘的图片。我打开了图片看了看，说实话，质感相当不错，在一系列追问下，我得知这个绘图AI软件名称叫做midjourney。

midjourney

我迫不及待的登录上去，询问朋友如何使用后，我用我蹩脚的英格力士迫不及待的试了试，让midjourney帮我画一个能源的icon，不试不要紧，一试便湿了，眼睛留下了感动地泪水，就像一个阴暗的房间打开了一扇窗，一束光猛地照射了进来。

对比我之前在iconfont下载的免费图标，midjourney提供这些图片简直就是我的救世主，我很快便将一开始的免费次数用完，然后氪了一个30美刀的会员，虽然有点肉痛，但是为了儿时的梦想，这点痛算什么。

虽然我查找了一下攻略，别人说可以使用gpt和midjourney配合起来，我也试了一下，效果一般，可能姿势没有对，继续用我的有道翻译将重点词汇翻译后丢给midjourney。midjourney不仅可以四选一，还可以对图片不断优化，还有比例选择，各种参数，但是我也不需要用到那么多额外的功能，总之一个字，就是棒。

但当时的我突然意识到，这个AI如此厉害，那么会不会对现在行业某些打工人造成一定影响呢，结果最近已经出了篇报道，某公司因为AI绘图工具辞退了众多插画师，事实不一定真实，但是也不是空穴来风，结合众多外界名人齐心协力抵制gpt5.0的研发，在担心数据安全之余，是否也在担心着AI对人类未来生活的各种冲击。焦虑时时刻刻都有，但解决焦虑的办法，我有一个妙招，仍然还是奖励自己。

门槛

当我把整个小游戏焕然一新后，便兴冲冲的跑去微信开放平台上传我的伟大的杰作。但微信突然泼了我一盆冷水，上传微信小游戏前的流程有点出乎意外，要写游戏背景、介绍角色、NPC、介绍模块等等，还要上传不同的图片。我的小游戏一共就三个界面，有六个大板块要填写，每个板块还要两张不同的图片，我当时人就麻了。我只能创建一个单位截一次图，确保每张图片不一样。做完这道工序，还要写一份自审自查报告。

就算做完了这些前戏，我感觉我的小游戏还是难登大雅之堂，突然，我又想到了这个东西其实是不是也能运行在web端呢，随后我便立刻付诸行动，创建一个带有canvas的html，之前微信小游戏是通过weapp-adapter这个文件把canvas暴露到全局，所以在web端使用canvas的时候，只需要使用document.getElementById('canvas')暴露到全局即可。然后通过http-server对应用进行启动，这个小游戏便以web端的形式运行到浏览器上了，终于也能理解之前为啥微信小游戏火起来的时候，很多企业都用h5游戏稍微改下代码进行搬运，原来两者之间是有异曲同工之妙之处的。

关于游戏

上面两张便是两个种族对应的生产链，龙族是我第一个创建的，因为我自幼对龙产生好感和兴趣，何况我是龙的传人/doge。魔法学院则是稍微致敬一下《游戏王》中黑魔导卡组吧。

其实开发难度最难的莫过于是AI，也就是人机，如何让人机在有限的资源做出合理的选择，是一大难题，也是我后续要慢慢优化的，一开始我是让人机按照创建一个建筑，然后创建一个单位这种形式去做运营展开，但后来我想到一个好的点子，我应该可以根据每个种族的特点，走一条该特点的独有运营，于是人机龙族便有了龙蛋和破坏龙两种流派，强度提升了一个档次。

其实是否能上架到微信小游戏已经不重要了，重要的是这个过程带给我的乐趣，一步一步看着这个游戏被创建出来的成就感，就算这个行业受到什么冲击，我需要被迫转行，我也不曾后悔，毕竟是web前端让我跨越了十几年的时光，找到了儿时埋下的种子，浇水，给予阳光，让它在我的心中成长为一棵充实的参天大树。

h5地址:hslastudio.com/game/

github地址: github.com/FEA-Dven/wa…

1.目标场景

有时候上完线，用户还停留在老的页面，用户不知道网页重新部署了，跳转页面的时候有时候js连接hash变了导致报错跳不过去，并且用户体验不到新功能。

2.思考解决方案

如何去解决这个问题
思考中...

如果后端可以配合我们的话我们可以使用webSocket 跟后端进行实时通讯，前端部署完之后,后端给个通知，前端检测到Message进行提示，还可以在优化一下使用EvnentSource 这个跟socket很像只不过他只能后端往前端推送消息，前端无法给后端发送，我们也不需要给后端发送。

以上方案需要后端配合，奈何公司后端都在忙，需要纯前端实现。

重新进行思考...

根据和小伙伴的讨论得出了一个方案，在项目根目录给个json 文件，写入一个固定的key值然后打包的时候变一下，然后代码中轮询去判断看有没有变化，有就提示。

果然是康老师经典不知道。

但是写完之后发现太麻烦了，需要手动配置json文件，还需要打包的时候修改，有没有更简单的方案，
进行第二轮讨论。

第二轮讨论的方案是根据打完包之后生成的script src 的hash值去判断，每次打包都会生成唯一的hash值，只要轮询去判断不一样了，那一定是重新部署了.

3.代码实现

interface Options {

    timer?: number

}



export class Updater {

    oldScript: string[] //存储第一次值也就是script 的hash 信息

    newScript: string[] //获取新的值 也就是新的script 的hash信息

    dispatch: Record<string, Function[]> //小型发布订阅通知用户更新了

    constructor(options: Options) {

        this.oldScript = [];

        this.newScript = []

        this.dispatch = {}

        this.init() //初始化

        this.timing(options?.timer)//轮询

    }





    async init() {

        const html: string = await this.getHtml()

        this.oldScript = this.parserScript(html)

    }



    async getHtml() {

        const html = await fetch('/').then(res => res.text());//读取index html

        return html

    }



    parserScript(html: string) {

        const reg = new RegExp(/<script(?:\s+[^>]*)?>(.*?)<\/script\s*>/ig) //script正则

        return html.match(reg) as string[] //匹配script标签

    }



    //发布订阅通知

    on(key: 'no-update' | 'update', fn: Function) {

        (this.dispatch[key] || (this.dispatch[key] = [])).push(fn)  

        return this;

    }



    compare(oldArr: string[], newArr: string[]) {

        const base = oldArr.length

        const arr = Array.from(new Set(oldArr.concat(newArr)))

        //如果新旧length 一样无更新

        if (arr.length === base) {

            this.dispatch['no-update'].forEach(fn => {

                fn()

            })

        

        } else {

            //否则通知更新

            this.dispatch['update'].forEach(fn => {

                fn()

            })

        }

    }



    timing(time = 10000) {

         //轮询

        setInterval(async () => {

            const newHtml = await this.getHtml()

            this.newScript = this.parserScript(newHtml)

            this.compare(this.oldScript, this.newScript)

        }, time)

    }



}

代码用法

//实例化该类

const up = new Updater({

    timer:2000

})

//未更新通知

up.on('no-update',()=>{

   console.log('未更新')

})

//更新通知

up.on('update',()=>{

    console.log('更新了')

})

4.测试

执行 npm run build 打个包

安装http-server

使用http-server 开个服务

重新打个包npm run build

这样子就可以检测出来有没有重新发布就可以通知用户更新了。

这里抛出一个问题

作为一个前端为什么要去学习 Rust ？

这是个好问题，有人可能觉得前端学习 Rust 意义不大，学习成本高，投入产出比低啥的，JavaScript、TypeScript 这些前端语言还没搞明白呢，为什么还要去学一门这么难的新语言？

那么今天我就谈谈我自己对于这个问题的看法~，主要是分为 5 点：

• 性能
• 跨平台特性
• 安全性
• 职业视野
• 职业竞争力

性能

Rust 可以给 Node.js 提供一个性能逃生通道，当我们使用 Node.js 遇到性能瓶颈或 CPU 密集计算场景的时候，便可以使用 Rust 编写 Native Addon 解决这个问题了，Native Addon 就是一个二进制文件，也就是 xxx.node 文件，比如 swc(对应 babel)、Rspack(对应Webpack)、Rome(对应 eslint、prettier、babel、webpack 等，目标是代替我们所熟悉的所有前端工具链...)，上面提到的工具链就都是使用 Rust 编写的，性能比 Node.js 对应功能的包都有了极大的提高，同时 Rust 也是支持多线程的，你编写的多线程代码在 Node.js 中一样可以跑，这就可以解决了 Node.js 不擅长 CPU 密集型的问题。在前端架构领域目前 Rust 已经差不多是标配了，阿里、字节内部的前端基建目前都开始基于 Rust 去重构了。

跨平台

可以编写高性能且支持跨平台的 WebAssembly 扩展，可以在浏览器、IOT 嵌入式设备、服务端环境等地方使用，并且也拥有很不错的性能；和上面提到的 Native Addon 不一样， Native Addon 在不同的平台上都需要单独的进行编译，不支持跨平台；但是 WebAssembly 不一样，虽然它的性能没 Native Addon 好，但是跨平台成本很低，我编写的一份代码在 Node.js 中执行没问题，在 Deno 中跑也没问题，在 Java 或者 Go 中跑也都没问题，甚至在单片机也可以运行，只要引入对应的 Wasm 运行时即可。现在 Docker 也已经有 WebAssembly 版本了；同时 Rust 也是目前编写 WebAssembly 最热门的语言，因为它没有垃圾回收，性能高，并且有一个超好用的包管理器 cargo。

安全

Rust 编译器真的是事无巨细，它保证你编写的代码不会出低级错误，比如一些类型上的错误和内存分配上的错误，基本上只要 Rust 代码能够编译通过，就可以安心上线，在服务端、操作系统等领域来说这也是个很好的特性，Linux 系统和安卓系统内核都已经开始使用 Rust ，这还信不过嘛？

视野

Rust 可以提升自己在服务端领域的视野，Rust 不同于 Node.js 这个使用动态 JS 语言的运行时，它是一门正儿八经的静态编译型编程语言，并且没有垃圾回收，可以让我们掌握和理解计算机的一些底层工作机制，比如内存是如何分配和释放的，Rust 中使用所有权、生命周期等概念来保证内存安全，这对我们对于编程的理解也可以进一步提升，很多人说学习了 Rust 之后对自己编写其它语言的代码也有了更深的理解，毕竟计算机底层的概念都是相通的，开阔自己的编程思维。

职业竞争力

这个问题简单，你比别人多一门技能，比如 WebAssembly 和 Native Addon 都可以作为 Node.js 性能优化的一种手段，面试的时候说你会使用 Rust 解决 Node.js 性能问题，这不是比别人多一些竞争力吗？面试官那肯定也会觉得你顶呱呱~ 另外虽然目前 Rust 的工作机会比较少，但是也不代表没有，阿里和字节目前都有关于前端基建的岗位，会 Rust 是加分项，另外 Rust 在 TIOBE 编程语言榜排名中已经冲进了前 20，今年 6 月份是第 20 名，7 月份是第 17 名，流行度开始慢慢上来了，我相信以后工作机会也会越来越多的。

总结

不过，总的来说，这还是得看自己个人的学习能力，学有余力的时候可以学习一下 Rust，我自己不是 Rust 吹啊，我学习 Rust 的过程中真的觉得很有趣，因为里面的很多概念在前端领域中都是接触不到的，学了之后真的像是打开了新世界的大门，包括可以去看 Deno 的源码了，可以了解到一个 Js 运行时是怎么进行工作的，这些都是与我们前端息息相关的东西，即使哪天不做前端了，可以去转服务端或嵌入式方向，起码编程语言这一关不需要费多大力气了，Rust 是目前唯一一门从计算机底层到应用层都有落地应用的语言。不多说了，学就完事了，技多不压身嘛

类似chat-gpt的打字机效果

展示效果：

实现思路：只要控制显示内容的长度就行了，每次加一点显示内容，然后一直播放闪烁动画，加载完了就停掉动画。

结论：单个字逐渐加载 + 闪烁动画 = 打字机效果

闪烁动画实现

通过css实现

.cursor {

    position: absolute;

    display: inline-block;

    width: 2px;

    height: 16px;

    background-color: #000;

    animation: blink 1s infinite;

    transform: translate(2px, 3px);

}



@keyframes blink {

    0%, 100% {

        opacity: 1;

    }

    50% {

        opacity: 0;

    }

}

展现效果：

完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>打字机效果</title>

    <style>

        .cursor {

            position: absolute;

            display: inline-block;

            width: 2px;

            height: 16px;

            background-color: #000;

            animation: blink 1s infinite;

            transform: translate(2px, 3px);

        }



        @keyframes blink {

            0%, 100% {

                opacity: 1;

            }

            50% {

                opacity: 0;

            }

        }

        .box1 {

            line-height: 22px;

            width: 300px;

            font-size: 16px;

            padding: 10px;

            border: 1px solid pink;

            margin-bottom: 10px;

            min-height: 100px;

        }

    </style>

</head>

<body>

    <div class="box1">

        <span class="cursor"></span>

    </div>

    <button class="btn">添加文字</button>

    <script>

        const randomTextArr = ["萨嘎", '三', "agas", '大厦', '阿萨法施工', 'saf', '啊', '收到', '三个哈哈哈', '阿事实上事实上事实上', '事实上事实上少时诵诗书', '叫哦大家搜狗号度搜化工三打哈干撒的很尬山东干红手打很尬搜哈', '时间几节课MVvvvvvvvvvv啪啪啪啪啪啪PPT科技我IQ和瓦暖气，你', '撒啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊就你跟贵公司懂法守法收入与武器我先把发发花洒就你跟贵公司懂法守法收入与武器我先把发发花洒'];

        const box1 = document.querySelector('.box1');

        const btn = document.querySelector('.btn');

        let showText = '';

        let addTextArr = [];

        let timer = null;



        btn.onclick = () => {

            getRandomText();

            updateText();

        }



        function getRandomText() {

            const randomTextArrLength = randomTextArr.length;

            let randomNum = Math.random();

            let addText = randomTextArr[Math.floor(Math.random() * randomTextArrLength)];

            addTextArr.push(addText);

            console.log(addText)

        }



        function updateText() {

            let index = 0;

            if (!timer) {

                timer = setInterval(() => {

                    if (addTextArr.length > 0) {

                        if (index < addTextArr[0].length) {

                            box1.innerHTML = showText + addTextArr[0][index] + `<span></span>`;

                            showText += addTextArr[0][index];

                            index ++;

                        } else {

                            index = 0;

                            box1.innerHTML = showText;

                            addTextArr.shift();

                        }

                    } else {

                        clearInterval(timer);

                        timer = null;

                    }

                }, 50)

            }

        }

    </script>

</body>

</html>

快来免费体验ChatGpt plus版本的，我们出的钱 体验地址:chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器已上线 cube.waixingyun.cn/home

1.使用边框绘制一个三角形

在某些情况下，例如在工具提示中添加箭头指针时，如果你只需要简单的三角形，那么加载图片可能会过度。

仅使用CSS，您就可以通过边框创建一个三角形。

这是一个相当老的技巧。理想情况下，你会在一个宽度和高度都为零的元素上设置边框。所有的边框颜色都是透明的，除了那个将形成箭头的边框。例如，要创建一个向上指的箭头，底部边框是有颜色的，而左边和右边是透明的。无需包括顶部边框。边框的宽度决定了箭头的大小

.upwards-arrow {

    width: 0;

    height: 0;

    border-left: 20px solid transparent;

    border-right: 20px solid transparent;



    border-bottom: 20px solid crimson;

}

这将创建一个像下面所示的向上指的箭头：

事例地址：codepen.io/chriscoyier…

2.交换元素的背景

z-index 属性规定了元素如何堆叠在其他定位元素上。有时，你可能会设置一个 z-index 属性让子元素的层级较低，结果却发现它隐藏在其父元素的背景之后。为了防止这种情况，你可以在父元素上创建一个新的堆叠上下文，防止子元素隐藏在其后面。创建堆叠上下文的一种方法是使用 isolation: isolate CSS样式声明。

我们可以利用这种堆叠上下文技术来创建悬停效果，该效果可以交换按钮的背景。例如：

button.join-now {

    cursor: pointer;

    border: none;

    outline: none;

    padding: 10px 15px;



    position: relative;

    background-color: #5dbea3;

    isolation: isolate; /* If ommitted, child pseudo element will be stacked behind */

}



button.join-now::before {

    content: "";

    position: absolute;

    background-color: #33b249;

    top: 0;

    left: 100%;

    right: 0;

    bottom: 0;

    transition: left 500ms ease-out;



    z-index: -1;

}



button.join-now:hover::before {

    left: 0;

}

上述代码在鼠标悬停时交换了 button 的背景。背景的变化不会干扰前景的文本，如下面的gif所示：

3.将元素居中

可能，你已经知道如何使用 display: flex; 和 display: grid; 来居中元素。然而，另一种不太受欢迎的在x轴上居中元素的方法是使用 text-align CSS属性。这个属性在居中文本时就能直接使用。要想在DOM中也居中其他元素，子元素需要有一个 inline 的显示。它可以是 inline-block 或任何其他内联...

div.parent {

    text-align: center;

}



div.child {

    display: inline-block;

}

4.药丸💊形状按钮

可以通过将按钮的边框半径设置为非常高的值来制作药丸形状的按钮。当然，边框半径应该高于按钮的高度。

button.btn {

    border-radius: 80px; /* value higher than height of the button */

    padding: 20px 30px;

    background-color: #fdd835;

    border: none;

    color: black;

    font-size: 20px;

}

按钮的高度可能会随着设计的改变而增加。因此，你会发现将 border-radius 设置为非常高的值是很方便的，这样无论按钮是否增大，你的css都能继续工作。

5.轻松为你的网站添加美观的加载指示器

对于开发者来说，将注意力转移到为你的网站创建一个美观的加载指示器上往往是一项乏味的任务。这种关注力更好地用于构建项目的其他重要部分，这些部分值得我们去关注。

当你在阅读时，很可能你也觉得这是个令人烦恼的难题。这就是为什么我花时间为你消除这个障碍，并精心准备了一个装有加载指示器的库，让你可以在你的梦想项目中“即插即用”。这是一个完整的集合，你只需要挑选出那个能点燃你心中火花💖的。只需看看这个库的简单用法，源代码在Github上可用。别忘了给个星星⭐

地址:http://www.npmjs.com/package/rea…

6.简易暗色或亮色模式

您只需要几行CSS代码，就可以在我们的网站上启用深色/浅色模式。您只需让浏览器知道，您的网站可以在系统的深色/浅色模式下正确显示。

html {

    color-scheme: light dark;

}

注意： color-scheme 属性可以设置在除 html 之外的任何DOM元素上。

然后通过我们的网站设置控制背景颜色和文字颜色的变量，通过检查浏览器支持使其更加防弹：

html {

    --bg-color: #ffffff;

    --txt-color: #000000;

}



@supports (background-color: Canvas) and (color: CanvasText) {

    :root {

        --bg-color: Canvas;

        --txt-color: CanvasText;

    }

}

注意：如果你不在元素上设置 background-color ，它将继承浏览器定义的与深色/浅色主题匹配的系统颜色。这些系统颜色在不同的浏览器之间可能会有所不同。

明确设置 background-color 可以与 prefers-color-scheme 结合使用，以提供与浏览器默认设置不同的颜色阴影。

以下是暗/亮模式的实际应用。用户的偏好在暗模式和亮模式之间进行模拟。

7.使用省略号（ ... ）截断溢出的文本

这个技巧已经存在一段时间，用于美观地修剪长文本。但你可能仍然错过了它。你只需要以下的CSS：

p.intro {

    width: 300px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

只需实施以下规则：

• 明确的宽度，因此剪裁的边界将永远被达到。


• 浏览器会将超出元素宽度的长文本进行换行。所以你需要阻止这种情况： white-space: nowrap; 。


• 溢出的内容应被剪裁： overflow: hidden; 。


• 当文本即将被剪切时，用省略号（ ... ）填充字符串： text-overflow: ellipsis; 。

结果看起来像这样：

8.将长文本截断为若干行

这与上述技巧略有不同。这次，文本被剪裁，将内容限制为一定的行数。

p.intro {

    width: 300px;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3; /* Truncate when no. of lines exceed 3 */

    overflow: hidden;

}

输出看起来像这样：

9. 停止过度劳累自己写作 top ， right ， bottom ， left

在处理定位元素时，你通常会编写如下代码：

.some-element {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

}

这可以通过使用 inset 属性来简化：

.some-element {

    position: absolute;

    inset: 0;

}

或者，如果你对 top 、 right 、 bottom 和 left 有不同的值，你可以按照如下的顺序分别设置它们： inset: -10px 0px -10px 0px 。这种简写方式与margin 的工作方式相同。

10.提供优化过的图片

请尝试在浏览器的开发者工具中将网络速度调整到较慢，然后访问一个由高清图片组成的网站，比如 unsplash。这就是你的网站访客在网络速度较慢的地理区域尝试欣赏你的高清内容时所经历的痛苦。

但你可以通过 image-set CSS 技巧提供一种解救方法。

可以为浏览器提供选项，让它决定最适合用户设备的图片。例如：

.banner {

    background-image: url("elephant.png"),

    background-image: -webkit-image-set(

        url("elephant.webp") type("image/webp") 1x,

        url("elephantHD.webp") type("image/webp") 2x,

        url("elephant.png") type("image/png") 1x,

        url("elephantHD.png") type("image/png") 2x

    );

}

上述代码将设置元素的背景图像。

如果支持 -webkit-image-set ，那么背景图像将会是一种优化的图像，也就是说，这将是一种支持的MIME类型的图像，且更适合用户设备的分辨率能力。

例如：由于更高质量的图像直接与更大的尺寸成正比，所以在网络状况差的情况下使用高分辨率设备的用户，会促使浏览器决定提供支持的低分辨率图像。让用户等待高清图像加载是不合逻辑的。

11. 计数器

你不必纠结于浏览器如何渲染编号列表。你可以利用 counters() 实现你自己的设计。以下是操作方法：

ul {

    margin: 0;

    font-family: sans-serif;



    /* Define & Initialize Counter */

    counter-reset: list 0;

}



ul li {

    list-style: none;

}



ul li:before {

    padding: 5px;

    margin: 0 8px 5px 0px;

    display: inline-block;

    background: skyblue;

    border-radius: 50%;

    font-weight: 100;

    font-size: 0.75rem;



    /* Increment counter by 1 */

    counter-increment: list 1;

    /* Show incremented count padded with `.` */

    content: counter(list) ".";

}

12.表单验证视觉提示

仅使用CSS，您就可以向用户显示有关表单输入有效性的视觉提示。我们可以在表单元素上使用 :valid 和 :invalid CSS伪类，当其内容验证成功或失败时，应用适当的样式。

请考虑以下HTML页面结构：

<!-- Regex in pattern attribute means input can accept `firstName Lastname` (whitespace sepearated names) -->

<!-- And invalidates any other symbols like `*` -->

<input

    type="text"

    pattern="([a-zA-Z0-9]\s?)+"

    placeholder="Enter full name"

    required

/>

<span></span>

<span> 将用于显示验证结果。以下的CSS根据其验证结果来设置输入框的样式：

input + span {

    position: relative;

}



input + span::before {

    position: absolute;

    right: -20px;

    bottom: 0;

}



input:not(:placeholder-shown):invalid {

    border: 2px solid red;

}



input:not(:placeholder-shown):invalid + span::before {

    content: "✖";

    color: red;

}



input:not(:placeholder-shown):valid + span::before {

    content: "✓";

    color: green;

}

地址：codepen.io/hane-smitte…

13. 一键选择文本

这个技巧主要是为了提升网站用户的复制和粘贴体验。使用 user-select: all ，可以通过一键实现简单的文本选择。所有位于该元素下方的文本节点都会被选中。

另一方面，可以使用 user-select: none; 来禁用文本选择。禁用文本选择的另一种方法是将文本放在 ::before 或 ::after CSS伪元素的 content: ''; 属性中。

前端的车轮滚滚向前，轮子造的越来越圆，速度造的越来越快，每个人都在适应这个轮子的节奏，稍微不注意就会被甩出车轮之外。狼狈不堪之外还会发自心底的大喊一声：别卷了！！

话虽这么说，但现实就是这样，无论是客观还是主观因素都不得不让你继续的往前走。既然是往前走，
那么能知道一些前面有啥东西岂不是更好，也许能少走弯路。

自己对前端23年大概的技术做了一些展望，想到什么写什么。毕竟谁都不知道会不会突然间又出了个frontEndGPT打翻了所有人的饭碗。

1 AI

最先说的肯定是AI，22年末，23年初的chatgpt让AI话题火的一塌糊涂，同时也被认为是一次重大的技术革新，技术革新带来的就是重塑，一切都要被重塑，你的职业，你的工作。
视觉层面的stable diffusion和midjourney已经对设计师产生了重大影响，而涉及到视觉ui层面的话，前端肯定是绕不开的部分。虽然目前没有直接的对前端产生影响，但下面的就一个就不只是对前端了，而是对整个程序员都产生了影响。

• copilot

Your AI pair programmer. Trained on billions of lines of code, GitHub Copilot turns natural language prompts into coding suggestions across dozens of languages.

看看醒目的文字就知道，程序员或多或少都会被影响了。

还有什么CodeWhisperer, Cursor等也都是AI辅助编程。

更有Fronty，Locofy等将图片AI分析为HTML文档，无代码快速建站，figma快速解析成代码等，虽然是提效不少，但谁能说这些不是对前端的一种重塑呢。

2 主流框架

随着React，Vue等框架进一步的普及，现在前端想要脱离它们的场景越来越少了。那么它们的下一步规划，也会对我们产生一些不小的影响。

react

react 18以后，react似乎是对create-react-app这种项目启动方式也不怎么主推了，毕竟速度摆在那里，没有任何优势。而使用直接竞争对手的产品似乎又不太合适，而直接说又不用又显得跟开源精神不吻合(当然竞争对手的一些基本特性也确实和现有的构建思想不太吻合)。

他们似乎采取一种围魏救赵的方式，着重宣传next的方式。next不仅仅是一个ssr的框架，同时它也支持csr,ssg等不同的方式(next13开始，对于客户端组件和服务端组件可以有了比较好的区分)。同时next与react有着千丝万缕的联系，而next正在进行一个新的构建工具的替换。
next采用了turbopack,也是Webpack作者TobiasKoppers的作品，官方说它更新速度比Vite也要快10倍、比Webpack快700倍

而react也应该大概率会引入turbopack(当然它如果继续搞前端脚手架的话)。当然也可能会直接使用next环境。

至于快多少，以及评价基准等我们可以看下turbopack真比Vite快10倍吗？

next

next最新版本也加入了很多的特性，比如server component理念，约定式路由的更改，流式渲染，客户端组件与服务端组件分离更简单，更好的构建速度等等功能。可以让开发体验，用户体验更好，性能也会有响应的提升。

vite

这个不用说了，优秀的构建速度以及越来越丰富的社区，让其在22年有了很大提升。随着浏览器的逐步升级，23年vite肯定也会是重大的一年。

webpack

虽然5有了好多的功能提升，不过速度似乎一直是一个绕不过去的坎。就连作者也已经开始搞turbopack了，虽然加入swc能让编译有很大提升，但是目前从我身边的人的了解看，越来越多的人开始转向vite等其它方式了

turbopack

是webpack作者去的新公司开发的一款基于rust的打包工具。官方明确说明就是为了替换webpack。 同时强调webpack是这十年最火的工具，那turbopack就定位成未来几年的工具。由于作者和webpack, Vercel, next, React这些之间千丝万缕的联系，很难不说未来React也许会和这个打包工具绑定上。下面是官方提供的速度参考

而除了turbopack外，同一团队还在做Turborepo。

这是一款项目管理的工具，最主要的面向场景是Monorepo这种复杂的多项目管理

Monorepo有很多优势，但是在多个项目中会有很多复杂的构建过程和相对闭塞的构建步骤，每一次上线都是耗时严重。所以Turborepo是为了解决这个问题出现的，让一些构建重复的构建步骤提炼出来，基于整个Monorepo项目的维度来管理多个子项目。

同时对于单个CI的构建步骤，解决每台机器，每个人都要单独构建的问题，还提炼了类似store的方案，脱离了构建环境，只跟项目绑定，当然这个方案是否使用要看你自己，毕竟原理是把构建产物放到第三方储存，而第三方又不是一个类似npm的开源机构。

3 服务端

node从7，8年前的爆火，到现在的不温不火，前端语言介入服务端这个命题似乎现在是越来越清晰了。那就是定位，可以做网关，可以做转发，可以做一些数据代理合并，定位清晰node依然有自己的使用场景。
node也马上到了20版本，迎来了一些特性

• esm的更好支持，
  

• 测试功能更加丰富
  

• V8 引擎更新至 11.3，与Chromium113版本大部分相同
  

• 支持以虚拟机的方式，动态运行js代码
  

• WebAssembly的支持(实验性的)

于此同时，node曾经的作者Ryan Dahl几年前搞的Deno似乎没有太多的消息，似乎在向商业化方向前进。打造出Deno Deploy及其即时边缘渲染SSR框架Deno Fresh

4 其它

WebAssembly, 元框架，ts，微前端？

引用：

http://www.infoq.cn/article/9qu…
turbo.build/pack/docs/w…
http://www.robinwieruch.de/web-develop…

随着 AIGC 的兴起，移动互联网仿佛一瞬间也不香了，吃到红利的头部应用还在稳坐泰山，后起者在各种 xx 已死的声浪中，不知所措，信心尽失。流量的走势左右了太多人的思绪，太多的决策，所以当你在 2023 年，PC 互联网已经凉到不能再凉的时候，接到一个官网的需求，你会怎么去做呢，耐心看完，希望对你有所帮助。

官网开发作为前端的传统艺能已经诞生很久了，与现在主流的 react/vue 等 csr 框架开发不同，官网对 seo 有一定要求，所以咱们的网页不再是开局一个空 html，渲染全靠 js 了。传统的官网开发，一般采用 WordPress 建站，很好的技术栈 php + html/css/js 前后台一把梭，方便快捷，架构成熟。不过当遇到公司的前后端技术栈是 java + react 时，这个方案显然对开发人员并不友好，作为一名思维跳脱，勇于承担的前端，灵光乍现，我们是不是可以自己独立的完成整个官网呢。

在掘金上搜了搜，居然还有现成的课程，看看时间还挺新的，不如就从它入手吧。

作为网站尊贵的会员，我用兑换券换到了这门课程，开始了如饥似渴的学习。文章内容还是比较浅显易懂的，跟着操作下一个网站的雏形就出现了。课程中的技术栈主要采用 next.js + strapi 完成对官网的开发，相信各位看官并不陌生，业界知名的 react ssr 框架和 headless cms 系统，基础的介绍就不多说了，来分享点实操中得到经验教训吧。

next.js 相关

收获到的知识

1. 如何调试 next.js 服务端渲染的逻辑

之前，我只会使用 console.log 在启动的命令行里去判断代码的问题，现在我知道了使用 cross-env NODE_OPTIONS='--inspect' next dev 命令，他会开启一个 nodejs 的 inspect 调试窗口，因为 next.js 的系统对象都很复杂，层级深，如果 console.log 的话很觉得很烦人，通过如上的方式就能便捷。

2. 生成有参数的静态页面的方法

其实像官网流量挺小的，没有必要走静态导出的 ssg ，使用 ssr 也完全没有问题，但是鉴于对 k8s 扩容，服务器费用之类的知识不太了解，官网的迭代频率也很低，所以本次采用了 ssg 的方案，要求所有子页面都要生成， 这就不得不提到内置的 api名为 getStaticPaths了。他会在打包阶段，先从一个列表接口拿到所有的id，再执行 getStaticProps 中的逻辑，拿到所有详情数据。比如我们的故事详情页，共有两条数据，id为1，2，执行完后，就会在对应目录下生成两个 html

得到的经验教训

1. 移动端适配

一个简易的判断移动端的代码很容易写，先不纠结完备性，大致如下：

// config/plugins.js

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: "strapi-provider-upload-oss", // full package name is required
      providerOptions: {
        accessKeyId: "xxxx", // 用你的 oss 配置把 xxx 换掉，但千万别上传到开源库里（如github, gitee）哦
        accessKeySecret: "xxx",
        region: "xxx",
        bucket: "xxx",
        uploadPath: "/strapi/static",
        baseUrl: "xxx",
        timeout: 3000,
        secure: true,
      },
    },
  },
});

3. 数据的格式化（！！！）

课程中自己定义 removeTime, removeAttrsAndId 等方法，对数据进行处理，可能写的比较早，还没有成熟的转换库，这里介绍下 strapi-plugin-transformer，可以快速的去掉没必要的层级结构和一些属性，相当好用。配置如下：

// config/plugins.js

module.exports = ({ env }) => ({
  transformer: {
    enabled: true,
    config: {
      responseTransforms: {
        removeAttributesKey: true,
        removeDataKey: true,
      },
    },
  },
});

这个操作可以避免对数据进行过多的处理，也就意味着 src/api/xx 里的代码，你基本不需要手动修改了，大大提升了后台配置的开发效率。C端对数据的处理也更简单了

4. 一些小的注意点

• config 目录下添加插件，需要创建 plugins.js 文件，少写了 s 会导致插件不生效。（PS：嗯，就是粗心的我建了 plugin.js 还怪人家插件不好使～）

• .cache 还挺有用的，一些修改不生效，可以试试 build 后再重启试试。

一些拓展能力

strapi 的初始状态很难满足直接交付给运营配置，最大的坑点在于类型定义是英文的，还没有层级结构，这里参考了这篇文章提到的方案：juejin.cn/post/721922…，来对 dashboard 进行定制。功能主要分为3个步骤，patch-package 使用参考原文章即可。

• 类型汉化

只需要修改 admin/app.js 即可

• 类型层级&排序：.cache/admin/src/content-manger/pages/App/LeftMenu 文件

// 目录排序，1，1.1，2，2.1
function compareDirectories(formatter, dir1, dir2) {
  // 提取目录中的数字和点号
  const regex = /(\d+|\.)+/g;
  const arr1 = dir1.match(regex);
  const arr2 = dir2.match(regex);

  if (!arr1 || !arr2) return formatter.compare(dir1, dir2);

  // 比较每个部分的数字
  for (let i = 0; i < Math.max(arr1.length, arr2.length); i++) {
    const num1 = parseFloat(arr1[i]) || 0; // 如果无法解析为数字，默认为0
    const num2 = parseFloat(arr2[i]) || 0;

    if (num1 < num2) {
      return -1;
    } else if (num1 > num2) {
      return 1;
    }
  }

  // 如果所有部分都相同，则按照长度进行比较
  if (arr1.length < arr2.length) {
    return -1;
  } else if (arr1.length > arr2.length) {
    return 1;
  }

  return 0; // 目录完全相同
}



// Sort correctly using the language
// 这条注释下，用目录排序的方法替代原有 sort

// SubNavLink 内，使用 dangerouslySetInnerHTML 体现目录层级
<span dangerouslySetInnerHTML={{__html: link.title.replace(/([0-9]+.)/g, (a, b, index)  => {
  if (index <= 1) return '';

  return '   ';
})}}></span>

🍉 废话在前

写vue的伙伴们无感刷新token相信大家都不陌生了吧，刚好，最近自己的一个项目中就需要用到这个需求，因为之前没有弄过这个，研究了一个上午，终于还是把它拿下了，小小的一个token刷新😏。

下面接着分析一下踩到的坑以及解决思路

🍗 接着踩坑

我按照之前传统的方式在返回拦截器里面进行token刷新，正常的数据可以返回，但是这个时候会有比较麻烦的地方，就是请求的数据可以在拦截器里面得到，但是不能渲染到界面上（看到这里的时候我是懵的）。

看一下代码

service.interceptors.response.use(
  response => {
    const res = response.data
    //刷新token的时候，可以从这里拦截到新数据，但是没有显示在页面上
    console.log('拦截数据：',res)
    if (loadingInstance) {
      loadingInstance.close();
      NProgress.done();
    }
    switch (res.code) {
      case 200:
        return res
      case 401:
        router.push({
          path: "/login",
        })
        localStorage.clear();
        Notification.error({
          title: '令牌过期',
          message: '当前身份信息超过三天已失效，请您重新登录',
          duration: 0
        });
        break;
      default:
        Message({
          message: res.message || '请求错误',
          type: 'error',
          duration: 5 * 1000
        })
        break;
    }
  },
  error => {
    switch (error.response.status) {
      case 401:
        MessageBox.confirm('身份认证已过期，是否刷新本页继续浏览？', '提示', {
          confirmButtonText: '继续浏览',
          cancelButtonText: '退出登录',
          type: 'warning'
        }).then(() => {
          axios.post('/api/token/refresh/', {
            refresh: localStorage.getItem("retoken")
          }).then(response => {
            let res = response.data || {}
            if (res.code == 200) {
              let token = res.data.result;
              localStorage.setItem("token", token.access);
              localStorage.setItem("retoken", token.refresh);
              error.response.config.baseURL = '';
              error.response.config.headers['Authorization'] = 'Bearer  ' + localStorage.getItem("token")
              window.location.reload();
            } else {
              router.push({
                path: "/login",
              })
              localStorage.clear();
              Notification.error({
                title: '令牌过期',
                message: '当前身份信息超过三天已失效，请您重新登录',
                duration: 0
              });
            }
          }).catch(err => {
            router.push({
              path: "/login",
            })
            localStorage.clear();
            Notification.error({
              title: '认证失败',
              message: '信息认证失败，请重新登录',
              duration: 0
            });
          })
        }).catch(() => {
          router.push({
            path: "/login",

          })
          Message({
            message: '已退出',
            type: 'success',
          })
          localStorage.clear();
        });
        break;
      case 404:
        Notification.error({
          title: '404错误',
          message: '服务器请求错误，请联系管理员或稍后重试。错误状态码：404',
        });
        break
      default:
        Notification.error({
          title: '请求错误',
          message: '服务器请求错误，请联系管理员或稍后重试',
        });
        break;
    }
    if (loadingInstance) {
      loadingInstance.close();
      NProgress.done();
    }
    return Promise.reject(error);

  }
)

import axios from 'axios'
import {
  Message,
  Loading,
  Notification,
} from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import router from '@/router/index'
const baseURL = '/api'
const service = axios.create({
  baseURL,
  timeout: 6000
})
NProgress.configure({
  showSpinner: false
}) // NProgress Configuration
let loadingInstance = undefined;
service.interceptors.request.use(
  config => {
    NProgress.start()
    loadingInstance = Loading.service({
      lock: true,
      text: '正在加载，请稍候...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.3)'
    })
    config.headers['Authorization'] = 'Bearer  ' + localStorage.getItem("token")
    return config;
  },
  error => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    const res = response.data

    if (loadingInstance) {
      loadingInstance.close();
      NProgress.done();
    }
    switch (res.code) {
      case 200:
        return res
      case 401:
        router.push({
          path: "/login",
        })
        localStorage.clear();
        Notification.error({
          title: '认证失效',
          message: '当前身份信息超过三天已失效，请您重新登录',
          duration: 0
        });
        break;
      default:
        Message({
          message: res.message || '请求错误',
          type: 'error',
          duration: 5 * 1000
        })
        break;
    }
  },
  async error => {
    switch (error.response.status) {
      case 401:
        const err401Data = error.response.data || {}
        if (err401Data.code !== "token_not_valid") {
          router.push({
            path: "/login",
          })
          localStorage.clear();
          Notification.error({
            title: '认证失败',
            message: '身份信息认证失败，请您重新登录',
            duration: 0
          });
          return
        }
        try {
          const res = await service.post('/token/refresh/', {
            refresh: localStorage.getItem("retoken")
          })
          if (res.code == 200) {
            let token = res.data.result;
            localStorage.setItem("token", token.access);
            localStorage.setItem("retoken", token.refresh);
            error.response.config.baseURL = ''
            error.response.config.headers['Authorization'] = 'Bearer  ' + localStorage.getItem("token")
            return service(error.response.config)
          } else {
            router.push({
              path: "/login",
            })
            localStorage.clear();
            Notification.error({
              title: '认证失败',
              message: '当前身份认证信息已失效，请您重新登录',
              duration: 0
            });
          }
        } catch (error) {
          router.push({
            path: "/login",
          })
          localStorage.clear();
          Notification.error({
            title: '认证失败',
            message: '身份认证失败，请您重新登录，失败原因：' + error.message,
            duration: 0
          });
        }

        break
      case 404:
        Notification.error({
          title: '404错误',
          message: '服务器请求错误，请联系管理员或稍后重试。错误状态码：404',
        });
        break
      default:
        Notification.error({
          title: '请求错误',
          message: '服务器请求错误，请联系管理员或稍后重试',
        });
        break;
    }
    if (loadingInstance) {
      loadingInstance.close();
      NProgress.done();
    }
    return Promise.reject(error);

  }
)

// 文件下载通用方式
export const requestFile = axios.create({
  baseURL,
  timeout: 0, //关闭超时时间
});

requestFile.interceptors.request.use((config) => {
  config.headers['Authorization'] = 'Bearer  ' + localStorage.getItem("token") //携带的请求头
  config.responseType = 'blob';
  loadingInstance = Loading.service({
    lock: true,
    text: '正在下载，请稍候...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.3)'
  })
  return config;
});

requestFile.interceptors.response.use(
  (response) => {
    let res = response.data;
    if (loadingInstance) {
      loadingInstance.close()
    }
    // const contentType = response.headers['content-type'];//获取返回的数据类型
    let blob = new Blob([res], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" //文件下载以及上传类型为 .xlsx
    });
    let url = window.URL.createObjectURL(blob);
    // 创建一个链接元素
    let link = document.createElement('a');
    link.href = url;
    link.download = '产品列表.xlsx'; // 自定义文件名
    link.click();


  },
  (err) => {
    Message({
      message: '操作失败，请联系管理员',
      type: 'error',
    })
    if (loadingInstance) {

      loadingInstance.close()
    }
  }
);


export default service;

文章首发公众号：萌萌哒草头将军，欢迎关注

🎉SolidJS响应式原理和简易实现🎉

做为多年学习JavaScript的开发者，一路走来，几多坎坷，回头再看来时的路，特别感谢下面几本书带我入行前端。

💎《JavaScript高级程序设计》

推荐指数：⭐⭐⭐⭐⭐

推荐理由：内容扎实，且不深奥。

这本书在我大学的时候就已经买了，当时经济实力有限，买的是影印版，不过也被我研读了多遍，并且做了详细的记录。这本书见证了我的前端之路，一直被我珍藏至今。

现在已经出了第四版了。前端入门进阶宝典，所以也被广大开发者称为《红宝书》。

💎《Javascript权威指南》

推荐指数：⭐⭐⭐⭐⭐

推荐理由：内容全面，讲解详细，配合红宝书效果更佳。

该书被称为《犀牛书》，书如其名，真的是权威指南，即使你买了红宝书，我也推荐你买一本，因为这两本对相同的知识讲解，侧重点不同。

比如对于闭包，红宝书很详细，从作用域，到作用域链，再到活动对象，讲解由浅到深，十分详细，而《犀牛书》中仅仅是给出闭包的概念，然后举例说明差异。

但是《犀牛书》对于类型转换toString、valueof讲解则十分详细，《红宝书》则浅浅的带过。

《犀牛书》更像是一本字典，有不懂的问题，可以及时查漏补缺。

💎《图解HTTP》

推荐指数：⭐⭐⭐⭐

推荐理由：图文并茂，简洁明了

这本书作为第三本推荐，绝不是空穴来风，大量的图来解释枯燥的概念，形象生动，老少皆宜。

前端开发一大部分的时间都是在和后端的接口打交道，而Http无疑是沟通的桥梁。

读完这本书，你将会了解到网络分层模型、Http协议和TCP/IP的关系、后端的数据怎么从服务端到达浏览器的、常用Http状态码的含义、请求头的各种含义、你输入url浏览器发生了什么等热门面试题的答案。

我买的是三件套《图解Http》《图解TCP/IP》《图解网络硬件》，《图解网络硬件》一点也不推荐，不懂的硬件直接百度吧，还是彩色图片。如果你是做运维相关的前端开发，《图解TCP/IP》同样值得一看。

💎《数据结构与算法JavaScript描述》

推荐指数：⭐⭐⭐⭐

推荐理由：进阶利器，闭眼入就对了。

大多数同学选择前端，主要还是因为数据结构和算法方面比较薄弱，但是这本书却使用了简洁的方法实现了各种数据结构和算法。

对于难懂的数据结构，有详细的结构图解释，是我读过最容易理解的版本了，不过这本书目前还是ES5语法版本实现，我在前面的文章中使用ES6语法实现过，并做了部分笔记。

👉【数据结构】我的学习笔记

💎《JavaScript设计模式》

推荐指数：⭐⭐⭐

推荐理由：常见的设计模式都有，讲解的比较简单易懂，但是实现比较简陋。

这本书是你入门中级后继续提升的有利法宝，不管什么框架，底层都逃不出两三个设计模式的，所以十分推荐你进阶的时候去读它。

目前有两本名为《JavaScript设计模式》的书，我买的是徐涛翻译版本影印版（和红宝书一起买的），但是最近查阅发现流行的是张容铭著作的版本，这里请自行斟酌买哪个版本。

我买的这个版本将设计模式分为创建型、行为型和结构型三种，前面部分分别讲解了十三种设计模式，后半部分讲解了老牌框架JQuery设计的各种设计模式，虽然从现在的情况看JQuery已经凉了，但是它的设计智慧，真的令人敬佩。

这本书的缺点也是语法版本较旧，不过我也写了最新语法的部分笔记。

👉超级简单的设计模式，看不懂你来打我

今天的内容就这些了，如果你有更好的书籍，可以告诉我！

现在，关注我的公众号会有送书福利，具体请在公众号回复：活动，即可查看详情

本期推荐开源项目目录：

1、ChatGPT 网页应用（AI）
2、AI 换脸（AI）
3、API 调用 Midjourney 进行 AI 画图（AI）
4、如何使用 Open AI 的 API？（AI）
5、中华古诗词数据库
6、动画编程

01. ChatGPT 网页应用

基于 ChatGPT-Next-Web 二次开发的 ChatGPT 网页付费系统，包含用户管理模块和后台看板。

ChatGPT-Admin-Web 付费系统包含七个模块，包括：内容接口、用户系统、支付、敏感词过滤、自由聊天、分销、收益