概述

日常开发中，接口数据请求失败是很常见的需求，因此我们有时候可能需要对失败的请求进行重试，提高用户体验。

实现

如下案例通过fetch方法做请求，项目中肯定使用axios居多，思路都是一致的

原理

要想实现请求重试，我们需要清楚如下问题：

• R: 什么时候重试？
  
  
  
  • A: 请求失败的时候
  
  
  
  


• R:请求重试次数？
  
  
  
  • A:外部传入
  
  
  
  


• R:如何失败后重新请求？
  
  
  
  • A:利用请求promise状态和递归重新请求实现
  
  
  
  

程序

/**

 * @Description 发送请求，返回promise

 * @param { string } url 请求地址

 * @param { number } maxCount 最大重试次数

 * @returns { Promise<any> } 返回请求结果的promise

 **/



// 定义

function sendRequest(url, maxCount = 3) {

  return fetch(url).catch((error) => {

    return maxCount <= 0

      ? Promise.reject(error)

      : sendRequest(url, maxCount - 1);

  });

}



// 使用



sendRequest("https://api.example.com/data").then((response) => {

  console.log("Request succeeded:", response);

});

Element Plus XV1.3.0上新XMarkdown 组件

🙊大家好，我是嘉悦。经过一周 beta 版本的测试，我们推出了 v1.3.0 主版本，并且将 main 分支的代码进行了替换。移除了旧的 playground 代码，换成了新的 storybook 在线预览体验更好。同时我们也在我们的👉仿豆包模版项目 中升级了最新的自建库依赖，并集成了 xmd 组件

🥪现在的在线预览：可以在右侧进行调试，实时预览，让你更快理解组件属性

🫕最新的模版项目代码已经更新，请大家酌情拉取，可能会和你本地的已修改的代码有冲突

这一次主版本的更新，主要是给 XMarkdown 组件进行了优化升级，我们内置了更多功能

🍍内置更多功能，支持自定义

🐝在项目中使用后，大概是这个样子

💌 mermaid 图表

💌 数学公式

💌 预览 html

💌 代码块

💌 自定义代码块

💌 自定义属性

💌 自定义标签

目前，我们已经将组件上新到组件库 main 分支开源，请大家及时fork最新的 main 分支代码。💐欢迎大家升级体验最新V1.3.0版本

pnpm add vue-element-plus-x@1.3.0

V1.3.0版本更新内容速递:

• storybook 预览升级 👉在线预览


• XMarkdown组件开发文档 👉 快速上手

🍉 后续计划

• 😁我们近期会对组件库的官网进行更新


• 🥰预计下周，我们将会推出一个对 vue2 的支持库，并负责维护下去


• 🐒预计下下周，我们将会推出 编辑发送框组件，这个组件已经在测试阶段


• 🙉同时已经组建了一个30+人的开发者群，后续会在开发者群中开放更多的贡献任务


• 💩对这个项目感兴趣的朋友，可以加交流群或者作者微信 👉交流邀请

📢 项目地址，快速链接体验

这里是最全的项目地址，方便大家跳转查看

Github

           像原生 enum 一样，但更强大！           

简介

enum-plus是一个增强版的枚举类库，完全兼容原生enum的基本用法，同时支持扩展显示文本、绑定到 UI 组件以及提供丰富的扩展方法，是原生enum的一个直接替代品。它是一个轻量级、零依赖、100% TypeScript 实现的工具，适用于多种前端框架，并支持本地化。

枚举项列表可以用来一键生成下拉框、复选框等组件，可以轻松遍历枚举项数组，获取某个枚举值的显示文本，判断某个值是否存在等。支持本地化，可以根据当前语言环境返回对应的文本，轻松满足国际化的需求。

还有哪些令人兴奋的特性呢？请继续探索吧！或者不妨先看下这个使用视频。

特性

• 完全兼容原生 enum 的用法


• 支持number、string等多种数据类型


• 增强的枚举项，支持自定义显示文本


• 内置本地化能力，枚举项文本可实现国际化，可与任何 i18n 库集成


• 支持枚举值转换为显示文本，代码更简洁


• 可扩展设计，允许在枚举项上添加自定义字段


• 支持将枚举绑定到 Ant Design、ElementPlus、Material-UI 等 UI 库，一行代码枚举变下拉框


• 支持 Node.js 环境，支持服务端渲染(SSR)


• 零依赖，纯原生 JavaScript，可用于任何前端框架


• 100% TypeScript 实现，具有全面的类型推断能力


• 轻量(gzip 压缩后仅 2KB+)

安装

npm install enum-plus

枚举定义

本节展示了使用 Enum 函数初始化枚举的多种方式，你可以根据不同的使用场景选择最合适的方法

1. 基础格式，与原生枚举用法基本一致

import { Enum } from 'enum-plus';



const Week = Enum({

  Sunday: 0,

  Monday: 1,

} as const);



Week.Monday; // 1

as const 类型断言用于将枚举值变成字面量类型，类型更精确，否则它们将被作为number类型。如果你使用的是JavaScript，请删除as const

2. 标准格式（推荐）

为每个枚举项指定 value (枚举值) 和 label（显示文本）字段，这是最常用的格式，也是推荐的格式。这种格式允许你为每个枚举项设置显示文本，这些文本可以在UI组件中使用

import { Enum } from 'enum-plus';



const Week = Enum({

  Sunday: { value: 0, label: '星期日' },

  Monday: { value: 1, label: '星期一' },

} as const);



Week.Sunday; // 0

Week.label(0); // 星期日

3. 数组格式

数组格式在需要动态创建枚举时很有用，例如从 API 获取数据中动态创建一个枚举。这种方式还允许自定义字段映射，这增加了灵活性，可以适配不同的数据格式

import { Enum } from 'enum-plus';



const petTypes = await getPetsData();

// [   { value: 1, key: 'dog', label: '狗' },

//     { value: 2, key: 'cat', label: '猫' },

//     { value: 3, key: 'rabbit', label: '兔子' }   ];

const PetTypes = Enum(petTypes);

4. 原生枚举格式

如果你已经有一个原生的枚举，你可以直接传递给Enum函数，它会自动转换为增强版的枚举，这样可以借用原生枚举的枚举值自动递增特性

import { Enum } from 'enum-plus';



enum init {

  Sunday = 0,

  Monday,

  Tuesday,

  Wednesday,

  Thursday,

  Friday,

  Saturday,

}

const Week = Enum(init);



Week.Sunday; // 0

Week.Monday; // 1

Week.Saturday; // 6

Week.label('Sunday'); // Sunday

API

💎   拾取枚举值       

像原生enum一样，直接拾取一个枚举值

Week.Sunday; // 0

Week.Monday; // 1

💎   items       

获取一个包含全部枚举项的只读数组，可以方便地遍历枚举项。由于符合 Ant Design 组件的数据规范，因此支持将枚举一键转换成下拉框、复选框等组件，只需要一行代码！

💎   keys       

获取一个包含全部枚举项Key的只读数组

💎   label       

  根据某个枚举值或枚举 Key，获取该枚举项的显示文本。如果设置了本地化，则会返回本地化后的文本。

Week.label(1); // 星期一

Week.label('Monday'); // 星期一

💎   key       

  根据枚举值获取该枚举项的 Key，如果不存在则返回undefined

Week.key(1); // 'Monday'

💎   has       

判断某个枚举项（值或 Key）是否存在

Week.has(1); // true

Week.has('Sunday'); // true

Week.has(9); // false

Week.has('Birthday'); // false

💎   toSelect       

toSelect与items相似，都是返回一个包含全部枚举项的数组。区别是，toSelect返回的元素只包含label和value两个字段，同时，toSelect方法支持在数组头部插入一个可自定义的默认元素，一般用于下拉框等组件的默认选项

💎   toMenu       

生成一个对象数组，可以绑定给 Ant Design 的Menu、Dropdown等组件

import { Menu } from 'antd';



<Menu items={Week.toMenu()} />;

数据数据格式为：

[

  { key: 0, label: '星期日' },

  { key: 1, label: '星期一' },

];

💎   toFilter       

生成一个对象数组，可以直接传递给 Ant Design Table 组件的列配置，在表头中显示一个下拉筛选框，用来过滤表格数据

数据数据格式为：

[

  { text: '星期日', value: 0 },

  { text: '星期一', value: 1 },

];

💎   toValueMap       

生成一个符合 Ant Design Pro 规范的枚举集合对象，可以传递给 ProFormField、ProTable 等组件。

数据格式为：

{

  0: { text: '星期日' },

  1: { text: '星期一' },

}

💎   raw       

^{方法重载^1   raw(): Record<K, T[K]>
方法重载^2   raw(keyOrValue: V | K): T[K]}

第一个重载方法，返回枚举集合的初始化对象，即用来初始化 Enum 原始 init 对象。

第二个重载方法，用来处理单个枚举项，根据获取单个枚举项的原始初始化对象。

这个方法主要作用是，用来获取枚举项的自定义字段，支持无限扩展字段

const Week = Enum({

  Sunday: { value: 0, label: '星期日', happy: true },

  Monday: { value: 1, label: '星期一', happy: false },

} as const);



Week.raw(0).happy // true

Week.raw(0); // { value: 0, label: '星期日', happy: true }

Week.raw('Monday'); // { value: 1, label: '星期一', happy: false }

Week.raw(); // { Sunday: { value: 0, label: '星期日', happy: true }, Monday: { value: 1, label: '星期一', happy: false } }

⚡️   valueType   ^{TypeScript ONLY}

在 TypeScript 中，提供了一个包含所有枚举值的联合类型，用于缩小变量或组件属性的数据类型。这种类型替代了像 number 或 string 这样宽泛的原始类型，使用精确的值集合，防止无效赋值，同时提高代码可读性和编译时类型安全性。

type WeekValues = typeof Week.valueType; // 0 | 1



const weekValue: typeof Week.valueType = 1; // ✅ 类型正确，1 是一个有效的周枚举值

const weeks: (typeof Week.valueType)[] = [0, 1]; // ✅ 类型正确，0 和 1 是有效的周枚举值

const badWeekValue: typeof Week.valueType = 8; // ❌ 类型错误，8 不是一个有效的周枚举值

const badWeeks: (typeof Week.valueType)[] = [0, 8]; // ❌ 类型错误，8 不是一个有效的周枚举值

注意，这只是一个 TypeScript 类型，只能用来约束类型，不可在运行时调用，运行时调用会抛出异常

用法

• 基本用法，与原生枚举用法一致

const Week = Enum({

  Sunday: { value: 0, label: '星期日' },

  Monday: { value: 1, label: '星期一' },

} as const);



Week.Sunday; // 0

Week.Monday; // 1

• 支持为枚举项添加 Jsdoc 注释，代码提示更友好

在代码编辑器中，将光标悬停在枚举项上，即可显示关于该枚举项的详细 Jsdoc 注释，而不必再转到枚举定义处查看

const Week = Enum({

  /** 星期日 */

  Sunday: { value: 0, label: '星期日' },

  /** 星期一 */

  Monday: { value: 1, label: '星期一' },

} as const);



Week.Monday; // 将光标悬浮在 Monday 上

可以看到，不但提示了枚举项的释义，还有枚举项的值，无需跳转离开当前光标位置，在阅读代码时非常方便

• 获取包含全部枚举项的数组

Week.items; // 输出如下:

// [

//  { value: 0, label: '星期日', key: 'Sunday', raw: { value: 0, label: '星期日' } },

//  { value: 1, label: '星期一', key: 'Monday', raw: { value: 1, label: '星期一' } }

// ]

• 获取第一个枚举值

Week.items[0].value; // 0

• 检查一个值是否一个有效的枚举值

Week.has(1); // true

Week.items.some(item => item.value === 1); // true

1 instanceof Week; // true

• 支持遍历枚举项数组，但不可修改

Week.items.length; // 2

Week.items.map((item) => item.value); // [0, 1]，✅ 可遍历

Week.items.forEach((item) => {}); // ✅ 可遍历

for (const item of Week.items) {

  // ✅ 可遍历

}

Week.items.push({ value: 2, label: '星期二' }); // ❌ 不可修改

Week.items.splice(0, 1); // ❌ 不可修改

Week.items[0].label = 'foo'; // ❌ 不可修改

• 枚举值(或Key)转换为显示文本

Week.label(1); // 星期一，

Week.label(Week.Monday); // 星期一

Week.label('Monday'); // 星期一

• 枚举值转换为Key

Week.key(1); // 'Monday'

Week.key(Week.Monday); // 'Monday'

Week.key(9); // undefined, 不存在此枚举项

• 添加扩展字段，不限数量

const Week = Enum({

  Sunday: { value: 0, label: '星期日', active: true, disabled: false },

  Monday: { value: 1, label: '星期一', active: false, disabled: true },

} as const);

    

Week.raw(0).active // true

