大家好，我是徐徐。今天我们来认识认识 Electron。

前言

其实一直想系统的写一写 Electron 相关的文章，之前在掘金上写过，但是现在来看那些文章都写得挺粗糙的，所以现在我决定系统整理相关的知识，输出自己更多 Electron 开发相关的经验。这一节我们主要是来认识一下 Electron，这个已经有 10 年历史的跨端开发框架。我将从诞生背景，优劣势，生态，案例以及和其他框架的对比这几个方面带大家来认识 Electron。

Electron 诞生背景

Electron 的背景还是很强劲的，下面我们就来看看它是如何诞生的。

起源

Electron 的前身 Atom Shell，由 GitHub 的开发者在 2013 年创建的，当时 Atom 需要一个能够在桌面环境中运行的跨平台框架，同时能够利用 web 技术构建现代化的用户界面，于是就有了 Electron 的雏形。

需求 & Web 技术的发展

互联网的兴起使得桌面端的需求日益增长，传统的桌面应用开发需要针对每个操作系统（Windows、macOS、Linux）分别编写代码，这增加了开发和维护成本，所以非常需要可以通过一次开发实现多平台支持的框架。

随着 HTML5、CSS3 和 JavaScript 的快速发展，web 技术变得越来越强大和灵活。开发者希望能够利用这些技术构建现代化的用户界面，并且享受 web 开发工具和框架带来的便利。这使得更加需要一款跨端大杀器架来支持开发者，Electron 应运而生。

发展历程

• 2013 年：Atom Shell 诞生，最初用于 GitHub 的 Atom 编辑器。


• 2014 年 2 月：Atom 编辑器对外发布，Atom Shell 作为其核心技术。


• 2015 年 4 月：Atom Shell 更名为 Electron，并作为一个独立项目发布。随着时间的推移，Electron 的功能和社区支持不断增强。


• 2016 年：Electron 的应用开始广泛传播，许多公司和开发者开始使用 Electron 构建跨平台桌面应用。


• 2020 年：Electron 发布 10.0 版本，进一步增强了稳定性和性能。


• 2023 年：Electron 10 周年

更多可以参考：

http://www.electronjs.org/blog/electr…

Electron 优势

Electron 的优势非常的明显，大概总结为下面四个方面。

跨平台支持

Electron 的最大优势在于其跨平台特性。开发者可以编写一次代码，Electron 会处理不同操作系统之间的差异，使应用能够在 Windows、macOS 和 Linux 上无缝运行。

前端技术栈

Electron 应用使用 HTML、CSS 和 JavaScript 构建界面。开发者可以使用流行的前端框架和工具（如 React、Vue.js、Angular）来开发应用，提高开发效率和代码质量。

Node.js 集成

Electron 将 Chromium 和 Node.js 集成在一起，这使得应用不仅可以使用 web 技术构建界面，还可以使用 Node.js 访问底层系统资源，如文件系统、网络、进程等。

强大社区

Electron 拥有丰富的文档、教程、示例和强大的社区支持。开发者可以很容易地找到解决问题的方法和最佳实践，从而加快开发速度。

Electron 劣势

当然，一个东西都有两面性，有优势肯定也有劣势，劣势大概总结为以下几个方面。

性能问题

Electron 应用由于需要运行一个完整的 Chromium 实例，通常会占用较高的内存和 CPU 资源，性能相对较差。这在资源有限的设备上（如老旧计算机）尤为明显。

打包体积大

由于需要包含 Chromium 和 Node.js 运行时，Electron 应用的打包体积较大。一个简单的 Electron 应用的打包体积可能达到几十到上百 MB，这对于一些应用场景来说是不小的负担。

安全性

Electron 应用需要处理 web 技术带来的安全问题，如跨站脚本（XSS）攻击和远程代码执行（RCE）漏洞。开发者需要特别注意安全性，采取适当的防护措施（如使用 contextIsolation、sandbox、Content Security Policy 等）。

生态

上面谈到了 Electron 的优势和劣势，下面我们来看看 Electron 的生态。对于一款开源框架，生态是非常关键的，社区活跃度以及相应的配套工具非常影响框架的生态，如果有众多的开发者支持和维护这个框架，那么它的生态才会越来越好。Electron 的生态依托于 Node.js 发展出了很多很多开源工具，其生态是相当的繁荣。下面可以看看两张图就知道其生态的繁荣之处。

• GitHub 情况

• NPM 情况

下面是一些常见的相关生态工具。

打包和分发工具

• electron-packager：用于将 Electron 应用打包成可执行文件。支持多平台打包，简单易用。


• electron-builder：一个功能强大的打包工具，支持自动更新、多平台打包和安装程序制作。

测试工具

• Spectron：基于 WebDriver，用于 Electron 应用的端到端测试。支持模拟用户操作和验证应用行为。


• electron-mocha：用于在 Electron 环境中运行 Mocha 测试，适合进行单元测试和集成测试。

开发工具

• Electron Forge：一个集成开发工具，简化了 Electron 应用的开发、打包和分发流程。支持脚手架、插件系统和自动更新。


• Electron DevTools：调试和分析 Electron 应用性能的工具，帮助开发者优化应用性能。

案例

用 Electron开发的软件非常多，国内外都有很多知名的软件，有了成功的案例才会吸引更多的开发者使用它，下面是一些举例。

国内

• QQ


• 微信开发者工具


• 百度网盘


• 语雀


• 网易灵犀办公


• 网易云音乐

国外

• Visual Studio Code


• Slack


• Discord


• GitHub Desktop


• Postman


• WhatsApp

其他更多可参考：http://www.electronjs.org/apps

一个小技巧，Mac 电脑检测应用是否是 Electron 框架，在命令行运行如下代码：

for app in /Applications/*; do;[ -d  $app/Contents/Frameworks/Electron\ Framework.framework ] && echo $app; done

和其他跨端框架的对比

一个框架的诞生避免不了与同类型的框架对比，下面是一个对比表格，展示了 Electron 与其他流行的跨端桌面应用开发框架（如 NW.js、Proton Native、Tauri 和 Flutter Desktop）的优缺点和特性：

结语

Electron 是一个强大的跨平台开发框架，其诞生对前端开发者的意义非常大，让很多从事前端的开发者也有机会开发桌面客户端，扩大了前端开发工程师的岗位需求。当然，它不一定是最好的框架，因为适合自己的才是最好的，主要还是看自己的业务场景和技术需要，优势和劣势都是需要考虑的，仁者见仁，智者见智。

AI应用已经渗透到我们生活的方方面面。其中，AI对话系统因其自然、流畅的交流方式而备受瞩目。前段时间有人在交流群中问到，如何实现AI对话中那种逐字输出的效果，这背后，流式返回技术发挥了关键作用。

欢迎加入前端筱园交流群：点击加入交流群

​ 其实这背后并不是前端做了什么特效，而是采用的流式返回，而不是一次性返回完整的响应。流式返回允许服务器在一次连接中逐步发送数据，而不是一次性返回全部结果。这种方式使得前端可以在等待完整响应的过程中，逐步展示生成的内容，从而极大地提升了用户体验。

​ 那么，前端接收流式返回具体有哪些方式呢？接下来，本文将详细探讨几种常见的技术手段，帮助读者更好地理解并应用流式返回技术。

使用 Axios

大多数场景下，前端用的最多的就是axios来发送请求，但是axios 只有在在Node.js环境中支持设置 responseType: 'stream' 来接收流式响应。

const axios = require('axios');

const fs = require('fs');



axios.get('http://localhost:3000/stream', {

    responseType: 'stream', // 设置响应类型为流

})

    .then((response) => {

        // 将响应流写入文件

        response.data.pipe(fs.createWriteStream('output.txt'));

    })

    .catch((error) => {

        console.error('Stream error:', error);

    });

特点

• 仅限 Node.js：浏览器中的 axios 不支持 responseType: 'stream'。


• 适合文件下载：适合处理大文件下载。

使用 WebSocket

WebSocket 是一种全双工通信协议，适合需要双向实时通信的场景。

前端代码：

const socket = new WebSocket('ws://localhost:3000');



socket.onopen = () => {

    console.log('WebSocket connected');

};

socket.onmessage = (event) => {

    console.log('Received data:', event.data);

};

socket.onerror = (error) => {

    console.error('WebSocket error:', error);

};

socket.onclose = () => {

    console.log('WebSocket closed');

};

服务器代码

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 3000 });



wss.on('connection', (ws) => {

    console.log('Client connected');



    let counter = 0;

    const intervalId = setInterval(() => {

        counter++;

        ws.send(JSON.stringify({ message: 'Hello', counter }));



        if (counter >= 5) {

            clearInterval(intervalId);

            ws.close();

        }

    }, 1000);



    ws.on('close', () => {

        console.log('Client disconnected');

        clearInterval(intervalId);

    });

});

虽然WebSocket作为一种在单个TCP连接上进行全双工通信的协议，具有实时双向数据传输的能力，但AI对话情况下可能并不选择它进行通信。主要有以下几点原因：

• 在AI对话场景中，通常是用户向AI模型发送消息，模型回复消息的单向通信模式，WebSocket的双向通信能力在此场景下并未被充分利用


• 使用WebSocket可能会引入不必要的复杂性，如处理双向数据流、管理连接状态等，也会增加额外的部署与维护工作

特点

• 双向通信：适合实时双向数据传输


• 低延迟：基于 TCP 协议，延迟低


• 复杂场景：适合聊天、实时游戏等复杂场景

使用 XMLHttpRequest

虽然 XMLHttpRequest 不能直接支持流式返回，但可以通过监听 progress 事件模拟逐块接收数据

const xhr = new XMLHttpRequest();

xhr.open('GET', '/stream', true);



xhr.onprogress = (event) => {

    const chunk = xhr.responseText; // 获取当前接收到的数据

    console.log(chunk);

};



xhr.onload = () => {

    console.log('Request complete');

};



xhr.send();

服务器代码（Koa 示例）：

router.get("/XMLHttpRequest", async (ctx, next) => {

    ctx.set({

        "Content-Type": "text/event-stream",

        "Cache-Control": "no-cache",

        Connection: "keep-alive",

    });

    // 创建一个 PassThrough 流

    const stream = new PassThrough();

    ctx.body = stream;

    let counter = 0;

    const intervalId = setInterval(() => {

        counter++;

        ctx.res.write(

            JSON.stringify({ message: "Hello", counter })

        );



        if (counter >= 5) {

            clearInterval(intervalId);

            ctx.res.end();

        }

    }, 1000);



    ctx.req.on("close", () => {

        clearInterval(intervalId);

        ctx.res.end();

    });

});

可以看到以下的输出结果，在onprogress中每次可以拿到当前已经接收到的数据。它并不支持真正的流式响应，用于AI对话场景中，每次都需要将以显示的内容全部替换，或者需要做一些额外的处理。

如果想提前终止请求，可以使用 xhr.abort() 方法；

setTimeout(() => {

    xhr.abort();

}, 3000);

特点

• 兼容性好：支持所有浏览器。


• 非真正流式：XMLHttpRequest 仍然需要等待整个响应完成，progress 事件只是提供了部分数据的访问能力。


• 内存占用高：不适合处理大文件。

使用 Server-Sent Events (SSE)

SSE 是一种服务器向客户端推送事件的协议，基于 HTTP 长连接。它适合服务器向客户端单向推送实时数据

前端代码：

const eventSource = new EventSource('/sse');



eventSource.onmessage = (event) => {

    console.log('Received data:', event.data);

};



eventSource.onerror = (event) => {

    console.error('EventSource failed:', event);

};

服务器代码（Koa 示例）：

router.get('/sse', (ctx) => {

    ctx.set({

        'Content-Type': 'text/event-stream',

        'Cache-Control': 'no-cache',

        'Connection': 'keep-alive',

    });



    let counter = 0;

    const intervalId = setInterval(() => {

        counter++;

        ctx.res.write(`data: ${JSON.stringify({ message: 'Hello', counter })}\n\n`);



        if (counter >= 5) {

            clearInterval(intervalId);

            ctx.res.end();

        }

    }, 1000);



    ctx.req.on('close', () => {

        clearInterval(intervalId);

        ctx.res.end();

    });

});

EventSource 也具有主动关闭请求的能力，在结果没有完全返回前，用户可以提前终止内容的返回。

// 在需要时中止请求

setTimeout(() => {

    eventSource.close(); // 主动关闭请求

}, 3000); // 3 秒后中止请求

虽然EventSource支持流式请求，但AI对话场景不使用它有以下几点原因：

• 单向通信


• 仅支持 get 请求：在 AI 对话场景中，通常需要发送用户输入（如文本、文件等），这需要使用 POST 请求


• 无法自定义请求头：EventSource 不支持自定义请求头（如 Authorization、Content-Type 等），在 AI 对话场景中，通常需要设置认证信息（如 API 密钥）或指定请求内容类型

注意点

返回给 EventSource 的值必须遵循 data: 开头并以 \n\n 结尾的格式，这是因为 Server-Sent Events (SSE) 协议规定了这种格式。SSE 是一种基于 HTTP 的轻量级协议，用于服务器向客户端推送事件。为了确保客户端能够正确解析服务器发送的数据，SSE 协议定义了一套严格的格式规范。SSE 协议规定，服务器发送的每条消息必须遵循以下格式：

field: value\n

其中 field 是字段名，value 是对应的值。常见的字段包括：

• data:：消息的内容（必须）。


• event:：事件类型（可选）。


• id:：消息的唯一标识符（可选）。


• retry:：客户端重连的时间间隔（可选）。

每条消息必须以 两个换行符 (\n\n) 结尾，表示消息结束

以下是一个完整的 SSE 消息示例：

id: 1\n

event: update\n

data: {"message": "Hello", "counter": 1}\n\n

特点

• 单向通信：适合服务器向客户端推送数据。


• 简单易用：基于 HTTP 协议，无需额外协议支持。


• 自动重连：EventSource 会自动处理连接断开和重连

使用 fetch API

fetch API 是现代浏览器提供的原生方法，支持流式响应。通过 response.body，可以获取一个 ReadableStream，然后逐块读取数据。

前端代码：

// 发送流式请求

fetch("http://localhost:3000/stream/fetch", {

    method: "POST",

    signal,

})

    .then(async (response: any) => {

        const reader = response.body.getReader();

        while (true) {

            const { done, value } = await reader.read();

            if (done) break;

            console.log(new TextDecoder().decode(value));

        }

    })

    .catch((error) => {

        console.error("Fetch error:", error);

    });

服务器代码（Koa 示例）：

router.post("/fetch", async (ctx) => {

    ctx.set({

        "Content-Type": "text/event-stream",

        "Cache-Control": "no-cache",

        Connection: "keep-alive",

    });

    // 创建一个 PassThrough 流

    const stream = new PassThrough();

    ctx.body = stream;

    let counter = 0;

    const intervalId = setInterval(() => {

        counter++;

        ctx.res.write(JSON.stringify({ message: "Hello", counter }));



        if (counter >= 5) {

            clearInterval(intervalId);

            ctx.res.end();

        }

    }, 1000);



    ctx.req.on("close", () => {

        clearInterval(intervalId);

        ctx.res.end();

    });

});

fetch也同样可以在客户端主动关闭请求。

// 创建一个 AbortController 实例

const controller = new AbortController();

const { signal } = controller;

// 发送流式请求

fetch("http://localhost:3000/stream/fetch", {

    method: "POST",

    signal,

})

    .then(async (response: any) => {

        const reader = response.body.getReader();

        while (true) {

            const { done, value } = await reader.read();

            if (done) break;

            console.log(new TextDecoder().decode(value));

        }

    })

    .catch((error) => {

        console.error("Fetch error:", error);

    });



// 在需要时中止请求

setTimeout(() => {

    controller.abort(); // 主动关闭请求

}, 3000); // 3 秒后中止请求

打开控制台，可以看到在Response中可以看到返回的全部数据，在EventStream中没有任何内容。

这是由于返回的信息SSE协议规范，具体规范见上文的 Server-Sent Events 模块中有介绍到

ctx.res.write(

    `data: ${JSON.stringify({ message: "Hello", counter })}\n\n`

);

但是客户端fetch请求中接收到的数据也包含了规范中的内容，需要前端对数据进一步的处理一下

特点

• 原生支持：现代浏览器均支持 fetch 和 ReadableStream。


• 逐块处理：可以实时处理每个数据块，而不需要等待整个响应完成。


• 内存效率高：适合处理大文件或实时数据。

总结

综上所述，在 AI 对话场景中，fetch 请求 是主流的技术选择，而不是 XMLHttpRequest 或 EventSource。以下是原因和详细分析：

• fetch 是现代浏览器提供的原生 API，基于 Promise，代码更简洁、易读


• fetch 支持 ReadableStream，可以实现流式请求和响应


• fetch 支持自定义请求头、请求方法（GET、POST 等）和请求体


• fetch 结合 AbortController 可以方便地中止请求


• fetch 的响应对象提供了 response.ok 和 response.status，可以更方便地处理错误

最后来看一个接入deekseek的完整例子：

resource.dengzhanyong.com/mp4/7823928…

服务器代码（Koa 示例）：

const openai = new OpenAI({

    baseURL: "https://api.deepseek.com",

    apiKey: "这里是你申请的deepseek的apiKey",

});





// 流式请求 DeepSeek 接口并流式返回

router.post("/fetchStream", async (ctx) => {

    // 设置响应头

    ctx.set({

        "Content-Type": "text/event-stream",

        "Cache-Control": "no-cache",

        Connection: "keep-alive",

    });



    try {

        // 创建一个 PassThrough 流

        const stream = new PassThrough();

        ctx.body = stream;



        // 调用 OpenAI API，启用流式输出

        const completion = await openai.chat.completions.create({

            model: "deepseek-chat", // 或 'gpt-3.5-turbo'

            messages: [{ role: "user", content: "请用 100 字介绍 OpenAI" }],

            stream: true, // 启用流式输出

        });

        // 逐块处理流式数据

        for await (const chunk of completion) {

            const content = chunk.choices[0]?.delta?.content || ""; // 获取当前块的内容

            ctx.res.write(content);

            process.stdout.write(content); // 将内容输出到控制台

        }

        ctx.res.end();

    } catch (err) {

        console.error("Request failed:", err);

        ctx.status = 500;

        ctx.res.write({ error: "Failed to stream data" });

    }

});

前端代码：

const controller = new AbortController();

const { signal } = controller;

const Chat = () => {

    const [text, setText] = useState<string>("");

    const [message, setMessage] = useState<string>("");

    const [loading, setLoading] = useState<boolean>(false);



    function send() {

        if (!message) return;

        setText(""); // 创建一个 AbortController 实例

        setLoading(true);



        // 发送流式请求

        fetch("http://localhost:3000/deepseek/fetchStream", {

            method: "POST",

            headers: {

                "Content-Type": "application/json",

            },

            body: JSON.stringify({

                message,

            }),

            signal,

        })

            .then(async (response: any) => {

                const reader = response.body.getReader();

                while (true) {

                    const { done, value } = await reader.read();

                    if (done) break;

                    const data = new TextDecoder().decode(value);

                    console.log(data);

                    setText((t) => t + data);

                }

            })

            .catch((error) => {

                console.error("Fetch error:", error);

            })

            .finally(() => {

                setLoading(false);

            });

    }



    function stop() {

        controller.abort();

        setLoading(false);

    }



    return (

        <div>

            <Input

                value={message}

                onChange={(e) => setMessage(e.target.value)}

            />

            <Button

                onClick={send}

                type="primary"

                loading={loading}

                disabled={loading}

            >

                发送

            </Button>

            <Button onClick={stop} danger>

                停止回答

            </Button>

            <div>{text}</div>

        </div>

    );

};

写在最后

欢迎加入前端筱园交流群：点击加入交流群

关注我的公众号【前端筱园】，不错过每一篇推送

electron+node-serialport串口通信

公司项目需求给客户开发一个能与电子秤硬件通信的Win7客户端，提供数据读取、处理和显示功能。项目为了兼容win7使用了electron 22.0.0版本,串口通信使用了serialport 12.0.0版本

serialport文档 electron文档

 //serialport的基本使用方法

 //安装 npm i serialport

 import { SerialPort } from 'serialport'

 SerialPort.list()//获取串口列表

 /** 创建一个串口连接

     path（必需）：串口设备的路径。例如，'/dev/robot' 或 'COM1'。

     baudRate（必需）：波特率，即每秒传输的比特数。常见值有 9600、19200、38400、57600、115200 等。

     autoOpen（可选）：是否在创建对象时自动打开串口。默认为 true。如果设置为 false，你需要手动调用 port.open() 来打开串口。

     dataBits（可选）：每字节的数据位数。可以是 5、6、7、8。默认值是 8。

     stopBits（可选）：停止位的位数。可以是 1 或 2。默认值是 1。

     parity（可选）：校验位类型。可以是 'none'、'even'、'odd'、'mark'、'space'。默认值是 'none'。

     rtscts（可选）：是否启用硬件流控制（RTS/CTS）。布尔值，默认值是 false。

     xon（可选）：是否启用软件流控制（XON）。布尔值，默认值是 false。

     xoff（可选）：是否启用软件流控制（XOFF）。布尔值，默认值是 false。

     xany（可选）：是否启用软件流控制（XANY）。布尔值，默认值是 false。

     highWaterMark（可选）：用于流控制的高水位标记。默认值是 16384（16KB）。

     lock（可选）：是否锁定设备文件，防止其他进程访问。布尔值，默认值是 true。

 **/

 const serialport = new SerialPort({ path: '/dev/example', baudRate: 9600 })

 

 serialport.open()//打开串口

 serialport.write('ROBOT POWER ON')//向串口发送数据

 serialport.on('data', (data) => {//接收数据

    //data为串口接收到的数据

 })