Week.raw(Week.Sunday).active // true

Week.raw('Sunday').active // true

🔥   转换成 UI 组件

• 生成 Select 下拉框
  
  
  
  
  • Ant Design | Arco Design
    Select
  
  
  
  

  import { Select } from 'antd';
  
  
  
  <Select options={Week.items} />;
  
  

  
  
  
  
  • Material-UI Select
  
  
  
  

  import { MenuItem, Select } from '@mui/material';
  
  
  
  <Select>
  
    {Week.items.map((item) => (
  
      <MenuItem key={item.value} value={item.value}>
  
        {item.label}
  
      </MenuItem>
  
    ))}
  
  </Select>;
  
  

  
  
  
  
  • Kendo UI Select
  
  
  
  

  import { DropDownList } from '@progress/kendo-react-dropdowns';
  
  
  
  <DropDownList data={Week.items} textField="label" dataItemKey="value" />;
  
  

  
  
  
  
  • ElementPlus Select
  
  
  
  

  <el-select>
  
    <el-option v-for="item in Week.items" v-bind="item" />
  
  </el-select>
  
  

  
  
  
  
  • Ant Design Vue | Arc Design Select
  
  
  
  

  <a-select :options="Week.items" />
  
  

  
  
  
  
  • Vuetify Select
  
  
  
  

  <v-select :items="Week.items" item-title="label" />
  
  

  
  
  
  
  • Angular Material Select
  
  
  
  

  <mat-select>
  
    <mat-option *ngFor="let item of Week.items" [value]="item.value">{{ item.label }}</mat-option>
  
  </mat-select>
  
  

  
  
  
  
  • NG-ZORRO Select
  
  
  
  

  <nz-select>
  
    <nz-option *ngFor="let item of Week.items" [nzValue]="item.value">{{ item.label }}</nz-option>
  
  </nz-select>
  
  

  
  

• 生成下拉菜单

toMenu方法可以为 Ant Design Menu、Dropdown 等组件生成数据源，格式为：{ key: number|string, label: string } []

import { Menu } from 'antd';



<Menu items={Week.toMenu()} />;

• 生成表格列筛选

toFilter方法可以生成一个对象数组，为表格绑定列筛选功能，列头中显示一个下拉筛选框，用来过滤表格数据。对象结构遵循 Ant Design 的数据规范，格式为：{ text: string, value: number|string } []

import { Table } from 'antd';



const columns = [

  {

    title: 'week',

    dataIndex: 'week',

    filters: Week.toFilter(),

  },

];

// 在表头中显示下拉筛选项

<Table columns={columns} />;

• 支持 Ant Design Pro 组件生成

toValueMap方法可以为 Ant Design Pro 的ProFormFields、ProTable等组件生成数据源，这是一个类似 Map 的数据结构，格式为：{ [key: number|string]: { text: string } }

import { ProFormSelect, ProFormCheckbox, ProFormRadio, ProFormTreeSelect, ProTable } from '@ant-design/pro-components';



<ProFormSelect valueEnum={Week.toValueMap()} />; // 下拉框

<ProFormCheckbox valueEnum={Week.toValueMap()} />; // 复选框

<ProFormRadio.Gr0up valueEnum={Week.toValueMap()} />; // 单选框

<ProFormTreeSelect valueEnum={Week.toValueMap()} />; // 树选择

<ProTable columns={[{ dataIndex: 'week', valueEnum: Week.toValueMap() }]} />; // ProTable

• 枚举合并（或者扩展枚举）

const myWeek = Enum({

  ...Week.raw(),

  Friday: { value: 5, label: '星期五' },

  Saturday: { value: 6, label: '星期六' },

});

• 使用枚举值序列来缩小 number 取值范围   ^{[TypeScript ONLY]}

使用 valueType 类型约束，可以将数据类型从宽泛的number或string类型缩小为有限的枚举值序列，这不但能减少错误赋值的可能性，还能提高代码的可读性

const weekValue: number = 8; // 👎 任意数字都可以赋值给周枚举，即使错误的

const weekName: string = 'Birthday'; // 👎 任意字符串都可以赋值给周枚举，即使错误的



const goodWeekValue: typeof Week.valueType = 1; // ✅ 类型正确，1 是一个有效的枚举值

const goodWeekName: typeof Week.keyType = 'Monday'; // ✅ 类型正确，'Monday' 是一个有效的枚举名



const badWeekValue: typeof Week.valueType = 8; // ❌ 类型报错，8 不是一个有效的枚举值

const badWeekName: typeof Week.keyType = 'Birthday'; // ❌ 类型报错，'Birthday' 不是一个有效的枚举值



type FooProps = {

  value?: typeof Week.valueType; // 👍 组件属性类型约束，可以防止错误赋值，还能智能提示取值范围

  names?: (typeof Week.keyType)[]; // 👍 组件属性类型约束，可以防止错误赋值，还能智能提示取值范围

};

本地化

enum-plus 本身不内置国际化能力，但支持通过 localize 可选参数传入一个自定义方法，来实现本地化文本的转化。这是一个非常灵活的方案，这使你能够实现自定义的本地化函数，根据当前的语言环境将枚举的 label 值转换为适当的翻译文本。语言状态管理仍由您自己负责，您的 localize 方法决定返回哪种本地化文本。对于生产环境的应用程序，我们强烈建议使用成熟的国际化库（如 i18next），而不是创建自定义解决方案。

以下是一个简单的示例，仅供参考。请注意，第一种方法由于缺乏灵活性，不建议在生产环境中使用，它仅用于演示基本概念。请考虑使用第二种及后面的示例。

import { Enum } from 'enum-plus';

import i18next from 'i18next';

import Localize from './Localize';



let lang = 'zh-CN';

const setLang = (l: string) => {

  lang = l;

};



// 👎 这不是一个好例子，仅供演示，不建议生产环境使用

const sillyLocalize = (content: string) => {

  if (lang === 'zh-CN') {

    switch (content) {

      case 'enum-plus.options.all':

        return '全部';

      case 'week.sunday':

        return '星期日';

      case 'week.monday':

        return '星期一';

      default:

        return content;

    }

  } else {

    switch (content) {

      case 'enum-plus.options.all':

        return 'All';

      case 'week.sunday':

        return 'Sunday';

      case 'week.monday':

        return 'Monday';

      default:

        return content;

    }

  }

};

// 👍 建议使用 i18next 或其他国际化库

const i18nLocalize = (content: string | undefined) => i18next.t(content);

// 👍 或者封装成一个基础组件

const componentLocalize = (content: string | undefined) => <Localize value={content} />;



const Week = Enum(

  {

    Sunday: { value: 0, label: 'week.sunday' },

    Monday: { value: 1, label: 'week.monday' },

  } as const,

  {

    localize: sillyLocalize,

    // localize: i18nLocalize, // 👍 推荐使用i18类库

    // localize: componentLocalize, // 👍 推荐使用组件形式

  }

);

setLang('zh-CN');

Week.label(1); // 星期一

setLang('en-US');

Week.label(1); // Monday

当然，每个枚举类型都这样设置可能比较繁琐，enum-plus 提供了一种全局设置方案，可以通过 Enum.localize 全局方法，来全局设置本地化。如果两者同时存在，单个枚举的设置会覆盖全局设置。

Enum.localize = i18nLocalize;

全局扩展

虽然 Enum 提供了一套全面的内置方法，但如果这些还不能满足你的需求，你可以使用 Enum.extends API 扩展其功能，添加自定义方法。这些扩展会全局应用于所有枚举实例，包括在扩展应用之前创建的实例，并且会立即生效，无需任何其它设置。

Enum.extends({

  toMySelect(this: ReturnType<typeof Enum>) {

    return this.items.map((item) => ({ value: item.value, title: item.label }));

  },

  reversedItems(this: ReturnType<typeof Enum>) {

    return this.items.reverse();

  },

});



Week.toMySelect(); // [{ value: 0, title: '星期日' }, { value: 1, title: '星期一' }]

兼容性

enum-plus 提供了完善的兼容性支持。

• 浏览器环境：
  
  
  
  
  • 现代打包工具：对于支持 exports 字段的打包工具（如 Webpack 5+、Vite、Rollup），enum-plus 的目标是 ES2020。如果需要更广泛的浏览器支持，可以在构建过程中使用 @babel/preset-env 转译为更早期的语法。
  
  
  • 旧版打包工具：对于不支持 exports 字段的工具（如 Webpack 4），enum-plus 会自动回退到 main 字段的入口点，其目标是 ES2016。
  
  
  • Polyfill 策略：为了最小化包的体积，enum-plus 不包含任何 polyfill。如果需要支持旧版浏览器，可以引入以下内容：
    
    
    
    
    • core-js
    
    
    • 配置适当的 @babel/preset-env 和 useBuiltIns 设置
    
    
    • 其他替代的 polyfill 实现
    
    
    
    
  
  
  
  


• Node.js 兼容性：enum-plus 需要至少 ES2016 的特性，兼容 Node.js v7.x 及以上版本。

意犹未尽，还期待更多？不妨移步 Github官网，你可以发现更多的高级使用技巧。

相信我，一定会让你感觉相见恨晚！

如果你喜欢这个项目，欢迎在GitHub上给项目点个Star⭐ —— 这是程序员表达喜爱的通用语言😜～ 可以让更多开发者发现它！

你给一家在线教育平台做「课程视频批量上传」功能。

需求听起来很朴素：讲师后台一次性拖 20 个 4K 视频，浏览器要稳、要快、要能断网续传。

你第一版直接 <input type="file"> + FormData，结果上线当天就炸：

• 讲师 A 上传 4.7 GB 的 .mov，Chrome 直接 内存溢出 崩溃；


• 讲师 B 网断了 3 分钟，重新上传发现进度条归零，心态跟着归零；


• 运营同学疯狂 @ 前端：“你们是不是没做分片？”

解决方案：三层防线，把 4 GB 切成 2 MB 的“薯片”

1. 表面用法：分片 + 并发，浏览器再也不卡

// upload.js

const CHUNK_SIZE = 2 * 1024 * 1024;    // 🔍 2 MB 一片，内存友好

export async function* sliceFile(file) {

  let cur = 0;

  while (cur < file.size) {

    yield file.slice(cur, cur + CHUNK_SIZE);

    cur += CHUNK_SIZE;

  }

}

// uploader.js

import pLimit from 'p-limit';

const limit = pLimit(5);               // 🔍 最多 5 并发，防止占满带宽

export async function upload(file) {

  const hash = await calcHash(file);   // 🔍 秒传、断点续传都靠它

  const tasks = [];

  for await (const chunk of sliceFile(file)) {

    tasks.push(limit(() => uploadChunk({ hash, chunk })));

  }

  await Promise.all(tasks);

  await mergeChunks(hash, file.name);  // 🔍 通知后端合并

}

逐行拆解：

• sliceFile 用 file.slice 生成 Blob 片段，不占额外内存；


• p-limit 控制并发，避免 100 个请求同时打爆浏览器；


• calcHash 用 WebWorker 算 MD5，页面不卡顿（后面细讲）。

2. 底层机制：断点续传到底续在哪？

sequenceDiagram

    participant F as 前端

    participant B as 后端



    F->>B: POST /prepare {hash, totalChunks}

    B-->>F: 200 OK {uploaded:[0,3,7]}



    loop 上传剩余分片

        F->>B: POST /upload {hash, index, chunkData}

        B-->>F: 200 OK

    end



    F->>B: POST /merge {hash}

    B-->>F: 200 OK

    Note over B: 按顺序写磁盘

3. 设计哲学：把“上传”做成可插拔的协议

interface Uploader {

  prepare(file: File): Promise<PrepareResp>;

  upload(chunk: Blob, index: number): Promise<void>;

  merge(): Promise<string>;            // 🔍 返回文件 URL

}

我们实现了三套：

• BrowserUploader：纯前端分片；


• TusUploader：遵循 tus.io 协议，天然断点续传；


• AliOssUploader：直传 OSS，用 OSS 的断点 SDK。

应用扩展：拿来即用的配置片段

1. WebWorker 算 Hash（防卡顿）

// hash.worker.js

importScripts('spark-md5.min.js');

self.onmessage = ({ data: file }) => {

  const spark = new SparkMD5.ArrayBuffer();

  const reader = new FileReaderSync();

  for (let i = 0; i < file.size; i += CHUNK_SIZE) {

    spark.append(reader.readAsArrayBuffer(file.slice(i, i + CHUNK_SIZE)));

  }

  self.postMessage(spark.end());

};

2. 环境适配

举一反三：3 个变体场景

小结

大文件上传的核心不是“传”，而是“断”。

把 4 GB 切成 2 MB 的薯片，再配上一张能续命的“进度表”，浏览器就能稳稳地吃下任何体积的视频。

“还在为 Vue 动画卡顿掉帧烦恼？只需 3 行代码，让你的元素切换丝滑到飞起！🚀”