获取串口列表

 //主进程main.ts

 import { SerialPort, SerialPortOpenOptions } from 'serialport'

 //初始化先获取串口列表,提供给页面选择

 ipcMain.on('initData', async () => {

   const portList = await SerialPort.list()

   mainWindow.webContents.send('initData', {portList})

 })

 //渲染进程

 window.electron.ipcRenderer.once('initData', (_,{portList}) => {

   //获取串口列表后存入本地,登录页直接做弹窗给客户选择串口,配置波特率

   window.localStorage.setItem('portList', JSON.stringify(portList))

 })

串口选择

波特率配置

读取数据

公司秤和客户的秤串口配置不一样,所以做了model1和model2区分

 //主进程main.ts

 let P: SerialPort | undefined

 ipcMain.on('beginSerialPort', (_, { path, baudRate }) => {

   //区分配置

   const portConfig: SerialPortOpenOptions<AutoDetectTypes> =

     import.meta.env.VITE_MODE == 'model1'

       ? {

           path: path || 'COM1',

           baudRate: +baudRate || 9600, //波特率

           autoOpen: true,

           dataBits: 8

         }

       : {

           path: path || 'COM1',

           baudRate: +baudRate || 115200, //波特率

           autoOpen: true,

           dataBits: 8,

           stopBits: 1,

           parity: undefined

         }

   if (P) {

     P.close((error) => {

       if (error) {

         console.log('关闭失败：', error)

       } else {

         P = new SerialPort(portConfig)

         P?.write('SIR\r\n', 'ascii')//告诉秤端开始发送信息,具体看每个秤的配置,有的不需要

         P.on('data', (data) => {

           //接收到的data为Buffer类型,直接转为字符串就可以使用了

           mainWindow.webContents.send('readingData', data.toString())

         })

       }

     })

   } else {

     P = new SerialPort(portConfig)

     P?.write('SIR\r\n', 'ascii')

     P.on('data', (data) => {

       mainWindow.webContents.send('readingData', data.toString())

     })

   }

 })