今天给大家安利一个我最近发现的宝藏 Vue 组件——vue-flip-motion！它基于 FLIP 动画技术（First Last Invert Play），能轻松实现高性能、无卡顿的过渡效果，无论是列表重排、元素缩放还是颜色渐变，统统搞定！

🌟 核心亮点：

（GIF 展示：点击按钮瞬间触发的丝滑重排/颜色变化）

（GIF 展示：运动轨迹叠加动画）

🛠️ 快速上手：

安装：

npm install vue-flip-motion

代码示例（Vue 3）：

<template>

  <Flip 

    :mutation="styles" 

    :styles="['backgroundColor']"

    :animate-option="{ duration: 1000 }"

  >

    <div 

      class="box" 

      @click="handleClick"

      :style="{ height: styles.height, background: styles.bgColor }"

    />

  </Flip>

</template>



<script setup>

import { ref } from 'vue';

import Flip from 'vue-flip-motion';



const styles = ref({ height: '100px', bgColor: '#42b983' });



const handleClick = () => {

  styles.value = { height: '200px', bgColor: '#ff0000' }; // 点我触发动画！

};

</script>

💥 高级玩法：

1. 嵌套动画：叠加缩放+旋转效果，轻松实现「多重影分身」！

2. 自定义选择器：精准控制子元素动画，比如列表重排时的「交错入场」特效！

3. 精细化配置：animateOption 支持 easing、delay 等参数，连贝塞尔曲线都能玩！

:animate-option="{

  duration: 800,

  easing: 'cubic-bezier(0.68, -0.6, 0.32, 1.6)', // 弹跳效果

  iterations: Infinity // 无限循环

}"

❓ 为什么选它？

• 对比原生 CSS 动画：无需手动计算关键帧，数据一变自动补间！


• 对比 GSAP：更轻量（压缩后仅 5KB），专为 Vue 定制！


• 对比其他 FLIP 库：API 设计更符合 Vue 生态，上手零成本！

📢 行动号召：

👉 GitHub 地址：github.com/qianyuanjia…

👉 npm 地址：http://www.npmjs.com/package/vue…

现在就用起来，让你的项目动画体验提升 200%！ 🚀

在前端开发中，状态管理是构建复杂应用的核心能力之一，而React作为主流框架，它提供了多种状态管理方案.

然而，随着应用规模扩大，组件层级加深，传统的状态传递方式似乎优点捉襟见肘了，于是，为了解决这种问题，useReducer和useContext诞生了。

今天，我将从组件通信的不足开始，逐渐深入地讲解如何通过useReducer实现高效、可维护的全局状态管理。

一、组件通信简单介绍

1.1 组件通信的常见方式：

• 父子组件通信：通过props传递数据，子组件通过props接收父组件的数据。


• 子父组件通信：子组件通过props传递回调函数（自定义事件）给父组件，实现数据反向传递。


• 兄弟组件通信：通过父组件作为中间人进行传递数据。


• 跨层级通信：使用useContext创建共享上下文（Context），直接跨层级传递状态，详细讲解可以看我之前的文章《useContext : hook中跨层级通信的优雅方案》。

1.2 Context 的不足：

然而，尽管useContext解决了跨层级传递状态的问题，避免了数据臃肿，但是，它在以下场景中仍存在一些缺陷：

• 当Context频繁更新时，所有依赖该Context的组件都会重新渲染，即使某些组件并未使用更新后的数据，容易导致性能问题。


• Context能解决标签的跨级传输，然而，多个Context嵌套也会导致组件层级臃肿（比如<LoginContext.Provider>中包裹<ThemeContext.Provider>）。


• Context本身只提供数据共享能力，它并不涉及到状态更新逻辑，需结合useState或useReducer使用，这就导致了状态管理分散问题。

因此，当应用状态逻辑变得复杂、需集中管理时，useReducer就成为了更优的选择。

二、useReducer详解

2.1 useReducer的定义与作用

useReducer，响应式状态管理，它是React提供的用于管理复杂状态逻辑的Hook。

useReducer通过将状态（state）交由一个纯函数（reducer）进行统一管理，并通过派发动作（dispatch action）触发状态更新，而非直接修改状态。

2.2 useReducer的参数与返回值

const [state, dispatch] = useReducer(reducer, initialState);

• 参数1：reducer函数：根据当前状态和传入的action，返回新的状态。


• 参数2：initialState：初始状态对象。


• 返回值：
  
  
  
  
  • state：表示当前状态值。
  
  
  • dispatch：用于触发状态更新的函数，接受一个action对象作为参数。
  
  
  
  

2.3 纯函数（Pure Function）

useReducer的参数里面，其中，要求reducer函数必须是一个纯函数。

纯函数的特性：

举个例子：

// 不纯的函数

let total = 0;

function addToTotal(a) {

  total += a; // 修改了外部变量

  return total;

}



// 纯函数

function reducer(state, action) {

  switch (action.type) {

    case 'increment':

      return { count: state.count + 1 }; // 返回新对象

    default:

      return state;

  }

}

代码功能说明：

• addToTotal函数直接修改了外部变量total，导致结果不可预测。


• 而reducer函数通过返回新对象的方式更新状态，符合纯函数的要求。

三、用计数器案例讲解useReducer

3.1 代码实现的功能

以下代码实现了一个计数器功能，它通过按钮点击+1或-1修改Count值，输入自定义数值后，通过+???按钮，将该数值加到Count上。

效果如下：

关键代码片段：

import { useState,useReducer } from 'react'

import './App.css'



const initialState ={

  count :0,

}

//关键代码

const reducer = (state ,action)=>{

  switch(action.type){

    case 'increment':

    return {

      count:state.count +1

    };

    case 'decrement':

    return { 

      count:state.count -1

    };

    case 'incrementByNum':

      return{

        count:state.count +parseFloat(action.payload)

      }

    default:

      return state

  }

}



function App(){

const [count ,setCount] = useState(0)

const [state, dispatch]= useReducer(reducer, initialState)



  return (

    <>

      <p>Count:{state.count}</p>

      <input type="text" value={count} onChange={(e)=>setCount(e.target.value)}/>

      <button onClick={()=>dispatch({type:'increment'})}> +1 </button>

      <button onClick={()=>dispatch({type:'decrement'})}> -1</button>

      <button onClick={()=>dispatch({type:'incrementByNum',payload:count})}> +??? </button>

    </>

  )

}

export default App

3.2 代码讲解：

• 在第9行中，reducer函数通过switch语句处理三种类型的action即当触发increment、decrement、incrementByNum行为时，分别返回不同的新的状态对象。


• 而dispatch函数用于触发状态更新，例如第35行，dispatch({ type: 'increment' })函数会在我们触发increment行为时，将计数器值增加1。


• 用户可以通过输入框输入自定义数值，并通过incrementByNum操作将其加到当前计数器上。

关键部分：

四、总结

4.1 useReducer的适用场景

• 复杂状态逻辑：当状态更新逻辑涉及多个条件分支或嵌套结构时（如计数器的incrementByNum操作）。


• 集中管理状态：通过将状态更新规则统一到reducer中，避免分散在多个组件或回调函数中。

4.2 实际应用建议

• 结合useContext：通过useContext创建共享状态，useReducer管理状态更新，形成轻量级全局状态管理方案。


• 模块化设计：将不同功能的reducer拆分为独立文件（如counterReducer.js、formReducer.js），提升代码可维护性。

写在前面的话

  想直接看代码的朋友可以省略下面的历程直接翻到最底下，我把完整示例代码放在最下面

引子

  笔者最近在做项目中遇到了一件事，某个迭代我们需要对项目进行UI改造，特别是把当前正在使用的一个可编辑表格换一下UI。说是换UI，其实是换表格，因为当前在用的表格组件是项目组花钱买的，但老板应该是对这个组件的UI有别的想法（其实就是觉得丑），然后经过老大的决定，我们需要换成Element-UI的组件（Element打钱~~ ）。
  虽说组件要换，但是我们要尽可能的保留原先的功能，原来的组件，在使用上面非常贴近于Excel表格。然后，笔者开始库库干了。。。

初步实现

  为了快速实现功能，我们首先选择的是把这个可编辑表格的所有编辑项全部展示出来，这样用户就可以直接进行表格的编辑，就像这样：

  但很快，我们就发现了第一个问题。
  我们的表格中，有两列下拉框使用了远端搜索功能，同时使用了一个封装的下拉选择组件。这就使得当下拉框有值的时候，它会尝试用value在下拉选项中去匹配对应的label，而下拉选项需要通过远端搜索即调接口获取。这两列调的是同一个接口，哪怕这里做了分页并且默认一页10条，仍然默认会调同一个接口20次，这是一个很影响性能的问题，如果切换成一页20条、30条、50条的话，后果不堪设想。。。
  考虑到这种情况，我们首先采取的方法是只调一次接口，把选项数据全部拉回来本地，然后让使用这些选项的下拉框直接引用。但在这里，我们又发现，这些下拉框是这样的：

  是的，label和value同时展示出来，而且在远程搜索中，可以搜索label或value来找对应项。
  那这里我们就得使用filter-method自定义搜索方法咯，但这里有个问题，那就是搜索结果得要是独立的才行，即：第一次搜索的选项结果，不能出现在第二次的搜索选项里，意思就是每次搜索完，需要把选项还原到默认状态。这好办，visible-change事件可以实现。
  当我们把实现的功能交付出去后，产品给我们带来了一个噩耗：用户非得要跟Excel一样的，也就是说为了满足用户的使用习惯，我们需要尽可能还原出原来的表格组件来

解决之道

第一步

  事已至此，先吃饭吧，啊，不是，先百度吧
  在某次冲浪中，我发现了一篇文章，里面提到使用el-table组件的cell-dblclick事件来实现双击进入编辑状态的做法，也就是下面这样：
  通过列的prop和行的id一起来定位到双击选中的单元格的位置，然后通过v-if使得输入框渲染出来

<template>

  <el-table

    :data="tableData"

    style="width: 100%"

    @cell-dblclick="cellDblclick"

  >

    <el-table-column prop="name" label="姓名" width="180">

      <template slot-scope="scope">

        <el-input v-if="formViewMethod(scope)" v-model="scope.row.name"></el-input>

        <span v-else>{{ scope.row.name }}</span>

      </template>

    </el-table-column>

  </el-table>

</template>

<script>

export default {

  data() {

    return {

      editColumnProp: null,

      editRowId: null

    }

  },

  methods: {

    cellDblclick(row, column, cell) {

      cell.style.background = 'pink'

      this.editColumnProp = column.property

      this.editRowId = row.id

    },

    formViewMethod(scope) {

      const { row, column } = scope

      return (

        row.id === this.editRowId &&

        this.editColumnProp === column.property

      )

    }

  }

}

</script>

  这方法确实可行！在默认是text的情况下，也就不会去调接口，这样，哪怕是用回远端搜索功能，也能保证对性能没有那种压力。
  第一步走出了，另一个问题就摆在眼前了：当我点击编辑框以外的地方，该怎么让它恢复默认那种文本状态呢？文章的作者并没有给出答案，那就得自己去寻找了

新的曙光

  最近在冲浪中，我了解到有一个名为ClickOutside的指令，这是一个vue3中的自定义指令，顾名思义，就是点击外面的意思。这下子灵感就来了：在cell-dblclick事件中，我们可以获取到当前单元格的dom，那如果我们在获取dom的时候，给它加上一个点击事件，当点击到外面的时候，就清空当前单元格的选中状态，那是不是就可以实现了呢？说干就干，上代码：

cellDblclick(row, column, cell) {

  cell.style.background = 'pink'

  cell.__clickOutside__ = (e) => {

    if (cell.contains(e.target)) {

      return console.log('点击了自己')

    }

    console.log('点击了外面')

    cell.__clickOutside__ && document.removeEventListener('click', cell.__clickOutside__)

  }

  document.addEventListener('click', cell.__clickOutside__)

  this.editColumnProp = column.property

  this.editRowId = row.id

}

在这里我们使用了dom的contains()方法，这个方法用于检测一个元素是否包含另一个元素，返回的是一个布尔值。也就是当点击的时候，判断被点击元素B是否在双击的时候绑定点击事件的元素A之内，如果返回true的话，就是点击自己了，否则就是点击外面，这样就能实现清空选中状态的方法了。就像下面这样子：

到这里，可编辑表格的功能就算实现了，谢谢大家观看，下面会贴上完整的示例代码，大伙儿可以直接复制粘贴来看看效果。

完整代码