解析数据

 <!--渲染进程解析数据-->

 <template>

   <div class="weight-con">

     <div class="weight-con-main">

       <div>

         <el-text class="wei-title" type="primary">毛<br />重</el-text>

       </div>

       <div class="weight-panel">

         <el-text id="wei-num">{{ weightNum!.toFixed(2) }}</el-text>

         <div class="weight-con-footer">当前最大称重：600公斤</div>

       </div>

       <div>

         <el-text class="wei-title" type="primary">公<br />斤</el-text>

       </div>

     </div>

   </div>

 </template>

 ​

 <script setup lang="ts">

 import { weightModel } from '@/utils/WeightReader'

 const emits = defineEmits(['zeroChange'])

 const weightNum = defineModel<number>()

 window.electron.ipcRenderer.on('readingData', (_, data: string) => {

   //渲染进程接收到主进程数据,根据环境变量解析数据

   weightNum.value = weightModel[import.meta.env.VITE_MODE](data)

   if (weightNum.value == 0) {

     emits('zeroChange')

   }

 })

 </script>

 //weightReader.ts 解析配置

 export type Mode = 'model1' | 'model2'

 let str = ''

 export const weightModel = {

   model1: (weightStr: string) => {

     const rev = weightStr.split('').reverse().join('')

     return +rev.replace('=', '')

   },

   module2: (weightStr: string) => {

     str += weightStr

     if (str.match(/S\s+[A-Za-z]\s*(-?\d*.?\d+)\s*kg/g)) {

       const num = str.match(/S\s+[A-Za-z]\s*(-?\d*.?\d+)\s*kg/m)![1]

       str = ''

       return Number(num)

     } else {

       return 0

     }

   }

 }

完活~下班!

相信大家都跟我一样有这样一个疑问：之前都说虚拟DOM是为了性能，怎么现在又反向宣传了？无虚拟DOM怎么又逆流而上成为了性能的标杆了呢？

下篇文章我们会仔细分析无虚拟DOM与虚拟DOM之间的区别，本篇文章我们先看数据。首先是体积，由于没有了虚拟DOM以及vDOM diff算法，所以体积肯定能小不少。当然不是说无虚拟DOM就彻底不需要diff算法了，我看过同为无虚拟DOM框架的Svelte和Solid源码，无虚拟DOM只是不需要vDOM间的Diff算法，列表之间还是需要diff的。毕竟再怎么编译，你从后端获取到的数组，编译器也不可能预测得到。

那么官方给出的数据是：

虽然没有想象中的那么多，但33.6%也算是小不少了。当然这个数据指的是纯Vapor模式，如果你把虚拟DOM和Vapor混着用的话，体积不仅不会减小反而还会增加。毕竟会同时加载Vapor模式的runtime和虚拟DOM模式的runtime，二者一相加就大了。

Vapor模式指的就是无虚拟DOM模式，如果你不太清楚二者之间有何关联的话，可以看一眼这篇：《无虚拟DOM版Vue为什么叫Vapor》

那性能呢？很多人对体积其实并不敏感，觉得多10K少10k都无所谓，毕竟现在都是5G时代了。所以我们就来看一眼官方公布的性能数据：

从左到右依次为：

• 原生JS：1.01


• Solid：1.09


• Svelte：1.11


• 无虚拟DOM版Vue：1.24


• 虚拟DOM版Vue：1.32


• React：1.55

数字越小代表性能越高，但无论再怎么高都不可能高的过手动优化过的原生JS，毕竟无论什么框架最终打包编译出来的还是JS。不过框架的性能其实已经挺接近原生的了，尤其是以无虚拟DOM著称的Solid和Svelte。但无虚拟DOM版Vue和虚拟DOM版Vue之间并没有拉开什么很大的差距，1.24和1.32这两个数字证明了其实二者的性能差距并不明显，这又是怎么一回事呢？

一个原因是Vue3本来就做了许多编译优化，包括但不限于静态提升、大段静态片段将采用innerHTML渲染、编译时打标记以帮助虚拟DOM走捷径等… 由于本来的性能就已经不错了，所以可提升的空间自然也没多少。

看完上述原因肯定有人会说：可提升的空间没多少可以理解，那为什么还比同为无虚拟DOM的Solid和Svelte差那么多？如果Vapor和Solid性能差不多的话，那可提升空间小倒是说得过去。但要是像现在这样差的还挺多的话，那这个理由是不是就有点站不住脚了？之所以会出现这样的情况是因为Vue Vapor的作者在性能优化和快速实现之间选择了后者，毕竟尤雨溪第一次公布要开始做无虚拟DOM版Vue的时间是在2020年：

而如今已经是2025年了。也就是说如果一个大一新生第一次满心欢喜的听到无虚拟DOM版Vue的消息后，那么他现在大概率已经开始毕业工作了都没能等到无虚拟DOM版Vue的发布。这个时间拖的有点太长了，甚至从Vue2到Vue3都没用这么久。

可以看到Vue3从立项到发布也就不到两年的时间，而Vapor呢？从立项到现在已经将近5年的光阴了，已经比Vue3所花费的时间多出一倍还多了。所以现在的首要目标是先实现出来一版能用的，后面再慢慢进行优化。我们工作不也是这样么？先优先把功能做出来，优化的事以后再说。那么具体该怎么优化呢：

现在的很多渲染逻辑继承自原版Vue3，但无虚拟DOM版Vue可以采用更优的渲染逻辑。而且现在的Vapor是跟着原版Vue的测试集来做的，这也是为了实现和原版Vue一样的行为。但这可能并不是最优解，之后会慢慢去掉一些不必要的功能，尤其是对性能产生较大影响的功能。

往期精彩文章：

• 《尤雨溪：从Vue1到Vue3.6》


• 《无虚拟DOM版Vue为什么叫Vapor？》

先弄清楚leaflet和天地图充当的角色

• leaflet是用来在绘制、交互地图的


• 天地图是纯粹用来当个底图的，相当于在leaflet中底部的一个图层而已


• 进行Marker打点、geojson绘制等操作都是使用leaflet实现

1. 使用天地图当底图

• 在token处填自己的token


• 我这里用的是天地图的影像底图，如果需要可自行更换或添加底图


• 天地图底图网址：lbs.tianditu.gov.cn/server/MapS…


• 只用替换我代码里的天地图链接里的http://{s}.tianditu.com/img_c/里的img_c为我图中圈起来的编号，其他不用动

const token = "填自己的天地图token";

// 底图

const VEC_C ="http://{s}.tianditu.com/img_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";

// 文字标注

// const CVA_C = "http://{s}.tianditu.com/cia_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";

let map = L.map("map", {

  minZoom: 3,

  maxZoom: 17,

  center: [34.33213, 109.00945],

  zoomSnap: 0.1,

  zoom: 3.5,

  zoomControl: false,

  attributionControl: false,

  crs: L.CRS.EPSG4326,

});

L.tileLayer(VEC_C + token, {

  zoomOffset: 1,

  subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],

  opacity: 0.2,

}).addTo(map);

// 添加文字标注

// L.tileLayer(CVA_C + token, {

//   tileSize: 256,

//   zoomOffset: 1,

//   subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],

// }).addTo(map);

2. 绘制中国地图geojson

• 这里我需要国的边界和省的边界线颜色不一样，所以用了一个国的geojson和另一个包含省的geojson叠加来实现


• 获取geojson数据网站：datav.aliyun.com/portal/scho…

L.geoJson(sheng, {

 style: {

    color: "#0c9fb8",

    weight: 1,

    fillColor: "#028297",

    fillOpacity: 0.1,

  },

}).addTo(map);

L.geoJson(guo, {

  style: {

    color: "#b8c3c8",

    weight: 2,

    fillOpacity: 0,

  },

}).addTo(map);

3. 更换背景主题色

我的实现思路比较简单粗暴，直接给天地图的图层设置透明度，对div元素设置背景色，如果UI配合，可以叫UI给个遮罩层的背景图，比如我这里就是用了四周有黑边渐变阴影，中间是透明的背景图。

<div id="map"></div>

<div class="mask"></div>



#map {

  height: 100vh;

  width: 100vw;

  background: #082941;

  z-index: 2;

}