<template>

  <div class="irregular-table-container">

    <div class="custom-table">

      <!-- 表格区域 -->

      <el-table

        :data="tableData"

        style="width: 100%"

        @cell-dblclick="cellDblclick"

      >

        <el-table-column

          prop="date"

          label="日期"

          width="180">

        </el-table-column>

        <el-table-column prop="name" label="姓名" width="180">

          <template slot-scope="scope">

            <el-input v-if="formViewMethod(scope)" v-model="scope.row.name"></el-input>

            <span v-else>{{ scope.row.name }}</span>

          </template>

        </el-table-column>

        <el-table-column

          prop="gender"

          label="性别"

          width="120"

          :formatter="formatGender"

        >

        </el-table-column>

        <el-table-column

          prop="city"

          label="城市"

          width="200"

          :formatter="formatCity"

        >

        </el-table-column>

        <el-table-column prop="address" label="地址"/>

      </el-table>

    </div>

  </div>

</template>



<script>

export default {

  name: "EditableTable",

  data() {

    return {

      tableData: [

        {

          id: 1,

          date: '2016-05-02',

          name: '王小虎',

          gender: '男',

          city: 'Beijing',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          id: 2,

          date: '2016-05-04',

          name: '王小虎',

          gender: '男',

          city: 'Nanjing',

          address: '上海市普陀区金沙江路 1517 弄'

        }, {

          id: 3,

          date: '2016-05-01',

          name: '王小虎',

          gender: '男',

          city: 'Guangzhou',

          address: '上海市普陀区金沙江路 1519 弄'

        }, {

          id: 4,

          date: '2016-05-03',

          name: '王小虎',

          gender: '男',

          city: 'Shanghai',

          address: '上海市普陀区金沙江路 1516 弄'

        }

      ],

      options: [

        { label: '男', value: 1 },

        { label: '女', value: 0 }

      ],

      cities: [

        {

          value: 'Beijing',

          label: '北京'

        }, {

          value: 'Shanghai',

          label: '上海'

        }, {

          value: 'Nanjing',

          label: '南京'

        }, {

          value: 'Chengdu',

          label: '成都'

        }, {

          value: 'Shenzhen',

          label: '深圳'

        }, {

          value: 'Guangzhou',

          label: '广州'

        }

      ],

      editColumnProp: null,

      editRowId: null

    }

  },

  computed: {},

  created() {},

  methods: {

    formatName(row) {

      const input = (

        <el-input v-model={row.name} clearable />

      )

      return input

    },

    formatGender(row) {

      const select = (

        <el-select v-model={row.gender}>

          {this.options.map(item => {

            return (

              <el-option

                key={item.value}

                label={item.label}

                value={item.value}

              />

            )

          })}

        </el-select>

      )

      return select

    },

    formatCity(row) {

      const select = (

        <el-select v-model={row.city}>

          {this.cities.map(item => {

            return (

              <el-option

                key={item.value}

                label={item.label}

                value={item.value}

              >

              <span style="float: left">{ item.label }</span>

              <span style="float: right; color: #8492a6; font-size: 13px">{ item.value }</span>

              </el-option>

            )

          })}

        </el-select>

      )

      return select

    },

    cellDblclick(row, column, cell) {

      cell.style.background = 'pink'

      cell.__clickOutside__ = (e) => {

        if (cell.contains(e.target)) {

          return console.log('点击了自己')

        }

        // console.log('点击了外面')

        this.editColumnProp = null

        this.editRowId = null

        cell.__clickOutside__ && document.removeEventListener('click', cell.__clickOutside__)

      }

      document.addEventListener('click', cell.__clickOutside__)

      this.editColumnProp = column.property

      this.editRowId = row.id

    },

    formViewMethod(scope) {

      const { row, column } = scope

      return (

        row.id === this.editRowId &&

        this.editColumnProp === column.property

      )

    }

  }

}

</script>

感谢名单

  写完一看时间，嚯，好家伙，凌晨4点了，赶紧碎觉，狗命要紧~~
  最后的最后，这里要感谢两位给我提供灵感和思路的大大，我把他们的文章链接放到下面了，感兴趣的小伙伴可以过去学习下。
vue对el-table的二次封装，双击单元格编辑，避免表格输入框过多卡顿
vue自定义指令（v-clickoutside）-点击当前区域之外的位置

在前端开发中，事件处理是交互逻辑的核心。但你是否会遇到这样的困惑：绑定事件时明明用的是父元素，触发时却总获取到子元素的信息？或是想优化大量子元素的事件绑定，却不知从何下手？

这一切的答案，都藏在 event.currentTarget和 event.target这对“双胞胎”属性里。

一、核心概念：谁在触发？谁在处理？

要理解这两个属性，首先需要明确事件流的基本概念。当用户与页面交互（如点击）时，事件会经历 ​捕获阶段 → 目标阶段 → 冒泡阶段​ 传播。而 event.currentTarget和 event.target的差异，正源于它们在这场“事件旅行”中的不同角色。

1. event.target：事件的“起点”

​定义​：触发事件的最深层元素，即用户实际交互的对象。

​特点​：

• 从事件触发到结束，始终指向最初的“罪魁祸首”（即使事件冒泡到父元素，它也不会变）。


• 可能是按钮、文本节点，甚至是动态生成的元素。

​示例​：点击一个嵌套的 <div>内部的 <span>，event.target始终是 <span>。

2. event.currentTarget：事件的“处理者”

​定义​：当前正在执行事件处理程序的元素，即绑定事件监听器的那个元素。

​特点​：

• 随着事件在捕获/冒泡阶段流动，它的值会动态变化（从外层元素逐渐向内，或从内层向外）。


• 在非箭头函数的回调中，this等价于 event.currentTarget。

​示例​：父元素绑定点击事件，子元素被点击时，父元素的回调函数中 event.currentTarget是父元素，而 event.target是子元素。

二、一张图看懂：事件流中的身份切换

为了更直观理解二者的差异，我们通过一个三层嵌套结构的交互演示：

<div id="outer" class="box">外层（绑定事件）

  <div id="middle" class="box">中层

    <div id="inner" class="box">内层（点击我）</div>

  </div>

</div>

当点击最内层的 inner元素时，事件流的三个阶段中，currentTarget和 target的变化如下：

​关键结论​：

• target是“事件的源头”，永远指向用户点击的那个元素。


• currentTarget是“事件的搬运工”，随事件传播阶段变化，指向当前处理事件的元素。

三、为什么需要事件委托？用差异解决实际问题

传统事件绑定方式为每个子元素单独添加监听器，但在动态列表、表格等场景下，这会导致 ​内存浪费、动态元素难维护、代码冗余​ 三大痛点。而事件委托的出现，正是利用 currentTarget和 target的差异，提供了一种“集中管理、按需处理”的优化方案。

事件委托的核心逻辑

​原理​：将子元素的事件监听绑定在父元素上，利用事件冒泡机制，由父元素统一处理子元素的事件。

​关键依赖​：

• 父元素（currentTarget）负责接收事件。


• 通过 event.target识别实际触发的子元素，执行针对性逻辑。

经典场景实战

场景 1：动态待办列表的点击交互

需求：点击待办项标记完成，支持动态添加新任务。

​传统方式的问题​：每次新增任务都要重新绑定事件，代码冗余且易出错。

​事件委托方案​：

<ul id="todoList">

  <li class="todo-item">任务 1（点击标记完成）</li>

  <li class="todo-item">任务 2（点击标记完成）</li>

</ul>

<button id="addTodo">添加新任务</button>

const todoList = document.getElementById('todoList');

const addTodoBtn = document.getElementById('addTodo');



// 父元素 todoList 绑定唯一点击事件（冒泡阶段）

todoList.addEventListener('click', function(event) {

  // event.target 是实际点击的元素（可能是 li 或其子元素）

  const target = event.target.closest('.todo-item'); // 向上查找最近的 li

  

  if (!target) return; // 非目标元素，跳过

  

  // 标记完成（切换类名）

  target.classList.toggle('completed');

  

  // 若点击删除按钮（假设子元素有 .delete-btn）

  if (target.querySelector('.delete-btn')) {

    target.remove(); // 直接删除父元素 li

  }

});



// 动态添加新任务（无需重新绑定事件）

addTodoBtn.addEventListener('click', () => {

  const newTodo = document.createElement('li');

  newTodo.className = 'todo-item';

  newTodo.innerHTML = `新任务 ${Date.now()} <button class="delete-btn">删除</button>`;

  todoList.appendChild(newTodo);

});

​优势​：

• 仅需绑定一次父元素事件，内存占用极低。


• 新增任务自动继承事件处理能力，无需额外代码。

场景 2：表格单元格的双击编辑

需求：双击表格单元格（td）转换为输入框编辑。

​事件委托方案​：

<table id="dataTable">

  <thead><tr><th>ID</th><th>名称</th></tr></thead>

  <tbody>

    <tr><td>1</td><td>苹果</td></tr>

    <tr><td>2</td><td>香蕉</td></tr>

  </tbody>

</table>

const dataTable = document.getElementById('dataTable');



// 父元素 tbody 监听双击事件（冒泡到 tbody）

dataTable.addEventListener('dblclick', function(event) {

  // event.target 是实际双击的元素（可能是文本或 td）

  const td = event.target.closest('td');

  if (!td) return;

  

  // 转换为输入框编辑

  const originalText = td.textContent;

  td.innerHTML = `<input type="text" value="${originalText}" class="edit-input">`;

  

  const input = td.querySelector('.edit-input');

  input.focus();

  

  // 输入完成后保存（监听输入框失焦）

  input.addEventListener('blur', () => {

    td.textContent = input.value;

  });

});

​优势​：

• 无论表格有多少行，只需绑定一次 tbody事件。


• 新增行（如 AJAX 加载数据后插入）自动支持编辑功能。

四、避坑指南：事件委托的注意事项

五、总结：从“混淆”到“精通”的关键

event.currentTarget和 event.target的核心差异，本质是 ​​“处理者”与“触发者”​​ 的分工：

• target是用户交互的起点，始终指向实际触发的元素。


• currentTarget是事件处理程序的载体，随事件传播阶段变化。

而事件委托，正是利用这一差异，通过父元素（currentTarget）集中处理子元素事件，解决了动态内容、批量操作的维护难题。

掌握这对属性和事件委托模式，不仅能写出更高效的代码，更能让你在前端交互设计中游刃有余。下次遇到大量子元素的事件绑定需求时，不妨试试事件委托——它会是你最可靠的“效率工具”。

// 基础 GET 请求

fetch('https://api.example.com/data')

  .then(response => {

    if (!response.ok) throw new Error('Network error');

    return response.json(); // 需手动解析JSON

  })

  .then(data => console.log(data))

  .catch(error => console.error('Request failed:', error));

const controller = new AbortController();

fetch(url, { signal: controller.signal });

controller.abort(); // 取消请求

// 完整特性的 POST 请求

axios.post('https://api.example.com/users', {

    name: 'John',

    age: 30

  }, {

    headers: { 'X-Custom-Header': 'value' },

    timeout: 5000

  })

  .then(response => console.log(response.data)) // 自动解析JSON

  .catch(error => {

    if (axios.isCancel(error)) {

      console.log('Request canceled');

    } else {

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

    }

  });

// 身份验证拦截器

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

  config.headers.Authorization = `Bearer ${token}`;

  return config;

});



// 错误统一处理

axios.interceptors.response.use(

  response => response,

  error => {

    alert(`API Error: ${error.response.status}`);

    return Promise.reject(error);

  }

);

const source = axios.CancelToken.source();

axios.get(url, { cancelToken: source.token });

source.cancel('Operation canceled');

4. 客户端防御：内置 XSRF 防护
5. 进度跟踪：上传/下载进度监控
6. 多环境支持：浏览器与 Node.js 通用

关键决策因素对比

2025 年选型建议

融合解决方案

在大型项目中，可以采用混合方案：

// 封装原生fetch获得axios式体验

const http = async (url, options = {}) => {

  const controller = new AbortController();

  const config = {

    ...options,

    signal: controller.signal,

    headers: { 'Content-Type': 'application/json', ...options.headers }

  };



  const timeoutId = setTimeout(() => controller.abort(), 8000);



  try {

    const response = await fetch(url, config);

    clearTimeout(timeoutId);

    

    if (!response.ok) throw new Error(`HTTP ${response.status}`);

    return await response.json();

  } catch (error) {

    if (error.name === 'AbortError') console.error('Request timed out');

    throw error;

  }

};

结论

在 2025 年的技术背景下，Fetch API 的原生能力得到大幅增强，对于小型项目和简单场景愈发得心应手。但对于企业级应用，Axios 仍然凭借其人性化设计和功能完备性保持不可替代的地位。建议开发者根据项目的规模、运行环境、团队习惯三大核心因素制定技术决策，必要时可进行混合封装以平衡开发效率与性能要求。

在 TypeScript（以及 JavaScript）中，迭代器和生成器是用于处理集合数据（如数组、对象等）的强大工具。它们允许你按顺序访问集合中的元素，并提供了一种控制数据访问的方式。