.mask {

  width: 100%;

  height: 100%;

  position: absolute;

  left: 0;

  top: 0;

  background: url("./mask.png") no-repeat;

  background-size: 100% 100%;

  z-index: 1;

}

4. 完整代码

• 写自己天地图的token


• 自己下载geojson文件


• 自己看需要搞个遮罩层背景图，不需要就注释掉mask

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

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

    <title>Document</title>

    <link

      href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.9.4/leaflet.css"

      rel="stylesheet"

    />

  </head>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    #map {

      height: 100vh;

      width: 100vw;

      background: #082941;

      z-index: 2;

    }



    .mask {

      width: 100%;

      height: 100%;

      position: absolute;

      left: 0;

      top: 0;

      background: url("./mask.png") no-repeat;

      background-size: 100% 100%;

      z-index: 1;

    }

  </style>

  <body>

    <div id="map"></div>

    <div class="mask"></div>

  </body>

  <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.9.4/leaflet.js"></script>

  <script src="./china.js"></script>

  <script src="./guo.js"></script>



  <script>

    const token = "写自己天地图的token";

    // 底图

    const VEC_C =

      "http://{s}.tianditu.com/img_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";

    //   文字标注

    // const CVA_C =

    //   "http://{s}.tianditu.com/cia_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";



    let map = L.map("map", {

      minZoom: 3,

      maxZoom: 17,

      center: [34.33213, 109.00945],

      zoomSnap: 0.1,

      zoom: 3.5,

      zoomControl: false,

      attributionControl: false, //版权控制器

      crs: L.CRS.EPSG4326,

    });

    L.tileLayer(VEC_C + token, {

      zoomOffset: 1,

      subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],

      opacity: 0.2,

    }).addTo(map);

    // L.tileLayer(CVA_C + token, {

    //   tileSize: 256,

    //   zoomOffset: 1,

    //   subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],

    // }).addTo(map);



    L.geoJson(sheng, {

      style: {

        color: "#0c9fb8",

        weight: 1,

        fillColor: "#028297",

        fillOpacity: 0.1,

      },

    }).addTo(map);

    L.geoJson(guo, {

      style: {

        color: "#b8c3c8",

        weight: 2,

        fillOpacity: 0,

      },

    }).addTo(map);

  </script>

</html>

说在前面

最近实现了一个b站插件，可以通过语音来控制播放页面上指定的视频，在语音识别的过程中遇到了需要将中文数字转为阿拉伯数字的情况，在这里分享一下具体事例和处理过程。

功能背景

先介绍一下功能背景，页面渲染的时候会先对视频进行编号处理，具体如下：

比如我们想要播放第4个视频的话，我们只需要说“第4个”，插件就能帮我们选择第四个视频进行播放。

问题描述

功能背景我们已经了解了，那么问题是出在哪里呢？

如上图，这里识别出来的语音文本数字是中文数字，这样跟页面的视频编号无法对应上，因此我们需要实现一个方法来将中文转为阿拉伯数字。

方法实现

1、个位级映射表

const numMap = {

  零: 0,一: 1,壹: 1,二: 2,两: 2,

  三: 3,叁: 3,四: 4,肆: 4,五: 5,

  伍: 5,六: 6,陆: 6,七: 7,柒: 7,

  八: 8,捌: 8,九: 9,玖: 9,

};

2、单位映射表

const unitMap = {

  十: { value: 10, sec: false },

  拾: { value: 10, sec: false },

  百: { value: 100, sec: false },

  佰: { value: 100, sec: false },

  千: { value: 1000, sec: false },

  仟: { value: 1000, sec: false },

  万: { value: 10000, sec: true },

  萬: { value: 10000, sec: true },

  亿: { value: 100000000, sec: true },

  億: { value: 100000000, sec: true }

};

3、处理流程

• 遇到数字：先存起来（比如「三」记作3）

if (hasZero && current > 0) {

  current *= 10;

  hasZero = false;

}

current += numMap[char];

• 遇到单位：
  
  
  
  
  • 如果是十/百/千：把存着的数字乘上倍数
    （如「三百」→3×100=300）
  
  
  
  

  current = current === 0 ? unit.value : current * unit.value;
  
  section += current;
  
  current = 0;
  
  

  
  
  
  
  • 遇到万/亿：先结算当前数字，将当前数字加到总数上
  
  
  
  

  processSection();
  
  section = (section + current) * unit.value;
  
  total += section;
  
  section = 0;
  
  

  
  


• 遇到零：做个标记，提醒下个数字要占位
  （如「三百零五」→300 + 0 +5=305）

if (char === "零") {

  hasZero = true;

  continue;

}

4、完整代码

function chineseToArabic(chineseStr) {

  // 映射表（支持简繁）

  const numMap = {

    零: 0,一: 1,壹: 1,二: 2,两: 2,

    三: 3,叁: 3,四: 4,肆: 4,五: 5,

    伍: 5,六: 6,陆: 6,七: 7,柒: 7,

    八: 8,捌: 8,九: 9,玖: 9,

  };

  //单位映射表

  const unitMap = {

    十: { value: 10, sec: false },

    拾: { value: 10, sec: false },

    百: { value: 100, sec: false },

    佰: { value: 100, sec: false },

    千: { value: 1000, sec: false },

    仟: { value: 1000, sec: false },

    万: { value: 10000, sec: true },

    萬: { value: 10000, sec: true },

    亿: { value: 100000000, sec: true },

    億: { value: 100000000, sec: true }

  };



  let total = 0; // 最终结果

  let section = 0; // 当前小节

  let current = 0; // 当前累加值

  let hasZero = false; // 零标记



  const processSection = () => {

    section += current;

    current = 0;

  };



  for (const char of chineseStr) {

    if (numMap.hasOwnProperty(char)) {

      if (char === "零") {

        hasZero = true;

        continue;

      }



      if (hasZero && current > 0) {

        current *= 10;

        hasZero = false;

      }

      current += numMap[char];

    } else if (unitMap.hasOwnProperty(char)) {

      const unit = unitMap[char];



      if (unit.sec) {

        // 处理万/亿分段

        processSection();

        section = (section + current) * unit.value;

        total += section;

        section = 0;

      } else {

        current = current === 0 ? unit.value : current * unit.value;

        section += current;

        current = 0;

      }

      hasZero = false;

    }

  }



  const last2 = chineseStr.slice(-2)[0];

  const last2Unit = unitMap[last2];

  if (last2Unit) {

    current = (current * last2Unit.value) / 10;

  }

  return total + section + current;

}

功能测试

柒億零捌拾萬

十萬三十

十萬三

二百五

二百零五

八

插件信息

对我上述提到的插件感兴趣的同学可以看下我前面发的这篇文章：

juejin.cn/post/748557…

公众号

关注公众号『 前端也能这么有趣 』，获取更多有趣内容。

发送 加群 还可以加入群聊，一起来学习（摸鱼）吧~

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。

npx 和 npm 是 Node.js 生态中两个密切相关的工具，但它们的功能和用途有显著区别：

1. npm（Node Package Manager）

• 定位：Node.js 的包管理工具，用于安装、管理和发布 JavaScript 包。


• 核心功能：
  
  
  
  • 安装依赖：通过 npm install <package> 安装包到本地或全局。
  
  
  • 管理项目依赖：通过 package.json 文件记录依赖版本。
  
  
  • 运行脚本：通过 npm run <script> 执行 package.json 中定义的脚本。
  
  
  • 发布包：通过 npm publish 将代码发布到 npm 仓库。
  
  
  
  


• 示例：
  

  npm install lodash         # 安装 lodash 到本地 node_modules
  
  npm install -g typescript  # 全局安装 TypeScript
  
  npm run start              # 运行 package.json 中的 "start" 脚本
  
  

  
  

2. npx（Node Package Executor）

• 定位：npm 的配套工具，用于直接执行包中的命令，无需全局或本地安装。


• 核心功能：
  
  
  
  • 临时执行包：自动下载远程包并运行，完成后删除。
  
  
  • 运行本地已安装的包：直接调用本地 node_modules/.bin 中的命令。
  
  
  • 切换包版本：指定特定版本运行（如 npx node@14 myscript.js）。
  
  
  
  


• 示例：
  

  npx create-react-app my-app  # 临时下载并运行 create-react-app
  
  npx eslint .                # 运行本地安装的 eslint
  
  npx http-server             # 启动一个临时 HTTP 服务器
  
  

  
  

关键区别

为什么需要 npx？

使用建议

• 用 npm：
  
  管理项目依赖、定义脚本、发布包。


• 用 npx：
  
  运行脚手架工具（如 create-react-app）、临时工具（如 http-server）或本地已安装的命令。

示例场景

# 使用 npm 安装依赖

npm install axios



# 使用 npx 运行一次性工具

npx json-server db.json  # 临时启动一个 REST API 服务器



# 使用 npm 运行脚本（需在 package.json 中定义 "scripts"）

npm run build



# 使用 npx 调用本地已安装的包

npx webpack --config webpack.config.js

通过合理使用 npm 和 npx，可以更高效地管理依赖和执行命令。

1. 官方真的不推荐 Enum 了吗？

1.1 事情的起因

起因是看到 科技爱好者周刊（第 340 期） 里面推荐了一篇文章，说是官方不再推荐使用 enum 语法，原文链接在 An ode to TypeScript enums，大致是说 TS 新出了一个 --erasableSyntaxOnly 配置，只允许使用可擦除语法，但是 enum 不可擦除，因此推断官方已不再推荐使用 enum 了。官方并没有直接表达不推荐使用，那官方为什么要出这个配置项呢？

1.2 什么是可擦除语法

就在上周，TypeScript 发布了 5.8 版本，其中有一个改动是添加了 --erasableSyntaxOnly 配置选项，开启后仅允许使用可擦除语法，否则会报错。enum 就是一个不可擦除语法，开启 erasableSyntaxOnly 配置后，使用 enum 会报错。

例如，如果在 tsconfig 文件中配置 "erasableSyntaxOnly": true（只允许可擦除语法），此时使用不可擦除语法，将会得到报错：

可擦除语法就是可以直接去掉的、仅在编译时存在、不会生成额外运行时代码的语法，例如 type，interface。不可擦除语法就是不能直接去掉的、需要编译为JS且会生成额外运行时代码的语法，例如 enum，namesapce(with runtime code)。 具体举例如下：

可擦除语法，不生成额外运行时代码，比如 type、let n: number、interface、as number 等：

不可擦除语法，生成额外运行时代码，比如 enum、namespace（具有运行时行为的）、类属性参数构造语法糖（Class Parameter properties）等：

// 枚举类型

enum METHOD {

  ADD = 'add'

}



// 类属性参数构造

class A {

  constructor(public x: number) {}

}

let a: number = 1

console.log(a)

需要注意，具有运行时行为的 namespace 才属于不可擦除语法。

// 不可擦除，具有运行时逻辑

namespace MathUtils {

  export function add(a: number, b: number): number {

    return a + b;

  }

}



// 可擦除，仅用于类型声明，不包含任何运行时逻辑

namespace Shapes {

  export interface Rectangle {

    width: number;

    height: number;

  }

}

1.3 TS 官方为什么要出 erasableSyntaxOnly？

官方既然没有直接表达不推荐 enum，那为什么要出 erasableSyntaxOnly 配置来排除 enum 呢？

我找到了 TS 官方文档（The --erasableSyntaxOnly Option）说明：

大致意思是说之前 Node 新版本中支持了执行 TS 代码的能力，可以直接运行包含可擦除语法的 TypeScript 文件。Node 将用空格替换 TypeScript 语法，并且不执行类型检查。总结下来就是：

在 Node 22 版本：

• 需要配置 --experimental-transform-types 执行支持 TS 文件


• 要禁用 Node 这种特性，使用参数 --no-experimental-strip-types

在 Node 23.6.0 版本：

• 默认支持直接运行可擦除语法的 TS 文件，删除参数 --no-experimental-strip-types


• 对于不可擦除语法，使用参数 --experimental-transform-types

综上所述，TS 官方为了配合 Node.js 这次改动（即默认允许直接执行不可擦除语法的 TS 代码），才添加了一个配置项 erasableSyntaxOnly，只允许可擦除语法。

2. Enum 的三大罪行

自 Enum 从诞生以来，它一直是前端界最具争议的特性之一，许多前端开发者乃至不少大佬都对其颇有微词，纷纷发起了 DO NOT USE TypeScript Enum 的吐槽。那么enum 真的有那么难用吗？我认为是的，这玩意坑还挺多的，甲级战犯 Enum，出列！

2.1 枚举默认值

enum 默认的枚举值从 0 开始，这还不是最关键的，你传入了默认枚举值时，居然是合法的，这无形之中带来了类型安全问题。

enum METHOD {

    ADD

}



function doAction(method: METHOD) {

  // some code

}



doAction(METHOD.ADD) // ✅ 可以

doAction(0) // ✅ 可以

2.2 不支持枚举值字面量

还有一种场景，我要求既可以传入枚举类型，又要求传入枚举值字面量，如下所示，但是他又不合法了？（有人说你定义传枚举类型就要传相应的枚举，这没问题，但是上面提到的问题又是怎么回事呢？这何尝不是 Enum 的双标？）

enum METHOD {

    ADD = 'add'

}



function doAction(method: METHOD) {

  // some code

}



doAction(METHOD.ADD) // ✅ 可以

doAction('add') // ❌ 不行	

2.3 增加运行时开销

TypeScript 的 enum 在编译后会生成额外的 JavaScript 双向映射数据，这会增加运行时的开销。

3. Enum 的替代方案

众所周知，TS 一大特性是类型变换，我们可以通过类型操作组合不同类型来达到目标类型，又称为类型体操。下面的四种解决方案，可以根据实际需求来选择。

3.1 const enum

const enum 是解决产生额外生成的代码和额外的间接成本有效且快捷的方法，但不推荐使用。

const enum 由于编译时内联带来了性能优化，但在 .d.ts 文件、isolatedModules 兼容性、版本不匹配及运行时缺少 .js 文件等场景下存在隐藏陷阱，可能导致难以发现的 bug。详见官方说明：const-enum-pitfalls

const enum METHOD {

  ADD = 'add',

  DELETE = 'delete',

  UPDATE = 'update',

  QUERY = 'query',

}



function doAction(method: METHOD) {

    // some code

}



doAction(METHOD.ADD) // ✅ 可行

doAction('delete') // ❌ 不行

const enum 解析后的代码中引用 enum 的地方将直接被替换为对应的枚举值：

3.2 模板字面量类型

将枚举类型包装为模板字面量类型（Template Literal Types），从而即支持枚举类型，又支持枚举值字面量，但是没有解决运行时开销问题。

enum METHOD {

  ADD = 'add',

  DELETE = 'delete',

  UPDATE = 'update',

  QUERY = 'query',

}



type METHOD_STRING = `${METHOD}`



function doAction(method: METHOD_STRING) {

    // some code

}



doAction(METHOD.ADD) // ✅ 可行

doAction('delete') // ✅ 可行

doAction('remove') // ❌ 不行

3.3 联合类型（Union Types）

使用联合类型，引用时可匹配的值限定为指定的枚举值了，但同时也没有一个地方可以统一维护枚举值，如果一旦枚举值有调整，其他地方都需要改。

type METHOD =

  | 'add'

  /**

   * @deprecated 不再支持删除

   */

  | 'delete'

  | 'update'

  | 'query'





function doAction(method: METHOD) {

    // some code

}



doAction('delete') // ✅ 可行，没有 TSDoc 提示

doAction('remove') // ❌ 不行

3.4 类型字面量 + as const（推荐）

类型字面量就是一个对象，将一个对象断言（Type Assertion）为一个 const，此时这个对象的类型就是对象字面量类型，然后通过类型变换，达到即可以传入枚举值，又可以传入枚举类型的目的。

const METHOD = {

  ADD:'add',

  /**

  * @deprecated 不再支持删除

  */

  DELETE:'delete',

  UPDATE: 'update',

  QUERY: 'query'

} as const



type METHOD_TYPE = typeof METHOD[keyof typeof METHOD]