迭代器（Iterator）
迭代器是一个对象，它定义了一个序列，并且提供了一种方法来访问这个序列的元素。迭代器对象实现了 Iterator 接口，该接口要求它有一个 next() 方法。

Iterable 接口
一个对象如果实现了Iterable接口，那么它就是可迭代的。这个接口要求对象必须有一个Symbol.iterator方法，这个方法返回一个迭代器对象。

Iterator 接口
迭代器对象必须实现Iterator接口。这个接口定义了next()方法，该方法返回一个对象，这个对象有两个属性：value和done。value表示当前的元素值，done是一个布尔值，表示是否还有更多的元素可以迭代。

1.可迭代对象（Iterable）

一个对象如果实现了[Symbol.iterator]方法，它就是可迭代的。这个方法必须返回一个迭代器对象。常见的内置可迭代对象包括：Array,String,Map,Set,arguments对象（可通过Array.from()或扩展运算符使用），DOM的NodeList(部分浏览器)。

const arr = [1, 2, 3];

console.log(arr[Symbol.iterator]); 

这些对象之所以能被for...of循环遍历，正是因为它们实现了Symbol.iterator方法。

2.迭代器（Iterator）

迭代器是一个带有next()方法的对象，调用next()返回{value,done}.
value:当前值（当done:true时，value可省略或为undefined）
done:布尔值，表示是否遍历完成。

const arr = [10, 20];

const iterator = arr[Symbol.iterator]();



console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());

注意：迭代器本身通常也是可迭代的（即它自己也有[Symbol.iterator()]）,这样它就可以用于for...of。

3.for...of与展开运算符的工作原理

for (const item of [1, 2, 3]) {

  console.log(item);

}

背后的逻辑：

• 获取[1,2,3] [Symbol.iterator]()


• 不断调用.next()直到done:true

同理：

const str = "hi";

const chars = [...str];

console.log(chars)

手动实现一个可迭代对象

class Countdown {

  constructor(private start: number) {}



  [Symbol.iterator](): Iterator<number> {

    let current = this.start;

    return {

      next(): { value: number; done: boolean } {

        if (current < 0) {

          return { value: undefined, done: true };

        }

        return { value: current--, done: false };

      },

      // 可选：支持 return() 方法用于提前终止（如 break）

      return() {

        console.log("迭代被中断");

        return { value: undefined, done: true };

      }

    };

  }

}



// 使用

const countdown = new Countdown(3);

for (const n of countdown) {

  console.log(n); 

}

生成器（Generator）:简化迭代器创建

生成器函数是创建迭代器的便捷方式。使用function* 定义，内部用yield暂停执行。

function* idGenerator() {

  let id = 1;

  while (true) {

    yield id++;

  }

}



const gen = idGenerator();

console.log(gen.next().value);

console.log(gen.next().value);

生成器函数返回一个生成器对象，它即是迭代器，也是可迭代对象。

你甚至可以让一个对象使用生成器作为[Symbol.iterator]

const myRange = {

  from: 1,

  to: 5,

  *[Symbol.iterator]() {

    for (let i = this.from; i <= this.to; i++) {

      yield i;

    }

  }

};



console.log([...myRange]);

迭代器协议总结：

协议：Iterable

方法：[Symbol.iterator]():Iterator

返回值：迭代器对象

说明：表示可被遍历

协议：Iterator

方法：next():{value,done}

返回值：状态对象

说明：提供下一个值

协议：可选

方法：return?():{value,done}

返回值：状态对象

说明：处理提前退出

协议：可选

方法：throw?():{value,done}

返回值：状态对象

说明：处理异常抛出

先前在使用豆包的Web版时，发现在“帮我写作”模块中用以输入Prompt的模板输入框非常实用，既可以保留模板输入的优势，来调优指定的写作方向，又能够不失灵活地自由编辑。其新对话的输入交互也非常细节，例如选择“音乐生成”后技能提示本身也是编辑器的嵌入模块，不可以直接删除。

虽然看起来这仅仅是一个文本内容的输入框，但是实现起来并不是那么容易，细节的交互也非常重要。例如技能提示节点直接作为输入框本身模块，多行文本就可以在提示下方排版，而不是类似网格布局需要在左侧留空白内容。那么在这里我们就以豆包的交互为例，来实现Prompt的变量模板输入框。

概述

当我们开发AI相关的应用时，一个常见的场景便是需要用户输入Prompt，或者是在管理后台维护Prompt模板提供给其他用户使用。此时我们就需要一个能够支持内容输入或者模板变量的输入框，那么常见的实现方式有以下几种:

• 纯文本输入框，类似于<input>、<textarea>等标签，在其DOM结构周围实现诸如图片、工具选择等按钮的交互。


• 表单变量模板，类似于填空的形式，将Prompt模板以表单的形式填充变量，用户只需要填充所需要的变量内容即可。


• 变量模板输入框，同样类似于填空的形式，但是其他内容也是可以编辑的，以此实现模版变量调优以及灵活的自由指令。

在这里有个有趣的事情，豆包的这个模板输入框是用slate做的，而后边生成文档的部分却又引入了新的富文本框架。也就是其启用分步骤“文档编辑器”模式的编辑器框架与模板输入框的编辑器框架并非同一套实现，毕竟引入多套编辑器还是会对应用的体积还是有比较大的影响。

因此为什么不直接使用同一套实现则是非常有趣的问题，虽然一开始可能是想着不同的业务组实现有着不同的框架选型倾向。但是仔细研究一下，想起来slate对于inline节点是特殊类型实现，其内嵌的inline左右是还可以放光标的，重点是inline内部也可以放光标。

这个问题非常重要，如果不能实现空结构的光标位置，那么就很难实现独立的块结构。而这里的实现跟数据结构和选区模式设计非常相关，若是针对连续的两个DOM节点位置，如果需要实现多个选区位置，就必须有足够的选区表达，而如果是纯线性的结构则无法表示。

// <em>text</em><strong>text</strong>



// 完全匹配 DOM 结构的设计

{ path: [0], offset: 4 } // 位置 1

{ path: [1], offset: 0 } // 位置 2



// 线性结构的设计

{ offset: 4 } // 位置 1

对于类似的光标位置问题，开源的编辑器编辑器例如Quill、Lexical等，甚至商业化的飞书文档、Notion都没有直接支持这种模式。这些编辑器的schema设计都是两个字符间仅会存在一个caret的光标插入点，验证起来也很简单，只要看能否单独插入一个空内容的inline节点即可。

在这里虽然我们主要目标是实现变量模板的输入框形式，但是其他的形式也非常有意思，例如GitHub的搜索输入框高亮、CozeLoop的Prompt变量调时输入等。因此我们会先将这些形式都简单叙述一下，在最后再重点实现变量模板输入框的形式，最终的实现可以参考 BlockKit Variables 以及 CodeSandbox。

纯文本输入框

纯文本输入框的形式就比较常见了，例如<input>、<textarea>等标签，当前我们平时使用的输入框也都是类似的形式，例如DeepSeek就是单纯的textarea标签。当然也有富文本编辑器的输入框形式，例如Gemini的输入框，但整体形式上基本一致。

文本 Input

单纯的文本输入框的形式自然是最简单的实现了，直接使用textarea标签即可，只不过这里需要实现一些控制形式，例如自动计算文本高度等。此外还需要根据业务需求实现一些额外的交互，例如图片上传、联网搜索、文件引用、深度思考等。

+-------------------------------------------+

|                                           |

| DeepThink   Search                      ↑ |

+-------------------------------------------+

文本高亮匹配

在这里更有趣的是GitHub的搜索输入框，在使用综合搜索、issue搜索等功能时，我们可以看到如果关键词不会会被高亮。例如is:issue state:open 时，issue和open会被高亮，而F12检查时发现其仅是使用input标签，并没有引入富文本编辑器。

在这里GitHub的实现方式就非常有趣，实际上是使用了div渲染格式样式，来实现高亮的效果，然后使用透明的input标签来实现输入交互。如果在F12检查时将input节点的color透明隐藏掉，就可以发现文本的内容重叠了起来，需要关注的点在于怎么用CSS实现文本的对齐。

我们也可以实现一个类似的效果，主要关注字体、spacing的文本对齐，以及避免对浮层的事件响应，否则会导致鼠标点击落到浮层div而不是input导致无法输入。其实这里还有一些其他的细节需要处理，例如可能存在滚动条的情况，不过在这里由于篇幅问题我们就不处理了。

<div class="container">

  <div id="$$1" class="overlay"></div>

  <input id="$$2" type="text" class="input" value="变量文本{{vars}}内容" />

</div>

<script>

    const onInput = () => {

      const text = $$2.value;

      const html = text.replace(/{{(.*?)}}/g, `<span style="color: blue;">{{$1}}</span>`);

      $$1.innerHTML = html;

    };

    $$2.oninput = onInput;

    onInput();

</script>

<style>

  .container { position: relative; height: 30px; width: 800px; border: 1px solid #aaa; border-radius: 3px; }

  .container > * { width: 800px; height: 30px; font-size: 16px; box-sizing: border-box; font-family: inherit;  }

  .overlay { pointer-events: none; position: absolute; left: 0; top: 0; height: 100%; width: 100%; }

  .overlay { white-space: pre; display: flex; align-items: center; word-break: break-word; }

  .input { padding: 0; border-width: 0; word-spacing: 0; letter-spacing: 0; color: #0000; caret-color: #000; }

</style>

表单变量模板

变量模板的形式非常类似于表单的形式，在有具体固定的Prompt模板或者具体的任务时，这种模式非常合适。还有个有意思的事情，这种形式同样适用于非AI能力的渐进式迭代，例如文档场景常见的翻译能力，原有的交互形式是提交翻译表单任务，而在这里可以将表单形式转变为Prompt模板来使用。

表单模板

表单模版的交互形式比较简单，通常都是左侧部分编写纯文本并且预留变量空位，右侧部分会根据文本内容动态构建表单，CozeLoop中有类似的实现形式。除了常规的表单提交以外，将这种交互形式融入到LLms融入到流程编排中实现流水线，以提供给其他用户使用，也是常见的场景。

此外，表单模版适用于比较长的Prompt模版场景，从易用性上来说，用户可以非常容易地专注变量内容的填充，而无需仔细阅读提供的Prompt模版。并且这种形式还可以实现变量的复用，也就是在多个位置使用同一个变量。

+--------------------------------------------------+------------------------+

| 请帮我写一篇关于 {{topic}} 的文章，文章内容要          | 主题: ________________ |

| 包含以下要点: {{points}}，文章风格符合 {{style}}，    | 要点: ________________ |

| 文章篇幅为 {{length}}，并且要包含一个吸引人的标题。     | 风格: ________________ |

|                                                  | 长度: ________________ |

+--------------------------------------------------+------------------------+

行内变量块

行内变量块就相当于内容填空的形式，相较表单模版来说，行内变量块则会更加倾向较短的Prompt模板。整个Prompt模板绘作为整体，而变量块则作为行内的独立块结构存在，用户可以直接点击变量块进行内容编辑，注意此处的内容是仅允许编辑变量块的内容，模板的文本是不能编辑的。

+---------------------------------------------------------------------------+

| 请帮我写一篇关于 {{topic}} 的文章，文章内容要包含以下要点: {{points}}，           |

| 文章风格符合 {{style}}，文章篇幅为 {{length}}，并且要包含一个吸引人的标题。        |

+---------------------------------------------------------------------------+

这里相对豆包的变量模板输入框形式来说，最大的差异就是非变量块不可编辑。那么相对来说这种形式就比较简单了，普通的文本就使用span节点，变量节点则使用可编辑的input标签即可。看起来没什么问题，然而我们需要处理其自动宽度，类似arco的实现，否则交互起来效果会比较差。

实际上input的自动宽度并没有那么好实现，通常来说这种情况需要额外的div节点放置文本来同步计算宽度，类似于前文我们聊的GitHub搜索输入框的实现方式。那么在这里我们使用Editable的span节点来实现内容的编辑，当然也会存在其他问题需要处理，例如避免回车、粘贴等。

<div id="$$0" class="container"><span>请帮我写一篇关于</span><span class="input" placeholder="{{topic}}" ></span><span>的文章，文章内容要包含以下要点:</span><span class="input" placeholder="{{points}}" ></span>，<span>文章风格符合</span><span class="input" placeholder="{{style}}" ></span><span>，文章篇幅为</span><span class="input" placeholder="{{length}}" ></span><span>，并且要包含一个吸引人的标题。</span></div>

<style>

  .container > * { font-size: 16px; display: inline-block; }

  .input { outline: none; margin: 3px 2px; border-radius: 4px; padding: 2px 5px; }

  .input { color: #0057ff; background: rgba(0, 102, 255, 0.06); }

  .input::after { content: attr(data-placeholder); cursor: text; opacity: 0.5; pointer-events: none;  }

</style>

<script>

  const inputs = document.querySelectorAll(".input");

  inputs.forEach(input => {

    input.setAttribute("contenteditable", "true");

    const onInput = () => {

      !input.innerText ? input.setAttribute("data-placeholder", input.getAttribute("placeholder"))

      : input.removeAttribute("data-placeholder");

    }

    onInput();

    input.oninput = onInput;

  });

</script>

变量模板输入框

变量模板输入框可以认为是上述实现的扩展，主要是支持了文本的编辑，这种情况下通常就需要引入富文本编辑器来实现了。因此，这种模式同样适用于较短的Prompt模版场景，并且用户可以在模板的基础上进行灵活的调整，参考下面的示例实现的 DEMO 效果。

+---------------------------------------------------------------------------+

| 我是一位 {{role}}，帮我写一篇关于 {{theme}} 内容的 {{platform}} 文章，          |

| 需要符合该平台写作风格，文章篇幅为 {{space}} 。                                 |

+---------------------------------------------------------------------------+

方案设计

实际上只要涉及到编辑器相关的内容，无论是富文本编辑器、图形编辑器等，都会比较复杂，其中的都涉及到了数据结构、选区模式、渲染性能等问题。而即使是个简单的输入框，也会涉及到其中的很多问题，因此我们必须要做好调研并且设计好方案。

开篇我们就讲述了为何slate可以实现这种交互，而其他的编辑器框架则不行，主要是因为slate的inline节点是特殊类型实现。具体来说，slate的inline节点是一个children数组，因此这里看起来是同个位置的选区可以通过path的不同区分，child内会多一层级。

[

  {

    type: "paragraph",

    children: [{

      type: "badge",

      children: [{ text: "Approved" }],

    }],

  },

]

因此既然slate本身设计上支持这种选区行为，那么实现起来就会非常方便了。然而我对于slate编辑器实在是太熟悉了，也为slate提过一些PR，所以在这里我并不太想继续用slate实现，而恰好我一直在写 从零实现富文本编辑器 的系列文章，因此用自己做的框架BlockKit实现是个不错的选择。

而实际上，用slate的实现并非完全没有问题，主要是slate的数据结构完全支持任意层级的嵌套，那么也就是说，我们必须要用很多策略来限制用户的行为。例如我们复制了嵌入节点，是完全可以将其贴入到其他块结构内，造成更多级别的children嵌套，类似这种情况必须要写完善的normalize方法处理。

那么在BlockKit中并不支持多层级的嵌套，因为我们的选区设计是线性的结构，即使有多个标签并列，大多数情况下我们会认为选区是在偏左的DOM节点末尾。而由于某些情况下节点在浏览器中的特殊表现，例如Embed类型的节点，我们才会将光标放置在偏右的DOM位置。

// 左偏选区设计

{ offset: 4 }

// <em>text[caret]</em><strong>text</strong>

{ offset: 5 }

// <em>text</em><strong>t[caret]ext</strong>

因此我们必须要想办法支持这个行为，而更改架构设计则是不可行的，毕竟如果需要修改诸如选区模式、数据结构等模块，就相当于修改了地基，上层的所有模块都需要重新适配。因此我们需要通过其他方式来实现这个功能，而且还需要在整体编辑器的架构设计基础上实现。

那么这里的本质问题是我们的编辑器不支持独立的空结构，其中主要是没有办法额外表示一个选区位置，如果能够通过某些方式独立表达选区位置，理论上就可以实现这个功能。沿着这个思路，我们可以比较容易地想出来下面的两个方式:

方案1的优点是其本身并不会脱离编辑器的控制，整体的选区、历史记录等操作都可以被编辑器本身管理。缺点是需要额外维护Embed节点，整体实现会比较复杂，例如删除末尾Embed节点时需要配对删除前方的节点、粘贴的时候也需要避免节点被重复插入、需要额外的包装节点处理样式等。

方案2的优点是维护了独立的节点，在DOM层面上不需要额外的处理，将其作为普通可编辑的Embed节点即可。缺点是脱离了编辑器框架本身的控制，必须要额外处理选区、历史记录等操作，相当于本身实现了内部的不受控的新编辑器，独立出来的编辑区域自然需要额外的Case需要处理。

最终比较起来，我们还是选择了方案2，主要是其实现起来会比较简单，并且不需要额外维护复杂的约定式节点结构。虽然脱离了编辑器本身的控制，但是我们可以通过事件将其选区、历史记录等操作同步到编辑器本身，相当于半受控处理，虽然会有一些边界情况需要处理，但是整体实现起来还比较可控。

Editable 组件

那么在方案2的基础上，我们就首先需要实现一个Editable组件，来实现变量块的内容编辑。由于变量块的内容并不需要支持任何加粗等操作，因此这里我们并不需要嵌套富文本编辑器本身，而是只需要支持一个纯文本的可编辑区域即可，通过事件通信的形式实现半受控处理。

因此在这里我们就只需要一个span标签，并且设置其contenteditable属性为true即可。至于为什么不使用input来实现文本的输入框，主要是input的宽度跟随文本长度变化需要自己测量，而直接使用可编辑的span标签是天然支持的。

<div

  className="block-kit-editable-text"

  contentEditable

  suppressContentEditableWarning

></div>

可输入的变量框就简单地实现出来了，而仅仅是可以输入文本并不够，我们还需要空内容时的占位符。由于Editable节点本身并不支持placeholder属性，因此我们必须要自行注入DOM节点，而且还需要避免占位符节点被选中、复制等，这种情况下伪元素是最合适的选择。

.block-kit-editable-text {

  display: inline-block;

  outline: none;



  &::after {

    content: attr(data-vars-placeholder);

    cursor: text;

    opacity: 0.5;

    pointer-events: none;

    user-select: none;

  }

}

当然placeholder的值可以是动态设置的，并且placeholder也仅仅是在内容为空时才会显示，因此我们还需要监听input事件来动态设置data-vars-placeholder属性。

const showPlaceholder = !value && placeholder && !isComposing;

<div

  className="block-kit-editable-text"

  data-vars-placeholder={showPlaceholder ? placeholder : void 0}

></div>

这里的isComposing状态可以注意一下，这个状态是用来处理输入法IME的。当唤醒输入法输入的时候，编辑器通常会处于一个不受控的状态，这点我们先前在处理输入的文章中讨论过，然而此时文本区域是存在候选词的，因此这个情况下不应该显示占位符。

const [isComposing, setIsComposing] = useState(false);

const onCompositionStart = useMemoFn(() => {

  setIsComposing(true);

});



const onCompositionEnd = useMemoFn((e: CompositionEvent) => {

  setIsComposing(false);

});

接下来需要处理内容的输入，在此处的半受控主要是指的我们并不依靠BeforeInput事件来阻止用户输入，而是在允许用户输入后，主动通过onChange事件将内容同步到外部。而外部编辑器接收到变更后，会触发该节点的rerender，在这里我们再检查内容是否一致决定更新行为。

在这里不使用input标签其实也会存在一些问题，主要是DOM标签本身内部是可以写入很多复杂的HTML内容的，而这里我们是希望将其仅仅作为普通的文本输入框来使用，因此我们在检查到DOM节点不符合要求的时候，需要将其重置为纯文本内容。

useEffect(() => {

  if (!editNode) return void 0;

  if (isDOMText(editNode.firstChild)) {

    if (editNode.firstChild.nodeValue !== props.value) {

      editNode.firstChild.nodeValue = props.value;

    }

    for (let i = 1, len = editNode.childNodes.length; i < len; i++) {

      const child = editNode.childNodes[i];

      child && child.remove();

    }

  } else {

    editNode.innerText = props.value;

  }

}, [props.value, editNode]);



const onInput = useMemoFn((e: InputEvent) => {

  if (e.isComposing || isNil(editNode)) {

    return void 0;

  }

  const newValue = editNode.textContent || "";

  newValue !== value && onChange(newValue);

});

对于避免Editable节点出现非文本的HTML内容，我们还需要在onPaste事件中阻止用户粘贴非文本内容，这里需要阻止默认行为，并且将纯文本的内容提取出来重新插入。这里还涉及到了使用旧版的浏览器API，实际上L0的编辑器就是基于这些旧版的浏览器API实现的，例如pell编辑器。

此外，我们还需要避免用户按下Enter键导致换行，在Editable里回车各大浏览的支持都不一致，因此这里即使是真的需要支持换行，我们也最好是使用\n来作为软换行使用，然后将white-space设置为pre-wrap来实现换行。我们可以回顾一下浏览器的不同行为:

• 在空contenteditable编辑器的情况下，直接按下回车键，在Chrome中的表现是会插入<div><br></div>，而在FireFox(<60)中的表现是会插入<br>，IE中的表现是会插入<p><br></p>。


• 在有文本的编辑器中，如果在文本中间插入回车例如123|123，在Chrome中的表现内容是123<div>123</div>，而在FireFox中的表现则是会将内容格式化为<div>123</div><div>123</div>。


• 同样在有文本的编辑器中，如果在文本中间插入回车后再删除回车，例如123|123->123123，在Chrome中的表现内容会恢复原本的123123，而在FireFox中的表现则是会变为<div>123123</div>。

const onPaste = useMemoFn((e: ClipboardEvent) => {

  preventNativeEvent(e);

  const clipboardData = e.clipboardData;

  if (!clipboardData) return void 0;

  const text = clipboardData.getData(TEXT_PLAIN) || "";

  document.execCommand("insertText", false, text.replace(/\n/g, " "));

});



const onKeyDown = useMemoFn((e: KeyboardEvent) => {

  if (isKeyCode(e, KEY_CODE.ENTER) || isKeyCode(e, KEY_CODE.TAB)) {

    preventNativeEvent(e);

    return void 0;

  }

})

至此Editable变量组件就基本实现完成了，接下来我们就可以实现一个变量块插件，将其作为Embed节点Schema集合进编辑器框架当中。在编辑器的插件化中，我们主要是将当前的值传递到编辑组件中，并且在onChange事件中将变更同步到编辑器本身，这就非常类似于表单的输入框处理了。

export class EditableInputPlugin extends EditorPlugin {

  public key = VARS_KEY;

  public options: EditableInputOptions;



  constructor(options?: EditableInputOptions) {

    super();

    this.options = options || {};

  }

  public destroy(): void {}



  public match(attrs: AttributeMap): boolean {

    return !!attrs[VARS_KEY];

  }



  public onTextChange(leaf: LeafState, value: string, event: InputEvent) {

    const rawRange = leaf.toRawRange();

    if (!rawRange) return void 0;

    const delta = new Delta().retain(rawRange.start).retain(rawRange.len, { [VARS_VALUE_KEY]: value });

    this.editor.state.apply(delta, { autoCaret: false, });

  }



  public renderLeaf(context: ReactLeafContext): React.ReactNode {

    const { attributes: attrs = {} } = context;

    const varKey = attrs[VARS_KEY];

    const placeholders = this.options.placeholders || {};

    return (

      <Embed context={context}>

        <EditableTextInput

          className={cs(VARS_CLS_PREFIX, `${VARS_CLS_PREFIX}-${varKey}`)}

          value={attrs[VARS_VALUE_KEY] || ""}

          placeholder={placeholders[varKey]}

          onChange={(v, e) => this.onTextChange(context.leafState, v, e)}

        ></EditableTextInput>

      </Embed>

    );

  }

}

然而，当我们将Editable节点集成后出现了问题，特别是选区无法设置到变量编辑节点内。主要是这里的选区会不受编辑器控制，因此我们还需要在编辑器的核心包里，避免选区被编辑器框架强行拉取到leaf节点上，这还是需要编辑器本身支持的。

同样的，很多事件同样需要避免编辑器框架本身处理，得益于浏览器DOM事件流的设计，我们可以比较轻松地通过阻止事件冒泡来避免编辑器框架处理这些事件。当然还有一些不冒泡的如Focus等事件，以及SelectionChange等全局事件，我们还需要在编辑器本身的事件中心中处理这些事件。

/**

 * 独立节点嵌入 HOC

 * - 独立区域 完全隔离相关事件

 * @param props

 */

export const Isolate: FC<IsolateProps> = props => {

  const [ref, setRef] = useState<HTMLSpanElement | null>(null);



  useEffect(() => {

    // 阻止事件冒泡

  }, [ref]);



  return (

    <span

      ref={setRef}

      {...{ [ISOLATED_KEY]: true }}

      contentEditable={false}

    >

      {props.children}

    </span>

  );

};

/**

 * 判断选区变更时, 是否需要忽略该变更

 * @param node

 * @param root

 */

export const isNeedIgnoreRangeDOM = (node: DOMNode, root: HTMLDivElement) => {

  for (let n: DOMNode | null = node; n !== root; n = n.parentNode) {

    // node 节点向上查找到 body, 说明 node 并非在 root 下, 忽略选区变更

    if (!n || n === document.body || n === document.documentElement) {

      return true;

    }

    // 如果是 ISOLATED_KEY 的元素, 则忽略选区变更

    if (isDOMElement(n) && n.hasAttribute(ISOLATED_KEY)) {

      return true;

    }

  }

  return false;

};

到这里，模板输入框基本已经实现完成了，在实际使用中问题太大的问题。然而在测试兼容性时发现一个细节，在Firefox和Safari中，按下方向键从非变量节点跳到变量节点时，不一定能够成功跳入或者跳出，具体的表现在不同的浏览器都有差异，只有Chrome是完全正常的。

因此为了兼容浏览器的处理，我们还需要在KeyDown事件中主动处理在边界上的跳转行为。这部分的实现是需要适配编辑器本身的实现的，需要完全根据DOM节点来处理新的选区位置，因此这里的实现主要是根据预设的DOM结构类型来处理，这里实现代码比较多，因此举个左键跳出变量块的例子。

const onKeyDown = useMemoFn((e: KeyboardEvent) => {

  LEFT_ARROW_KEY: if (

    !readonly &&

    isKeyCode(e, KEY_CODE.LEFT) &&

    sel &&

    sel.isCollapsed &&

    sel.anchorOffset === 0 &&

    sel.anchorNode &&

    sel.anchorNode.parentElement &&

    sel.anchorNode.parentElement.closest(`[${LEAF_KEY}]`)

  ) {

    const leafNode = sel.anchorNode.parentElement.closest(`[${LEAF_KEY}]`)!;

    const prevNode = leafNode.previousSibling;

    if (!isDOMElement(prevNode) || !prevNode.hasAttribute(LEAF_KEY)) {

      break LEFT_ARROW_KEY;

    }

    const selector = `span[${LEAF_STRING}], span[${ZERO_SPACE_KEY}]`;

    const focusNode = prevNode.querySelector(selector);

    if (!focusNode || !isDOMText(focusNode.firstChild)) {

      break LEFT_ARROW_KEY;

    }

    const text = focusNode.firstChild;

    sel.setBaseAndExtent(text, text.length, text, text.length);

    preventNativeEvent(e);

  }

})

最后，我们还需要处理History的相关操作，由于变量块本身是脱离编辑器框架的，选区实际上是并没有被编辑器本身感知的。所以这里的undo、redo等操作实际上是无法处理变量块选区的变更，因此这里我们就简单处理一下，避免输入组件undo本身的操作被记录到编辑器内。

public onTextChange(leaf: LeafState, value: string, event: InputEvent) {

  this.editor.state.apply(delta, {

    autoCaret: false,

    // 即使不记录到 History 模块, 仍然存在部分问题

    // 但若是受控处理, 则又存在焦点问题, 因为此时焦点并不在编辑器

    undoable: event.inputType !== "historyUndo" && event.inputType !== "historyRedo",

  });

}

选择器组件

选择器组件主要是固定变量的值，例如上述的的例子中我们将篇幅这个变量固定为短篇、中篇、长篇等选项。这里的实现就比较简单了，主要是选择器组件本身不需要处理选区的问题，其本身就是常规的Embed类型节点，因此只需要实现选择器组件，并且在onChange事件中将值同步到编辑器本身即可。

export class SelectorInputPlugin extends EditorPlugin {

  public key = SEL_KEY;

  public options: SelectorPluginOptions;



  constructor(options?: SelectorPluginOptions) {

    super();

    this.options = options || {};

  }



  public destroy(): void {}



  public match(attrs: AttributeMap): boolean {

    return !!attrs[SEL_KEY];

  }



  public onValueChange(leaf: LeafState, v: string) {

    const rawRange = leaf.toRawRange();

    if (!rawRange) return void 0;

    const delta = new Delta().retain(rawRange.start).retain(rawRange.len, {

      [SEL_VALUE_KEY]: v,

    });

    this.editor.state.apply(delta, { autoCaret: false });

  }



  public renderLeaf(context: ReactLeafContext): React.ReactNode {

    const { attributes: attrs = {} } = context;

    const selKey = attrs[SEL_KEY];

    const value = attrs[SEL_VALUE_KEY] || "";

    const options = this.options.selector || {};

    return (

      <Embed context={context}>

        <SelectorInput

          value={value}

          optionsWidth={this.options.optionsWidth || SEL_OPTIONS_WIDTH}

          onChange={(v: string) => this.onValueChange(context.leafState, v)}

          options={options[selKey] || [value]}

        />

      </Embed>

    );

  }

}

SelectorInput组件则是常规的选择器组件，这里需要注意的是避免该组件被浏览器的选区处理，因此会在MouseDown事件中阻止默认行为。而弹出层的DOM节点则是通过Portal的形式挂载到编辑器外部的节点上，这样自然不会被选区影响。

export const SelectorInput: FC<{ value: string; options: string[]; optionsWidth: number; onChange: (v: string) => void; }> = props => {

  const { editor } = useEditorStatic();

  const [isOpen, setIsOpen] = useState(false);



  const onOpen = (e: React.MouseEvent<HTMLSpanElement>) => {

    if (isOpen) {

      MountNode.unmount(editor, SEL_KEY);

    } else {

      const target = (e.target as HTMLSpanElement).closest(`[${VOID_KEY}]`);

      if (!target) return void 0;

      const rect = target.getBoundingClientRect();

      const onChange = (v: string) => {

        props.onChange && props.onChange(v);

        MountNode.unmount(editor, SEL_KEY);

        setIsOpen(false);

      };

      const Element = (

        <SelectorOptions

          value={props.value}

          width={props.optionsWidth}

          left={rect.left + rect.width / 2 - props.optionsWidth / 2}

          top={rect.top + rect.height}

          options={props.options}

          onChange={onChange}

        ></SelectorOptions>

      );

      MountNode.mount(editor, SEL_KEY, Element);

      const onMouseDown = () => {

        setIsOpen(false);

        MountNode.unmount(editor, SEL_KEY);

        document.removeEventListener(EDITOR_EVENT.MOUSE_DOWN, onMouseDown);

      };

      document.addEventListener(EDITOR_EVENT.MOUSE_DOWN, onMouseDown);

    }

    setIsOpen(!isOpen);

  };



  return (

    <span className="editable-selector" onMouseDownCapture={preventReactEvent} onClick={onOpen}>

      {props.value}

    </span>

  );

};

总结

在本文中我们调研了用户Prompt输入的相关场景实现，且讨论了纯文本输入框模式、表单模版输入模式，还观察了一些有趣的实现方案。最后重点基于富文本编辑器实现了变量模板输入框，特别适配了我们从零实现的编辑器框架BlockKit，并且实现了Editable变量块、选择器变量块等插件。

实际上引入富文本编辑器总是会比较复杂，在简单的场景下直接使用Editable自然也是可行的，特别是类似这种简单的输入框场景，无需处理复杂的性能问题。然而若是要实现更复杂的交互形式，以及多种块结构、插件化策略等，使用富文本编辑器框架还是更好的选择，否则最终还是向着编辑器实现了。

每日一题

• github.com/WindRunnerM…

参考

• http://www.doubao.com/chat/write


• http://www.shadcn.io/ai/prompt-i…


• github.com/ant-design/…


• loop.coze.cn/open/docs/c…


• github.com/WindRunnerM…


• dev.to/gianna/how-…

1. 写在最前面

用了这么久的 Cursor ，还是会时不时的感慨科技使人类进步。尤其是最近的「Claude Sonnet 4」 好用的不得了，在丢给它一个需求之后，从设计方案、到 coding、以及编写 tase case 、修复验证逻辑、甚至还记的 lint 一下，无比贴心。但是随之而来的坏处就是，过分相信 Cursor 之后，不在去理解库是否符合业务场景。

注：尽信书，则不如无书。看来在提升 coding 效率的同时，也要更为慎重的思考每个使用 场景是否符合最初设计的预期。

2. 问题小计

2.1 aiohttp 库

前置说明，笔者并不是很熟悉 Python ，属于一边用，一边学习的状态。接的需求是，在使用 aiohttp 库的时候，能够复用 http client ，无需每次请求都重新建立连接，以达到最终减少请求和返回的耗时的目的。

笔者实现的方式：

def _get_session(self) -> aiohttp.ClientSession:

        if self._session is not  and not self._session.closed:

            return self._session



        new_session = aiohttp.ClientSession(

            timeout=aiohttp.ClientTimeout(total=30),

            connector=aiohttp.TCPConnector(limit=100, enable_cleanup_closed=True),

            trace_configs=[self.trace_config],

        )



        self._session = new_session

        return self._session

注：这当然是 cursor 帮忙给的思路。但是笔者当时大意了，没有细细的深究 aiohttp.ClientTimeout 这字段的意思。

不推卸责任，问题当时是实现代码人的问题，记录在这里，方便下次在类似的改动前，能够在深入探究一步，减少后续返工以及故障的可能性。

先解释一下 aiohttp.ClientTimeout 字段的意思

timeout = aiohttp.ClientTimeout(

    total=,           # 总超时时间

    connect=,         # 连接超时时间

    sock_connect=,    # Socket 连接超时时间

    sock_read=        # Socket 读取超时时间

)

各参数详细说明

• total (float | )
  
  
  
  
  • 整个请求的总超时时间（秒），包括连接建立、发送请求、接收响应的全部时间，默认值：5 分钟 (300 秒)，设置为  表示无限制
  
  
  
  


• connect (float | )
  
  
  
  
  • 建立连接的超时时间（秒），包括 DNS 解析、TCP 连接建立、SSL 握手等，默认值：无限制 ()
  
  
  
  


• sock_connect (float | )
  
  
  
  
  • 底层 socket 连接的超时时间（秒），仅针对 TCP socket 连接建立阶段，默认值：无限制 ()
  
  
  
  


• sock_read (float | )
  
  
  
  
  • Socket 读取数据的超时时间（秒），在连接建立后读取响应数据的超时，默认值：无限制 ()
  
  
  
  

先解释了参数的含义之后，就可以推测到现象是，如果 response 持续返回的时间超过 30s ，就会主动断开连接。

注：除了 aiohttp.ClientTimeout，建议再用 aiohttp.TCPConnector 字段时也要先确认字段的生效规则后使用。

2.2 奇怪的问题

笔者本次提测改动的功能很少，但是 QA 测试的时候报了很多跟功能无关的 jira ，比如：

• start 的时候返回超时报错


• 启动的任务，自动退出查询不到了

注：这种跟改动无任何关系的问题，查起来真的有点子费人……

问题1：start 的时候返回超时报错

结论：最终查下来， start 超时是因为请求的机器，磁盘读写耗时极高，分析下来，可能是因为混用的测试环境，其他服务的测试写入了过多的音视频文件导致……

还好，公司的机器是有 cpu、memery、磁盘等 Zeus 监控的，不然都没办法自证业务的清白了。

注：不过这里虽然机器有问题的可能性比较高，但有一点，我还是没有想通的为什么磁盘耗时高会表现 start 超时呢？印象中业务的 start 行为中没有任何写入磁盘的行为。

cursor 一个比较符合的原因的回答是：

• 依赖库加载：Python模块、动态库加载需要磁盘I/O


• 超时连锁反应：磁盘I/O慢 → 启动步骤延迟 → 健康检查超时 → 服务被认为启动失败

问题2： 启动的任务，自动退出查询不到了

结论：是因为业务消耗的资源的内存变多了，之前 pod 设置的 memory 是 1G，导致 oom 了……

为了能够按时交付版本，本次的改动是先调整部署的 chart ，将 memory 从 1G 调整 2G

至此，那些奇怪的问题就排查完成了。还好，虽然排查的过程有点痛苦，但是还是从中学到了之前不知道的支持，比如dmesg -T 查看内核的输出信息。

3. 碎碎念

终于在十一前，挤出时间来整理了一下最近遇到有些奇怪的问题。希望这个十一能够玩的开心。

• 到底是什么伟大前程，值得我们把每个四季都错过？（ps：读的时候，心理酸酸的


• 人一旦有退路，无论是你愿意还是不愿意接受的退路，就不会用全力了。

大家好，我是不如摸鱼去，uni-app vue3 组件库 wot-ui 的主要维护者，欢迎来到我的工具分享专栏。

前阵子解决网站国内访问慢的问题之前，总有朋友问：“网站太慢了，能离线使用吗？”

答案是：“可以！” 这需求正是 PWA 能解决的嘛！今天我们花几分钟时间，将我的个人博客改造为 PWA ，支持安装到本地并且可以离线访问，我的博客地址: blog.wot-ui.cn/。

PWA 是什么？

渐进式 Web 应用（Progressive Web App，PWA）是一个使用 web 平台技术构建的应用程序，但它提供的用户体验就像一个特定平台的应用程序。

它像网站一样，PWA 可以通过一个代码库在多个平台和设备上运行。它也像一个特定平台的应用程序一样，可以安装在设备上，可以离线和在后台运行，并且可以与设备和其他已安装的应用程序集成。

说句题外话，国内 PWA 的生态位其实是被各大 APP 的小程序占据了，不过小程序各自为战的标准实在是令人头疼，写小程序会让人变得烦恼，写多个平台的小程序会让人变得不幸。你可能会笑，而我却真的在写，wot-ui 组件库为了兼容多平台小程序不知道让我掉了多少头发。

具体定义见: developer.mozilla.org/zh-CN/docs/…

PWA 可以安装到本地,支持离线访问，并将快捷方式放到启动台中。

VitePress 添加 PWA 支持

我博客是使用 VitePress 搭建的，生态里有个现成的插件 @vite-pwa/vitepress，可以为 VitePress 项目添加 PWA 能力。

VitePress 是一个静态站点生成器 (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。 信息来自 vitepress 官网。

1. 安装

# 我用的pnpm，快！

pnpm add @vite-pwa/vitepress -D

# npm/yarn用户自己替换一下

2. 配置（.vitepress/config.mts）

这是核心步骤，直接上我改完的配置，关键地方我加了个**“唠叨版”注释**，解释下为啥这么设：

import { defineConfig } from 'vitepress'

import { withPwa } from '@vite-pwa/vitepress'

export default withPwa(defineConfig({

  // 博客基础信息，老样子

  title: '不如摸鱼去',

  description: '不如摸鱼去的博客，分享前端、uni-app、AI编程相关知识',

  

  // PWA 配置区，重点来了！

  pwa: {

    base: '/',

    scope: '/',

    includeAssets: ['favicon.ico', 'logo.png', 'images/**/*'], // 告诉插件，这些静态资源要缓存起来

    registerType: 'prompt', // 有更新别偷偷刷新，得问问我（用户）同不同意

    injectRegister: 'auto',

    

    // 开发环境专用，关掉烦人的警告

    devOptions: {

      enabled: true,

      suppressWarnings: true, // 开发时警告太多，眼花，先屏蔽

      navigateFallback: '/',

      type: 'module'

    },

    

    // Service Worker 配置，缓存策略的灵魂

    workbox: {

      globPatterns: ['**/*.{js,css,html,ico,png,jpg,jpeg,gif,svg,woff2}'], // 需要缓存哪些类型的文件

      cleanupOutdatedCaches: true, // 老缓存？清理掉！别占地方

      clientsClaim: true, // 新的Service Worker来了，立刻接管页面

      skipWaiting: true, // 新SW别等了，赶紧干活

      maximumFileSizeToCacheInBytes: 10 * 1024 * 1024, // 单个文件最大10MB，再大就不缓存了

      

      // 针对不同资源，用不同缓存策略（这里踩过坑）

      runtimeCaching: [

        // Google Fonts这类外部字体：缓存优先，存久点（一年），反正不常变

        {

          urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,

          handler: 'CacheFirst',

          options: {

            cacheName: 'google-fonts-cache',

            expiration: {

              maxEntries: 10,

              maxAgeSeconds: 60 * 60 * 24 * 365

            }

          }

        },

        // 图片：也缓存优先，但别存太久（30天），万一我换了图呢？

        {

          urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,

          handler: 'CacheFirst',

          options: {

            cacheName: 'images-cache',

            expiration: {

              maxEntries: 100,

              maxAgeSeconds: 60 * 60 * 24 * 30

            }

          }

        }

        // 注意：JS/CSS/HTML Workbox默认会处理，通常用 StaleWhileRevalidate 策略（缓存优先，后台更新）

      ]

    },

    

    // App清单，告诉系统“我是个App！”

    manifest: {

      name: '不如摸鱼去', // 完整名

      short_name: '摸鱼去', // 桌面图标下面显示的短名，太长显示不全

      description: '分享前端、uni-app、AI编程相关知识',

      theme_color: '#ffffff', // 主题色，影响状态栏、启动画面背景

      background_color: '#ffffff', // 启动画面背景色

      display: 'standalone', // 独立显示模式（全屏，无浏览器UI）

      orientation: 'portrait', // 默认竖屏

      scope: '/', // PWA能管哪些页面

      start_url: '/', // 点开图标从哪开始

      icons: [ // 图标！重中之重！

        {

          src: '/logo.png',

          sizes: '192x192',

          type: 'image/png'

        },

        {

          src: '/logo.png',

          sizes: '512x512',

          type: 'image/png'

        },

        {

          src: '/logo.png',

          sizes: '512x512',

          type: 'image/png',

          purpose: 'any maskable' // 这个重要！告诉系统这图标能被裁剪成各种形状（圆的、方的）

        }

      ]

    }

  }

}))

看看效果

部署上线后，浏览器打开 blog.wot-ui.cn/ 会发现地址栏旁边会提示安装应用。

安装后将我们的app放到启动台中就可以快捷访问了，断网后也可以访问，很方便。

搞完之后，有啥变化？

说实话，效果比我预期的好：

• 快！ 二次访问（尤其是同一设备）快多了，静态资源直接读本地缓存，秒开。在没网的地方（比如电梯里），打开博客，之前看过的文章照样能看，体验不掉线。


• 体验升级： 全屏阅读，没有浏览器边框干扰，沉浸感强不少。


• 方便访问： 可以在桌面、启动台创建快捷方式，方便读者找到我们，不需要记忆网址。


• 服务器压力小点： 缓存命中率高了，请求自然少了点。

总结

给 VitePress 博客加PWA，投入产出比真挺高的。主要就是装个插件、改改配置、准备个图标。过程不算复杂，但带来的体验提升是实打实的。如果你的网站访问速度比较慢，或者期望提高用户的粘性，提供一下 PWA 能力还是很不错的。读到这里还不把「不如摸鱼去」博客添加到桌面吗（偷笑）？

参考资料

• VitePress 官网: vitepress.dev/


• @vite-pwa/vitepress: github.com/vite-pwa/vi…


• PWA的MDN: developer.mozilla.org/zh-CN/docs/…

往期精彩

uni-app vue3 也能使用 Echarts？Wot Starter 是这样做的！

当年偷偷玩小霸王，现在偷偷用 Trae Solo 复刻坦克大战

告别 HBuilderX，拥抱现代化！这个模板让 uni-app 开发体验起飞

uni-app 还在手写请求？alova 帮你全搞定！

uni-app 无法实现全局 Toast？这个方法做到了！

Vue3 uni-app 主包 2 MB 危机？1 个插件 10 分钟瘦身

欢迎评论区沟通讨论👇👇

Tauri：从300MB到5MB！这才是桌面应用的未来

你有没有这样的体验？

打开一个用 Electron 写的桌面工具，任务管理器瞬间飙出 300MB+ 内存占用，启动要等好几秒，系统风扇呼呼作响……而它的功能，可能只是一个简单的 Markdown 编辑器。

今天，我要向你介绍一位 Electron 的「性能杀手」——Tauri。

它不仅能让你用 React/Vue/Svelte 构建界面，还能把最终应用打包成 小于 5MB 的安装包，启动速度接近原生！

🚀 什么是 Tauri？颠覆性的轻量级方案

Tauri 是一个基于 Rust 构建的开源框架，允许开发者使用前端技术创建安全、轻量、高性能的跨平台桌面应用。

• ✅ 支持 Windows / macOS / Linux


• ✅ 前端任意框架：React、Vue、Svelte、Solid.js 等


• ✅ 核心逻辑由 Rust 编写，极致安全与性能


• ✅ 即将支持移动端，迈向全平台统一

📊 性能对比：数字会说话

Tauri 的秘诀在于：利用操作系统自带的 WebView，而不是捆绑整个 Chromium。

🛡️ 安全架构：Rust 原生的降维打击

多层安全防护

// Rust 后端：类型安全的系统调用

#[tauri::command]

fn read_file(path: String) -> Result<String, String> {

    std::fs::read_to_string(&path)

        .map_err(|e| format!("读取文件失败: {}", e))

}

即使前端遭遇 XSS 攻击，攻击者也无法越权访问系统资源。

💻 实战演示：5分钟构建文件管理器

1. 项目初始化

npm create tauri-app@latest my-files-app

cd my-files-app

npm install

2. 前端界面（React示例）

import { invoke } from '@tauri-apps/api/tauri';



function FileManager() {

    const [files, setFiles] = useState([]);

    

    const listFiles = async (path) => {

        const fileList = await invoke('list_files', { path });

        setFiles(fileList);

    };

    

    return (

        <div>

            <button onClick={() => listFiles('/')}>浏览文件</button>

            <ul>

                {files.map(file => (

                    <li key={file.name}>{file.name}</li>

                ))}

            </ul>

        </div>

    );

}

3. Rust 后端实现

use std::fs;



#[tauri::command]

fn list_files(path: String) -> Result<Vec<FileInfo>, String> {

    let entries = fs::read_dir(path)

        .map_err(|e| e.to_string())?;

    

    let mut files = Vec::new();

    for entry in entries {

        if let Ok(entry) = entry {

            files.push(FileInfo {

                name: entry.file_name().to_string_lossy().to_string(),

                size: entry.metadata().map(|m| m.len()).unwrap_or(0),

            });

        }

    }

    

    Ok(files)

}

4. 构建发布

npm run tauri build

# 生成 3.8MB 的安装包！

🎯 Tauri 的适用场景

✅ 强烈推荐

• 效率工具：笔记软件、截图工具、翻译软件


• 开发工具：API 测试、数据库管理、日志查看器


• 内部系统：监控面板、数据可视化、配置工具


• 轻量应用：计算器、单位转换、密码管理器

⚠️ 谨慎选择

• 复杂图形渲染（游戏、3D 编辑）


• 重度依赖 Chrome 扩展生态


• 需要支持老旧操作系统

🔮 生态展望：不只是桌面

Tauri 正在快速进化：

💡 迁移策略：从 Electron 平滑过渡

如果你已有 Electron 项目，可以这样迁移：

🌟 总结：为什么 Tauri 是未来？

Tauri 不是另一个 Electron，而是桌面应用开发的范式革命。

它证明了：Web 技术的灵活性 + 原生语言的性能 = 最佳桌面开发方案。

🚀 立即开始

# 1. 安装 Rust

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh



# 2. 创建项目

npm create tauri-app@latest my-app



# 3. 开始开发

npm run tauri dev

💬 互动讨论

• 你在项目中用过 Tauri 吗？体验如何？


• 你认为 Tauri 会取代 Electron 吗？


• 最期待 Tauri 的哪些新特性？

欢迎在评论区分享你的观点！如果觉得这篇文章有帮助，请点赞支持～

详细解释：

总结：

• 当前代码中使用了 return createRequest(...)，这是正确的做法，可以确保错误被传播并阻止后续执行。


• 如果不加 return，即使 URL 校验失败，beforeSubmit 也会成功返回，表单提交可能会继续，这不符合预期。

前端性能基准测试入门：用 Benchmark.js 做出数据驱动的选择

背景

在前端开发过程中，会有一些需要注重代码性能的场景，比如：一个复杂功能依赖的数据基于嵌套数组实现（比如支持拖拽的行程规划需要有行程单、日期、时间、地点等多种维度的数据）、一个功能需要前端来做大量数据的计算。

在这些场景中，同样的操作我们会针对不同的实现方式进行测试，来得到不同实现方式的性能差异，便于选择最优的实现方式。

为什么使用 Benchmark.js

我最开始其实也有这样的疑问，为什么不能 直接在本地执行一遍代码，然后自己计算执行时间来 测试性能？

详细了解相关资料后发现会有以下几个问题：

专业的事情还是要交给专业的人去做，就好像在实验室进行专业温度测量不会使用体温计一样。我们可以使用 Benchmark.js 为我们进行更加精确的基准测试。

Benchmark.js 基本使用

Benchmark.js 官方的文档写的比较晦涩，不太利于新手阅读，下面会通过一个简单的例子来介绍如何使用 Benchmark.js 进行性能测试。

引入或安装 Benchmark.js

在浏览器环境中可以使用 CDN 引入，在 Node.js 环境中可以使用 npm 安装。

需要特别注意的是：benchmark.js 依赖于 lodash.js，所以通过 Script 引入时需要先引入 lodash.js。（使用 npm 安装时会自动处理依赖，无需手动引入 lodash）

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/benchmark@2.1.4/benchmark.min.js"></script>

npm install benchmark

创建套件

Benchmark.js 默认提供了一个构造函数，我们可以通过这个构造函数来创建一个性能测试的实例，通常会把这个内容叫做 suite 套件。在 Benchmark.js 里，每次测试都是以一个 suite 套件为范围的。

const Benchmark = require("benchmark");

const suite = new Benchmark.Suite();

添加测试用例

有了套件之后，我们就可以往套件中添加测试用例了。假设我们有一段简单的数据，需要计算出数组中每个元素的平方最后加和。那实现方式可能会包含以下两种：