function doAction(method: METHOD_TYPE) {

  // some code

}



doAction(METHOD.DELETE) // ✅ 可行，有 TSDoc 提示

doAction('delete') // ✅ 可行

doAction('remove') // ❌ 不行

3.5 Class 类静态属性自定义实现

还有一种方法，参考了 @Hamm 提供的方法，即利用 TS 面向对象的特性，自定义实现一个枚举类，实际上这很类似于后端定义枚举的一般方式。这种方式具有很好的扩展性，自定义程度更高。

4. 总结

• TS 可擦除语法 是指 type、interface、n:number 等可以直接去掉的、仅在编译时存在、不会生成额外运行时代码的语法


• TS 不可擦除语法 是指 enum、constructor(public x: number) {} 等不可直接去除且会生成额外运行时代码的语法


• Node.js 23.6.0 版本开始 默认支持直接执行可擦除语法 的 TS 文件


• enum 的替代方案有多种，取决于实际需求。用字面量类型 + as const 是比较常用的一种方案。

TS 官方为了兼容 Node.js 23.6.0 这种可执行 TS 文件特性，出了 erasableSyntaxOnly 配置禁用不可擦除语法，反映了 TypeScript 官方对减少运行时开销和优化编译输出的关注，而不是要放弃 enum。

但或许未来就是要朝着这个方向把 enum 优化掉也说不定呢？

5. 参考链接

• An ode to typescript enums


• TypeScript --erasablesyntaxonly-option


• Node.js type-stripping


• Node.js --experimental-strip-types


• TypeScript const-enums


• TypeScript使用枚举封装和装饰器优雅的定义字典

npm install cron

import { CronJob } from 'cron';



const job = new CronJob(

    '0 */30 * * * *', // 每30分钟执行一次

    function () {

        console.log('刷新用户数据...');

        // 这里放刷新数据的代码

    },

    null, // 完成时的回调

    true, // 是否立即启动

    'Asia/Shanghai' // 时区

);

秒 分 时 日 月 周

// 每周一、三、五的下午5点执行

const job = new CronJob('0 0 17 * * mon,wed,fri', function () {

    console.log('工作日提醒');

});

// 每小时刷新一次产品数据缓存

const cacheRefreshJob = new CronJob(

    '0 0 * * * *',

    async function () {

        try {

            const newData = await fetchProductData();

            updateProductCache(newData);

            console.log('产品数据缓存已更新');

        } catch (error) {

            console.error('刷新缓存失败:', error);

        }

    },

    null,

    true,

    'Asia/Shanghai'

);

// 在 Electron 应用中每5分钟同步一次本地数据到云端

const syncJob = new CronJob(

    '0 */5 * * * *',

    async function () {

        if (navigator.onLine) {

            // 检查网络连接

            try {

                await syncDataToCloud();

                sendNotification('数据已同步');

            } catch (err) {

                console.error('同步失败:', err);

            }

        }

    },

    null,

    true

);

// 每分钟检查一次用户活动状态，30分钟无活动自动登出

const sessionCheckJob = new CronJob(

    '0 * * * * *',

    function () {

        const lastActivity = getLastUserActivity();

        const now = new Date().getTime();



        if (now - lastActivity > 30 * 60 * 1000) {

            console.log('用户30分钟无活动，执行自动登出');

            logoutUser();

        }

    },

    null,

    true

);

// 这样才会在中国时区的下午6点执行

const job = new CronJob('0 0 18 * * *', myFunction, null, true, 'Asia/Shanghai');

// 错误示范

const job = new CronJob('* * * * * *', () => {

    console.log('执行任务');

    this.stop(); // 这里的 this 不是 job 实例，会报错！

});



// 正确做法

const job = new CronJob('* * * * * *', function () {

    console.log('执行任务');

    this.stop(); // 这样才能正确访问 job 实例

});

3. v3 版本变化：如果你从 v2 升级到 v3，要注意月份索引从 0-11 变成了 1-12。

实战案例：构建一个智能通知系统

这是我在一个电商前端项目中实现的一个功能，用 cron 来管理各种用户通知：

import { CronJob } from 'cron';

import { getUser, getUserPreferences } from './api/user';

import { sendNotification } from './utils/notification';



class NotificationManager {

    constructor() {

        this.jobs = [];

        this.initialize();

    }



    initialize() {

        // 新品上架提醒 - 每天早上9点

        this.jobs.push(

            new CronJob(

                '0 0 9 * * *',

                async () => {

                    if (!this.shouldSendNotification('newProducts')) return;



                    const newProducts = await this.fetchNewProducts();

                    if (newProducts.length > 0) {

                        sendNotification('新品上架', `今天有${newProducts.length}款新品上架啦！`);

                    }

                },

                null,

                true,

                'Asia/Shanghai'

            )

        );



        // 限时优惠提醒 - 每天中午12点和晚上8点

        this.jobs.push(

            new CronJob(

                '0 0 12,20 * * *',

                async () => {

                    if (!this.shouldSendNotification('promotions')) return;



                    const promotions = await this.fetchActivePromotions();

                    if (promotions.length > 0) {

                        sendNotification('限时优惠', '有新的限时优惠活动，点击查看详情！');

                    }

                },

                null,

                true,

                'Asia/Shanghai'

            )

        );



        // 购物车提醒 - 每周五下午5点提醒周末特价

        this.jobs.push(

            new CronJob(

                '0 0 17 * * 5',

                async () => {

                    if (!this.shouldSendNotification('cartReminder')) return;



                    const cartItems = await this.fetchUserCart();

                    if (cartItems.length > 0) {

                        sendNotification('周末将至', '别忘了查看购物车中的商品，周末特价即将开始！');

                    }

                },

                null,

                true,

                'Asia/Shanghai'

            )

        );



        console.log('通知系统已初始化');

    }



    async shouldSendNotification(type) {

        const user = getUser();

        if (!user) return false;



        const preferences = await getUserPreferences();

        return preferences?.[type] === true;

    }



    // 其他方法...



    stopAll() {

        this.jobs.forEach(job => job.stop());

        console.log('所有通知任务已停止');

    }

}



export const notificationManager = new NotificationManager();

写在最后

作为前端开发者，我们的工作不只是构建漂亮的界面，还需要处理各种复杂的交互和时序逻辑。

npm 的 cron 包为我们提供了一种专业而灵活的方式来处理定时任务，特别是在 Node.js 环境下运行的前端应用（如 SSR 框架、Electron 应用等）。

它让我们能够用简洁的表达式设定复杂的执行计划，帮助我们构建更加智能和用户友好的前端应用。

背景

如何彻底解决

方案：我的思路从请求层面判断相同请求只发送一次，将结果派发给各个订阅者

实现思路

核心代码

  private handleFinish(key: string, index: number) {

    const promises = this.store.get(key);

    // 只有一个promise时则删除store

    if (promises?.filter((item) => item).length === 1) {

      this.store.delete(key);

    } else if (promises && promises[index]) {

    // 还有其他请求，则将当前取消的、或者完成的置为null

      promises[index] = null;

    }

  }



  private async handleRequest(config: any) {

    const hash = sha256.create();

    hash.update(

      JSON.stringify({

        params: config.params,

        data: config.data,

        url: config.url,

        method: config.method,

      }),

    );

    const fetchKey = hash.hex().slice(0, 40);

    const promises = this.store.get(fetchKey);

    const index = promises?.length || 0;

    let promise = promises?.find((item) => item);

    const controller = new AbortController();



    if (config.signal) {

      config.signal.onabort = (reason: any) => {

        const _promises = this.store.get(fetchKey)?.filter((item) => item);

        if (_promises?.length === 1) {

          controller.abort(reason);

          this.handleFinish(fetchKey, index);

        }

      };

    }



    if (!promise) {

      promise = this.instance({

        ...config,

        signal: controller.signal,

        headers: {

          ...config.headers,

          fetchKey,

        },

      }).catch((error) => {

        console.log(error, "请求错误");

        // 失败的话，立即删除，可以重试

        this.handleFinish(fetchKey, index);

        return { error };

      });

    }



    const newPromise = Promise.resolve(promise)

      .then((result: any) => {

        if (config.signal?.aborted) {

          this.handleFinish(fetchKey, index);

          return result;

        }

        return result;

      })

      .finally(() => {

        setTimeout(() => {

          this.handleFinish(fetchKey, index);

        }, 500);

      });

    this.store.set(fetchKey, [...(promises || []), newPromise]);

    return newPromise;

  }

以下为完整代码（仅供参考）

index.ts

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";

import { sha256 } from "js-sha256";

import transformResponseValue, { updateObjTimeToUtc } from "./utils";



type ErrorInfo = {

  message: string;

  status?: number;

  traceId?: string;

  version?: number;

};



type MyAxiosOptions = AxiosRequestConfig & {

  goLogin: (type?: string) => void;

  onerror: (info: ErrorInfo) => void;

  getHeader: () => any;

};



export type MyRequestConfigs = AxiosRequestConfig & {

  // 是否直接返回服务端返回的数据，默认false， 只返回 data

  useOriginData?: boolean;

  // 触发立即更新

  flushApiHook?: boolean;

  ifHandleError?: boolean;

};



type RequestResult<T, U> = U extends { useOriginData: true }

  ? T

  : T extends { data?: infer D }

    ? D

    : never;



class LmAxios {

  private instance: AxiosInstance;



  private store: Map<string, Array<Promise<any> | null>>;



  private options: MyAxiosOptions;



  constructor(options: MyAxiosOptions) {

    this.instance = axios.create(options);



    this.options = options;

    this.store = new Map();

    this.interceptorRequest();

    this.interceptorResponse();

  }



  // 统一处理为utcTime

  private interceptorRequest() {

    this.instance.interceptors.request.use(

      (config) => {

        if (config.params) {

          config.params = updateObjTimeToUtc(config.params);

        }

        if (config.data) {

          config.data = updateObjTimeToUtc(config.data);

        }

        return config;

      },

      (error) => {

        console.log("intercept request error", error);

        Promise.reject(error);

      },

    );

  }



  // 统一处理为utcTime

  private interceptorResponse() {

    this.instance.interceptors.response.use(

      (response): any => {

        // 对响应数据做处理，以下根据实际数据结构改动！！...

        const [checked, errorInfo] = this.checkStatus(response);



        if (!checked) {

          return Promise.reject(errorInfo);

        }



        const disposition =

          response.headers["content-disposition"] ||

          response.headers["Content-Disposition"];

        // 文件处理

        if (disposition && disposition.indexOf("attachment") !== -1) {

          const filenameReg =

            /filename\*?=['"]?(?:UTF-\d['"]*)?([^;\r\n"']*)['"]?;?/g;

          const filenames: string[] = [];

          disposition.replace(filenameReg, (r: any, r1: string) => {

            filenames.push(decodeURIComponent(r1));

          });

          return Promise.resolve({

            filename: filenames[filenames.length - 1],

            data: response.data,

          });

        }

        if (response) {

          return Promise.resolve(response.data);

        }

      },

      (error) => {

        console.log("request error", error);

        if (error.message.indexOf("timeout") !== -1) {

          return Promise.reject({

            message: "请求超时",

          });

        }

        const [checked, errorInfo] = this.checkStatus(error.response);

        return Promise.reject(errorInfo);

      },

    );

  }



  private checkStatus(

    response: AxiosResponse<any>,

  ): [boolean] | [boolean, ErrorInfo] {

    const { code, message = "" } = response?.data || {};

    const { headers, status } = response || {};



    if (!status) {

      return [false];

    }



    // 单地登录判断，弹出不同提示

    if (status === 401) {

      this.options?.goLogin();

      return [false];

    }



    if (code === "ECONNABORTED" && message?.indexOf("timeout") !== -1) {

      return [

        false,

        {

          message: "请求超时",

        },

      ];

    }



    if ([108, 109, 401].includes(code)) {

      this.options.goLogin();

      return [false];

    }

    if ((code >= 200 && code < 300) || code === 304) {

      // 如果http状态码正常，则直接返回数据

      return [true];

    }



    if (!code && ((status >= 200 && status < 300) || status === 304)) {

      return [true];

    }



    let errorInfo = "";

    const _code = code || status;

    switch (_code) {

      case -1:

        errorInfo = "远程服务响应失败,请稍后重试";

        break;

      case 400:

        errorInfo = "400: 错误请求";

        break;

      case 401:

        errorInfo = "401: 访问令牌无效或已过期";

        break;

      case 403:

        errorInfo = message || "403: 拒绝访问";

        break;

      case 404:

        errorInfo = "404: 资源不存在";

        break;

      case 405:

        errorInfo = "405: 请求方法未允许";

        break;

      case 408:

        errorInfo = "408: 请求超时";

        break;

      case 500:

        errorInfo = message || "500: 访问服务失败";

        break;

      case 501:

        errorInfo = "501: 未实现";

        break;

      case 502:

        errorInfo = "502: 无效网关";

        break;

      case 503:

        errorInfo = "503: 服务不可用";

        break;

      default:

        errorInfo = "连接错误";

    }



    return [

      false,

      {

        message: errorInfo,

        status: _code,

        traceId: response?.data?.requestId,

        version: response.data.ver,

      },

    ];

  }



  private handleFinish(key: string, index: number) {

    const promises = this.store.get(key);

    if (promises?.filter((item) => item).length === 1) {

      this.store.delete(key);

    } else if (promises && promises[index]) {

      promises[index] = null;

    }

  }



  private async handleRequest(config: any) {

    const hash = sha256.create();

    hash.update(

      JSON.stringify({

        params: config.params,

        data: config.data,

        url: config.url,

        method: config.method,

      }),

    );

    const fetchKey = hash.hex().slice(0, 40);

    const promises = this.store.get(fetchKey);

    const index = promises?.length || 0;

    let promise = promises?.find((item) => item);

    const controller = new AbortController();



    if (config.signal) {

      config.signal.onabort = (reason: any) => {

        const _promises = this.store.get(fetchKey)?.filter((item) => item);

        if (_promises?.length === 1) {

          controller.abort(reason);

          this.handleFinish(fetchKey, index);

        }

      };

    }



    if (!promise) {

      promise = this.instance({

        ...config,

        signal: controller.signal,

        headers: {

          ...config.headers,

          fetchKey,

        },

      }).catch((error) => {

        console.log(error, "请求错误");

        // 失败的话，立即删除，可以重试

        this.handleFinish(fetchKey, index);

        return { error };

      });

    }



    const newPromise = Promise.resolve(promise)

      .then((result: any) => {

        if (config.signal?.aborted) {

          this.handleFinish(fetchKey, index);

          return result;

        }

        return result;

      })

      .finally(() => {

        setTimeout(() => {

          this.handleFinish(fetchKey, index);

        }, 500);

      });

    this.store.set(fetchKey, [...(promises || []), newPromise]);

    return newPromise;

  }



  // add override type

  public async request<T = unknown, U extends MyRequestConfigs = {}>(

    url: string,

    config: U,

  ): Promise<RequestResult<T, U> | null> {

    // todo

    const options = {

      url,

      // 是否统一处理接口失败(提示)

      ifHandleError: true,

      ...config,

      headers: {

        ...this.options.getHeader(),

        ...config?.headers,

      },

    };



    const res = await this.handleRequest(options);



    if (!res) {

      return null;

    }



    if (res.error) {

      if (res.error.message && options.ifHandleError) {

        this.options.onerror(res.error);

      }

      throw new Error(res.error);

    }



    if (config.useOriginData) {

      return res;

    }



    if (config.headers?.feTraceId) {

      window.dispatchEvent(

        new CustomEvent<{ flush?: boolean }>(config.headers.feTraceId, {

          detail: {

            flush: config?.flushApiHook,

          },

        }),

      );

    }



    // 默认返回res.data

    return transformResponseValue(res.data)

  }

}



export type MyRequest = <T = unknown, U extends MyRequestConfigs = {}>(

  url: string,

  config: U,

) => Promise<RequestResult<T, U> | null>;



export default LmAxios;