给你一个数组 events，其中 events[i] = [startDayi, endDayi] ，表示会议 i 开始于 startDayi ，结束于 endDayi 。
你可以在满足 startDayi <= d <= endDayi 中的任意一天 d 参加会议 i 。在任意一天 d 中只能参加一场会议。
请你返回你可以参加的 最大 会议数目。
示例 1：
输入：events = [[1,2],[2,3],[3,4]] 输出：3 解释：你可以参加所有的三个会议。 安排会议的一种方案如上图。 第 1 天参加第一个会议。 第 2 天参加第二个会议。 第 3 天参加第三个会议。
示例 2：
输入：events= [[1,2],[2,3],[3,4],[1,2]] 输出：4
提示：
登录
1 <= events.length <= 105events[i].length == 21 <= startDayi <= endDayi <= 105Babel 是现代 JavaScript 开发中不可或缺的工具链核心，它让开发者能够使用最前沿的 JavaScript 特性，同时确保代码能在各种浏览器和环境中运行。
Babel 是一个 JavaScript 编译器（更准确说是转译器），主要功能包括：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
@babel/preset-env不包含任何未进入 Stage 3 阶段的 JavaScript 语法提案，因为在 TC39 的流程中，未进入 Stage 3 阶段的提案是不会被任何浏览器所实现的。 如果确有需要，可以手动设置。通过设置shippedProposals参数可以包含进入 Stage 3 阶段并且已经被部分浏览器实现的提案
babel.config.json
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
]
]
}
npx babel src --out-dir dist
src: 源文件夹dist: 输出文件夹| Preset | 功能 |
|---|---|
@babel/preset-env |
智能转换 ES6+ 语法 |
@babel/preset-react |
转换 JSX 语法 |
@babel/preset-typescript |
转换 TypeScript |
@babel/preset-env
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": "3.32"
}
]
]
}
@babel/preset-env 包含几十个插件）@babel/plugin-transform-arrow-functions）插件和预设可以组合使用也可以各自单独使用
这意味着如果两个转换插件都将处理“程序（Program）”的某个代码片段，则将根据转换插件或 preset 的排列顺序依次执行。
箭头函数插件，此插件包含于@babel/preset-env中。
npm install --save-dev @babel/plugin-transform-arrow-functions
babel.config.json中添加配置{
"plugins": [["@babel/plugin-transform-arrow-functions", { "spec": true }]]
}
spec:这个是插件编译的选项，每个插件都有自己不同的编译选项// 源文件箭头函数
[1, 2, 3].map(n => n * 2);
// { "spec": false }]
"use strict";
[1, 2, 3].map(function (n) {
return n * 2;
});
// { "spec": true }]
"use strict";
var _this = void 0;
function _newArrowCheck(n, r) { if (n !== r) throw new TypeError("Cannot instantiate an arrow function"); }
[1, 2, 3].map(function (n) {
_newArrowCheck(this, _this);
return n * 2;
}.bind(void 0));
如果你喜欢本教程，记得点赞+收藏！关注我获取更多JavaScript开发干货。
我们在使用脚手架 Vue cli 或者 Vite 创建 Vue 项目的时候，会发现在 css 样式标签那里有一个 lang="scss" 的属性，那 scss 是什么玩意?
专业术语：SCSS 是一种预处理器语言，是 CSS 的一种扩展。
大白话： SCSS 就像是游戏中的 Buff，因为它支持定义变量、嵌套、混合等功能，所以它会让 CSS 变得更加强大，并且更容易维护。
使用 SCSS 这玩意之后，编译后的代码还是 CSS。
作用： 主要用来存一些重复使用的值，比如尺寸、颜色等等。方便统一管理。
定义变量语法规则： 以 **∗∗开头，并且 后面不能直接跟数字。
// 定义变量
$bgColor: #a173f3;
$spaceSize: 20px;
// 使用变量
.header {
background: $bgColor;
padding: $spaceSize;
}
作用：可以很直观的展示 html 结构层级关系，减少重复代码
.div {
ul {
li {
display: block;
a {
color: red;
&:hover { // & 表示父选择器
text-decoration: underline;
}
}
}
}
}
**注：**在 SCSS 中，& 符号用于引用父元素类名，实现嵌套规则的简化书写。例如：
.father {
&-container {
margin: 66px;
}
&-text {
font-size: 20px;
}
}
编译后对应的CSS代码为：
.father-container {
margin: 66px;
}
.father-text {
font-size: 20px;
}
作用：就像 js 中的函数一样，是一个可以重复利用的样式代码块，并且支持参数。
@mixin 用来定义样式代码块，@include 用来使用样式代码块。
// 定义 Mixin
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}
// 使用 Mixin
.button {
@include border-radius(5px);
}
作用：继承可以让一个选择器继承另一个选择器的样式。就是儿子继承爹的样式。
// 定义基础样式
.father-style {
color: $primary-color;
font-size: $font-size;
}
// 继承样式
.son-style {
@extend .father-style;
font-size: 20px;
}
作用：在 css 中对数值进行加减乘除操作
$base-size: 10px;
.header-content {
font-size: $base-size * 3; // 30px
width: 100% - 40%; // 60%
padding: ($base-size / 5); // 2px
}
作用：SCSS 提供了一些内置函数，也可以自定义函数，用来计算值。
// 使用内置函数
body {
font-size: em(16px);
}
// 自定义函数
@function doubleTwo($num) {
@return $num * 2;
}
// 使用自定义函数
.header {
height: doubleTwo(66px);
}
作用：动态生成样式：if判断、for循环、each 遍历。
// If 判断
@mixin myStyle($flag: false) {
@if $flag {
background: red;
color: white;
} @else {
background: green;
color: black;
}
}
// For 循环
@for $i from 1 to 10 {
.col-#{$i} {
width: 100% / $i;
}
}
// Each 遍历
$sizes: small, medium, large;
@each $size in $sizes {
.icon-#{$size} {
font-size: if($size==large, 14px,20px);
}
}
作用：就是根据一些功能拆分文件，便于统一管理和维护。 例如你可以新建一个 myVariables.scss 文件，专门用来存储变量：
// 定义变量
$primary-color: #3FAF60;
$background-color: red;
$font-size: 18px;
然后在另外一个 scss 文件中导入使用：
@import "../scss/myVariables.css";
.button {
padding: 15px;
font-size: $font-size;
background-color: $primary-color;
}
其实我们常用的做法是建一个 main.scss 文件，然后导入一些全局样式：
// 导入基础样式
@import "base/variables";
@import "base/mixins";
// 导入组件样式
@import "components/button";
@import "components/card";
// 导入布局样式
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
// 导入页面样式
@import "pages/home";
@import "pages/about";
// 导入主题样式
@import "themes/light";
其实我们使用的脚手架 Vue cli 或者 Vite 本身都集成了对 scss 语法的支持，只不过我们需要在项目中安装依赖：
# Vue CLI 脚手架
npm install sass sass-loader@10 -D
# Vite 脚手架
npm install sass -D
安装依赖之后我们在 style 标签上面添加 lang="scss" 表示对 scss 的支持。另外我们通常会加上 scoped 属性表示这些样式只限制在本页面使用。
我们在安装 scss 依赖时发现是 npm install sass。那 sass 和 scss 什么关系？
回答：
sass 和 scss 是同一种预处理器语言的不同语法版本，scss 是 Sass 的超集，兼容 sass 语法和 CSS 语法。
其实 CSS 最开始的预处理语言是 sass，后来 sass 3 版本引入了 scss 的语法扩展。说白了就是 scss 比 sass 更牛逼，更好用，但是 scss 基于 sass。所以你 npm install 的是 sass。
**回答：**SCSS 可以看作是增强版的 CSS，支持变量、嵌套、混合等一些非常高级的特性。
最近开发的时候发现很多ui图上面的标题都是带有渐变效果的，这里就记录一下前端实现文字渐变的几种方式。
完整效果如下
通过给文字容器的背景设置渐变颜色，并使用background-clip属性，将其以文字内容进行裁切。最后使用text-fill-color属性，给文字设置透明填充来实现
| 属性名称 | 值 | 效果 |
|---|---|---|
| background | linear-gradient(to top, #b1495a, #c71a44) | 给文字容器设置渐变背景色 |
| background-clip | text | 背景被裁切成文字的前景色 |
| text-fill-color | transparent | 文字的填充颜色 |
效果如下
.up-gradient {
background: linear-gradient(to top, #b1495a, #c71a44);
/* 背景被裁剪成文字的前景色。 */
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
.down-gradient {
background: linear-gradient(to bottom, #b1495a, #c71a44);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
.left-gradient {
background: linear-gradient(to left, #b1495a, #c71a44);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
.right-gradient {
background: linear-gradient(to right, #b1495a, #c71a44);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
/* 多颜色渐变 */
.multi-gradient {
background: linear-gradient(90deg, #b1495a 10%, #c71a44 50%, #ffb86c 80%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
html 结构
<body>
<div class="container">
<h1>CSS实现文字渐变</h1>
<!-- css版本 -->
<article class="panel">
<div class="panel-box-title">CSS版:</div>
<div class="box">
<div class="content-text up-gradient">向上渐变</div>
<div class="content-text down-gradient">向下渐变</div>
<div class="content-text left-gradient">向左渐变</div>
<div class="content-text right-gradient">向右渐变</div>
<!-- 设置多个颜色 -->
<div class="content-text multi-gradient">多颜色渐变</div>
</div>
</article>
</div>
</body>
canvas中的文字渐变的实现方式就很简单了，因为canvas可以直接给文字设置渐变样式。
主要用到createLinearGradient方法，用来创建一个线性渐变，addColorStop设置渐变的色标，就像是这个效果
最后再用fillStyle指定使用我们创建的渐变对象即可
效果如下
核心代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文字渐变</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<!-- canvas版本 -->
<article class="panel">
<div class="panel-box-title">Canvas版:</div>
<div class="box">
<canvas id="canvas" height="180" width="900"></canvas>
</div>
</article>
</div>
</body>
<script>
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.font = '32px Arial'
// 从左到右的渐变文字
const leftToRightGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
leftToRightGradient.addColorStop(0, '#fff')
leftToRightGradient.addColorStop(1, '#000')
ctx.fillStyle = leftToRightGradient
ctx.fillText('Canvas 从左到右渐变', 20, 40)
// 从上到下的渐变文字
const topToBottomGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)
topToBottomGradient.addColorStop(0, '#fff')
topToBottomGradient.addColorStop(1, '#000')
ctx.fillStyle = topToBottomGradient
ctx.fillText('Canvas 从上到下渐变', 20, 80)
// 从右到左的渐变文字
const rightToLeftGradient = ctx.createLinearGradient(canvas.width, 0, 0, 0)
rightToLeftGradient.addColorStop(0, '#fff')
rightToLeftGradient.addColorStop(1, '#000')
ctx.fillStyle = rightToLeftGradient
ctx.fillText('Canvas 从右到左渐变', 20, 120)
// 从下到上的渐变文字
const bottomToTopGradient = ctx.createLinearGradient(0, canvas.height, 0, 0)
bottomToTopGradient.addColorStop(0, '#fff')
bottomToTopGradient.addColorStop(1, '#000')
ctx.fillStyle = bottomToTopGradient
ctx.fillText('Canvas 从下到上渐变', 20, 160)
</script>
</html>
SVG 文字渐变的核心原理是使用 SVG 的<linearGradient>定义渐变，然后通过fill="url(#gradientId)"将渐变应用到文字上。
渐变效果如下
核心代码如下
<svg width="900" height="180" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 从左到右渐变 -->
<linearGradient
id="leftToRight"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
<!-- 从上到下渐变 -->
<linearGradient
id="topToBottom"
x1="0%"
y1="0%"
x2="0%"
y2="100%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
<!-- 从右到左渐变 -->
<linearGradient
id="rightToLeft"
x1="100%"
y1="0%"
x2="0%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
<!-- 从下到上渐变 -->
<linearGradient
id="bottomToTop"
x1="0%"
y1="100%"
x2="0%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
</defs>
<!-- 从左到右渐变文字 -->
<text
x="20"
y="40"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#leftToRight)"
>
SVG 从左到右渐变
</text>
<!-- 从上到下渐变文字 -->
<text
x="20"
y="80"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#topToBottom)"
>
SVG 从上到下渐变
</text>
<!-- 从右到左渐变文字 -->
<text
x="20"
y="120"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#rightToLeft)"
>
SVG 从右到左渐变
</text>
<!-- 从下到上渐变文字 -->
<text
x="20"
y="160"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#bottomToTop)"
>
SVG 从下到上渐变
</text>
</svg>
index.css
样式代码
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
color: #fff;
font-family: 'Segoe UI', 'Arial', sans-serif;
font-size: 16px;
line-height: 1.5;
display: flex;
flex-direction: column;
align-items: center;
user-select: none;
}
/* 外层容器 */
.container {
width: 80%;
max-width: 900px;
margin: 40px auto;
padding: 24px;
background: #181c24;
border-radius: 18px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
border: 1.5px solid #232936;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.panel {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
.panel-box-title {
font-weight: bold;
color: #ffb86c;
text-shadow: 0 2px 8px #181c24cc;
}
/* 通用文字样式 */
.content-text {
font-size: 32px;
font-weight: bold;
}
.box {
background: #191b22;
border-radius: 14px;
padding: 24px;
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.32);
display: flex;
flex-direction: column;
border: 1.5px solid #232936;
transition: box-shadow 0.2s, border 0.2s;
position: relative;
overflow: hidden;
z-index: 1;
}
.box:hover {
box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.76);
border: 1.5px solid #3a3f4b;
}
.up-gradient {
background: linear-gradient(to top, #b1495a, #c71a44);
/* 背景被裁剪成文字的前景色。 */
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
.down-gradient {
background: linear-gradient(to bottom, #b1495a, #c71a44);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
.left-gradient {
background: linear-gradient(to left, #b1495a, #c71a44);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
.right-gradient {
background: linear-gradient(to right, #b1495a, #c71a44);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
/* 多颜色渐变 */
.multi-gradient {
background: linear-gradient(90deg, #b1495a 10%, #c71a44 50%, #ffb86c 80%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文字渐变</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<h1>前端实现文字渐变的几种方式</h1>
<!-- css版本 -->
<article class="panel">
<div class="panel-box-title">CSS版:</div>
<div class="box">
<div class="content-text up-gradient">向上渐变</div>
<div class="content-text down-gradient">向下渐变</div>
<div class="content-text left-gradient">向左渐变</div>
<div class="content-text right-gradient">向右渐变</div>
<!-- 设置多个颜色 -->
<div class="content-text multi-gradient">多颜色渐变</div>
</div>
</article>
<!-- canvas版本 -->
<article class="panel">
<div class="panel-box-title">Canvas版:</div>
<div class="box">
<canvas id="canvas" height="180" width="900"></canvas>
</div>
</article>
<!-- svg版本 -->
<article class="panel">
<div class="panel-box-title">SVG版:</div>
<div class="box">
<svg width="900" height="180" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 从左到右渐变 -->
<linearGradient
id="leftToRight"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
<!-- 从上到下渐变 -->
<linearGradient
id="topToBottom"
x1="0%"
y1="0%"
x2="0%"
y2="100%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
<!-- 从右到左渐变 -->
<linearGradient
id="rightToLeft"
x1="100%"
y1="0%"
x2="0%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
<!-- 从下到上渐变 -->
<linearGradient
id="bottomToTop"
x1="0%"
y1="100%"
x2="0%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
</defs>
<!-- 从左到右渐变文字 -->
<text
x="20"
y="40"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#leftToRight)"
>
SVG 从左到右渐变
</text>
<!-- 从上到下渐变文字 -->
<text
x="20"
y="80"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#topToBottom)"
>
SVG 从上到下渐变
</text>
<!-- 从右到左渐变文字 -->
<text
x="20"
y="120"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#rightToLeft)"
>
SVG 从右到左渐变
</text>
<!-- 从下到上渐变文字 -->
<text
x="20"
y="160"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#bottomToTop)"
>
SVG 从下到上渐变
</text>
</svg>
</div>
</article>
</div>
</body>
<script>
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.font = '32px Arial'
// 从左到右的渐变文字
const leftToRightGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
leftToRightGradient.addColorStop(0, '#fff')
leftToRightGradient.addColorStop(1, '#000')
ctx.fillStyle = leftToRightGradient
ctx.fillText('Canvas 从左到右渐变', 20, 40)
// 从上到下的渐变文字
const topToBottomGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)
topToBottomGradient.addColorStop(0, '#fff')
topToBottomGradient.addColorStop(1, '#000')
ctx.fillStyle = topToBottomGradient
ctx.fillText('Canvas 从上到下渐变', 20, 80)
// 从右到左的渐变文字
const rightToLeftGradient = ctx.createLinearGradient(canvas.width, 0, 0, 0)
rightToLeftGradient.addColorStop(0, '#fff')
rightToLeftGradient.addColorStop(1, '#000')
ctx.fillStyle = rightToLeftGradient
ctx.fillText('Canvas 从右到左渐变', 20, 120)
// 从下到上的渐变文字
const bottomToTopGradient = ctx.createLinearGradient(0, canvas.height, 0, 0)
bottomToTopGradient.addColorStop(0, '#fff')
bottomToTopGradient.addColorStop(1, '#000')
ctx.fillStyle = bottomToTopGradient
ctx.fillText('Canvas 从下到上渐变', 20, 160)
</script>
</html>
日常开发中还是css版本的比较常用。另外两种，只有在特定环境下才有用。
2025.03.25 - 2025.07.06 更新前端面试问题总结（12道题）
获取更多面试相关问题可以访问
github 地址: github.com/pro-collect…
gitee 地址: gitee.com/yanleweb/in…
目录：
中级开发者相关问题【共计 5 道题】
高级开发者相关问题【共计 5 道题】
资深开发者相关问题【共计 2 道题】
微前端架构有哪些主流框架可以选， 各有啥优劣势？【热度: 554】【工程化】【出题公司: 腾讯】
如何将一个非常到大的 spa 应用， 迁移到微前端架构， 有哪些考虑因素【热度: 754】【工程化】
关键词：Web Components
Web Components 是一套用于构建可复用、封装性强的 Web 组件的标准，它允许开发者创建自定义 HTML 元素，这些元素具有独立的功能、样式和行为，可在不同项目中重复使用。
HTMLElement 或其他内置元素类来创建新元素。
class MyButton extends HTMLElement {
connectedCallback() {
this.innerHTML = "<button>点击我</button>";
}
}
customElements.define("my-button", MyButton);
<template> 标签定义可复用的模板，模板内容在运行时才会被解析。
<template id="buttonTemplate">
<style>
button {
color: blue;
}
</style>
<button>自定义按钮</button>
</template>
Shadow DOM 是 Web Components 的关键特性，它为组件提供了封装的 DOM 环境，具有以下核心特点：
element.attachShadow() 方法创建。<slot> 元素将 Light DOM 内容插入到 Shadow DOM 中。const shadowRoot = element.attachShadow({ mode: "open" }); // open 模式允许外部访问 shadowRoot
// 或 mode: 'closed' 模式禁止外部访问
shadowRoot.innerHTML = `
<style>p { color: red; }</style>
<p>Shadow DOM 内容</p>
`;
<slot name="xxx"> 定义插槽，允许外部内容以灵活方式插入组件。<video>、<audio> 等标签内部使用了 Shadow DOM。Web Components 和 Shadow DOM 是前端组件化的重要标准，通过封装性解决了传统前端开发中样式污染、代码复用性差的问题，为构建大型应用提供了更规范的解决方案。随着浏览器支持度的提升，它们已成为现代前端开发的核心技术之一。
前端倒计时出现误差是常见问题，主要由 JavaScript 的单线程特性、浏览器优化（如标签页切换时的节流）以及事件循环调度延迟引起。以下是几种解决方案：
Date.now() 依赖系统时间，可能被用户或系统修改；而 performance.now() 提供更精确的时间测量，且不受系统时间影响。
function countDown(targetTime) {
const startTime = performance.now();
const totalMs = targetTime - Date.now(); // 目标时间与当前时间的差值
function update() {
const elapsedMs = performance.now() - startTime;
const remainingMs = Math.max(0, totalMs - elapsedMs);
// 更新UI
const seconds = Math.floor(remainingMs / 1000);
console.log(`剩余时间：${seconds}秒`);
if (remainingMs > 0) {
requestAnimationFrame(update);
}
}
requestAnimationFrame(update);
}
通过 AJAX 请求定期获取服务器时间，减少累计误差：
let serverTimeOffset = 0;
// 同步服务器时间
async function syncServerTime() {
try {
const response = await fetch("/api/time"); // 后端接口返回当前时间戳
const serverTime = await response.json();
serverTimeOffset = serverTime - Date.now();
} catch (error) {
console.error("同步服务器时间失败:", error);
}
}
// 初始化同步
syncServerTime();
// 每小时同步一次
setInterval(syncServerTime, 3600000);
// 使用同步后的时间计算倒计时
function getAccurateTime() {
return Date.now() + serverTimeOffset;
}
根据实际流逝时间与预期流逝时间的差值，动态调整下一次执行的延迟：
function preciseInterval(callback, delay) {
let nextTime = Date.now() + delay;
function interval() {
const currentTime = Date.now();
const drift = currentTime - nextTime; // 计算误差
callback();
nextTime += delay;
// 动态调整下一次执行时间
const nextDelay = Math.max(0, delay - drift);
setTimeout(interval, nextDelay);
}
setTimeout(interval, delay);
}
// 使用示例
preciseInterval(() => {
console.log("精确执行");
}, 1000);
将倒计时逻辑放在 Web Worker 中，避免主线程阻塞：
// main.js
const worker = new Worker("worker.js");
worker.onmessage = (e) => {
if (e.data.type === "update") {
console.log(`剩余时间：${e.data.seconds}秒`);
}
};
// worker.js
let targetTime;
self.onmessage = (e) => {
if (e.data.type === "start") {
targetTime = e.data.targetTime;
startCountdown();
}
};
function startCountdown() {
function update() {
const remainingMs = Math.max(0, targetTime - Date.now());
const seconds = Math.floor(remainingMs / 1000);
self.postMessage({ type: "update", seconds });
if (remainingMs > 0) {
setTimeout(update, 1000);
}
}
update();
}
利用 requestAnimationFrame 的高刷新率（约 60fps）实现平滑倒计时：
function smoothCountdown(targetTime) {
function update() {
const remainingMs = Math.max(0, targetTime - Date.now());
const seconds = Math.floor(remainingMs / 1000);
// 更新UI
console.log(`剩余时间：${seconds}秒`);
if (remainingMs > 0) {
requestAnimationFrame(update);
}
}
requestAnimationFrame(update);
}
优先使用高精度时间：performance.now() 比 Date.now() 更可靠。
定期同步服务器时间：减少长时间运行的累计误差。
动态调整间隔：补偿 JavaScript 事件循环的延迟。
避免长时间 setTimeout：改用递归 setTimeout 或 requestAnimationFrame。
标签页可见性处理：使用 document.visibilityState 在页面不可见时暂停倒计时，可见时重新同步。
在前端开发中，使元素滚动到可视区域是常见需求。以下是几种实现方式，从简单到复杂逐步介绍：
这是最简单的原生方法，支持平滑滚动和对齐方式：
// 立即滚动到元素顶部与视口顶部对齐
element.scrollIntoView();
// 平滑滚动到元素底部与视口底部对齐
element.scrollIntoView({
behavior: "smooth", // 平滑滚动
block: "end", // 垂直对齐方式：start | center | end | nearest
inline: "nearest", // 水平对齐方式：start | center | end | nearest
});
优点：简单易用，兼容性好（IE11+）。
缺点：无法精确控制滚动速度或添加自定义动画。
计算元素位置后滚动窗口：
// 获取元素相对于文档顶部的位置
const rect = element.getBoundingClientRect();
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const targetY = rect.top + scrollTop;
// 平滑滚动到目标位置
window.scrollTo({
top: targetY,
behavior: "smooth",
});
// 或者使用 scrollBy 相对滚动
window.scrollBy({
top: rect.top, // 相对于当前位置的偏移量
behavior: "smooth",
});
优点：灵活控制目标位置。
缺点：需手动计算位置，不适合复杂布局。
使用 requestAnimationFrame 实现更精细的滚动控制：
function smoothScroll(element) {
const target = element.getBoundingClientRect().top;
const duration = 500; // 动画持续时间（毫秒）
let startTime = null;
function animation(currentTime) {
if (!startTime) startTime = currentTime;
const timeElapsed = currentTime - startTime;
const progress = Math.min(timeElapsed / duration, 1);
const easeProgress = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress); // 缓动函数
window.scrollTo(0, window.scrollY + target * easeProgress);
if (progress < 1) {
requestAnimationFrame(animation);
}
}
requestAnimationFrame(animation);
}
// 使用示例
smoothScroll(document.getElementById("target"));
优点：完全自定义动画效果和速度曲线。
缺点：代码复杂度较高。
如果元素在滚动容器内（而非整个页面），需滚动容器本身：
const container = document.getElementById("scroll-container");
const child = document.getElementById("child-element");
// 计算子元素相对于容器的位置
const containerRect = container.getBoundingClientRect();
const childRect = child.getBoundingClientRect();
const offsetTop = childRect.top - containerRect.top;
// 滚动容器
container.scrollTo({
top: container.scrollTop + offsetTop,
behavior: "smooth",
});
使用 CSS scroll-snap-type 创建吸附效果：
.scroll-container {
scroll-snap-type: y mandatory; /* 垂直滚动，强制吸附 */
overflow-y: auto;
height: 300px; /* 容器高度 */
}
.scroll-item {
scroll-snap-align: start; /* 吸附到容器起始位置 */
height: 100%; /* 每个项目占满容器高度 */
}
<div class="scroll-container">
<div class="scroll-item">项目1</div>
<div class="scroll-item">项目2</div>
<div class="scroll-item">项目3</div>
</div>
优点：纯 CSS 实现，性能优秀。
缺点：仅控制吸附位置，无法主动触发滚动。
如 smooth-scroll 或 scrollreveal：
// 安装：npm install smooth-scroll
import SmoothScroll from "smooth-scroll";
// 初始化
const scroll = new SmoothScroll('a[href*="#"]', {
speed: 500,
easing: "easeInOutCubic",
});
// 触发滚动
scroll.animateScroll(document.getElementById("target"));
scrollIntoView()。requestAnimationFrame 或第三方库。scrollTop/scrollLeft。scroll-snap-type。无论选择哪种方式，都要考虑元素是否在视口中、滚动方向以及用户设备兼容性。
scrollIntoView()、scrollIntoViewIfNeeded() 和 scrollTo() 是 JavaScript 中用于滚动的三个方法，它们的功能和适用场景有所不同：
behavior：滚动行为，可选 smooth（平滑滚动）或 auto（瞬间滚动，默认值）。block：垂直对齐方式，可选 start（元素顶部与视口顶部对齐）、center（居中）、end（底部对齐）或 nearest（最近边缘）。inline：水平对齐方式，可选 start、center、end 或 nearest。// 平滑滚动到元素顶部对齐
element.scrollIntoView({ behavior: "smooth", block: "start" });
centerIfNeeded：布尔值（仅 WebKit 浏览器支持，如 Chrome/Safari）。
true：将元素居中显示（默认值）。false：将元素滚动到最近的边缘（顶部或底部）。// 仅在元素不可见时滚动（Chrome/Safari）
element.scrollIntoViewIfNeeded(true);
window.scrollTo()：滚动整个页面。element.scrollTo()：滚动特定容器（如 <div class="scrollable">）。scrollTo(x, y)，指定目标位置的绝对坐标。top：垂直滚动位置（像素）。left：水平滚动位置（像素）。behavior：滚动行为，同 scrollIntoView()。// 滚动到页面 (0, 500) 位置
window.scrollTo({ top: 500, behavior: "smooth" });
// 滚动容器内的元素
const container = document.querySelector(".scrollable");
container.scrollTo({ left: 200, behavior: "smooth" });
| 方法 | 作用对象 | 触发条件 | 定位方式 | 兼容性 |
|---|---|---|---|---|
scrollIntoView() |
元素自身 | 始终触发滚动 | 基于元素位置对齐 | 全浏览器支持 |
scrollIntoViewIfNeeded() |
元素自身 | 仅元素不可见时触发 | 自动选择最佳位置 | Chrome/Safari |
scrollTo() |
窗口或容器 | 始终触发滚动 | 指定绝对坐标 | 全浏览器支持 |
scrollIntoView()，适合固定导航栏跳转或表单错误定位。scrollIntoViewIfNeeded()，适合懒加载内容或动态列表。scrollTo()，适合实现进度条或分步表单。例如：
// 平滑滚动到页面顶部
window.scrollTo({ top: 0, behavior: "smooth" });
// 将错误提示滚动到可视区
errorElement.scrollIntoView({ block: "center", behavior: "smooth" });
// 仅在图片不可见时滚动到它（Chrome/Safari）
imageElement.scrollIntoViewIfNeeded();
选择合适的方法能提升用户体验，避免不必要的页面抖动。
decodeURI() 和 decodeURIComponent() 是 JavaScript 中用于解码 URI（统一资源标识符）的两个方法，它们的核心区别在于解码范围和适用场景。
在 URI 中，某些字符（如空格、特殊符号）需要被编码为 % 后跟两位十六进制数。例如：
%20
& 被编码为 %26
# 被编码为 %23
| 方法 | 解码范围 | 保留字符 | 典型应用场景 |
|---|---|---|---|
decodeURI() |
解码整个 URI（如 http://example.com/path?query=value） |
;/?:@&=+$,#（URI 分隔符） |
解码完整 URL |
decodeURIComponent() |
解码 URI 的组件部分（如查询参数、路径片段） | 无保留字符（解码所有 % 编码） |
解码查询参数或路径参数 |
const encodedUrl = "http://example.com/path%2Fsubpath?param1=value1%26param2=value2";
// 使用 decodeURI()
decodeURI(encodedUrl);
// 输出：http://example.com/path/subpath?param1=value1%26param2=value2
// 注意：路径分隔符 `/`（%2F）和解码，但查询参数中的 `&`（%26）未解码
// 使用 decodeURIComponent()
decodeURIComponent(encodedUrl);
// 报错：URIError: malformed URI sequence
// 原因：完整 URL 中的分隔符（如 `?`、`&`）被错误解码
const encodedParam = "key1=value1%26key2=value2%23hash";
// 使用 decodeURI()
decodeURI(encodedParam);
// 输出：key1=value1%26key2=value2%23hash
// 注意：`&`（%26）和 `#`（%23）未被解码
// 使用 decodeURIComponent()
decodeURIComponent(encodedParam);
// 输出：key1=value1&key2=value2#hash
// 正确解码所有参数部分
误用 decodeURI() 处理参数：若 URL 参数包含 &、= 等符号，decodeURI() 不会解码它们，导致参数解析错误。
// 错误示例：查询参数中的 `&` 未被解码
const query = "name=John%26Doe";
decodeURI(query); // "name=John%26Doe"（错误）
// 正确方式
decodeURIComponent(query); // "name=John&Doe"（正确）
误用 decodeURIComponent() 处理完整 URL：会破坏 URL 结构（如路径分隔符被解码）。
const url = "http://example.com/path%3Fparam=value"; // 假设路径中包含 `?`
decodeURIComponent(url); // "http://example.com/path?param=value"（错误，路径被截断）
使用 decodeURI() 时：
window.location.href）。?、&、/）。使用 decodeURIComponent() 时：
口诀：
完整 URL → decodeURI()
参数片段 → decodeURIComponent()
关键词：内存机制、内存泄露
关键词：内存机制、内存泄露
关键词：内存机制、内存泄露
V8 是 Google 开发的 JavaScript 引擎，采用自动垃圾回收机制管理内存，其核心流程包括：
Number、String、Boolean）和函数调用栈，由引擎自动分配/释放。Object、Array、Function），需手动分配（通过 new 等操作），由垃圾回收器自动回收。V8 使用分代回收策略，将堆内存分为新生代和老生代，针对不同生命周期的对象采用不同回收算法：
Scavenge（复制算法）。From 和 To 两个区域，存活对象从 From 复制到 To，清空 From 并交换区域角色。Mark-Sweep（标记-清除）和 Mark-Compact（标记-整理）结合。内存泄漏指不再使用的对象因被错误引用而无法被 GC 回收，常见场景包括：
element.onclick = element）。setInterval/setTimeout 创建的回调函数未及时取消。obj.a = obj.b; obj.b = obj.a）。function outer() {
const largeData = new Array(1000000).fill(1); // 大数组
function inner() {
// 仅使用部分数据时，仍引用整个 largeData
return largeData.slice(0, 10);
}
return inner; // 闭包持有 largeData 引用
}
const fn = outer(); // largeData 无法释放
function outer() {
const largeData = new Array(1000000).fill(1);
const neededData = largeData.slice(0, 10); // 提取必要数据
function inner() {
return neededData; // 闭包仅引用 small data
}
return inner;
}
let globalFn = null;
function createClosure() {
const obj = { key: "value" };
globalFn = function () {
return obj; // 闭包引用 obj
};
}
createClosure();
// 后续不再需要 globalFn 时，未置为 null
let globalFn = null;
function createClosure() {
const obj = { key: "value" };
globalFn = function () {
return obj;
};
}
createClosure();
// 释放闭包
globalFn = null; // obj 失去引用，可被 GC 回收
const cache = new WeakMap(); // 弱引用 map
function outer(obj) {
cache.set(obj, function () {
// 闭包引用 obj，但 WeakMap 不阻止 obj 被回收
return obj.property;
});
return cache.get(obj);
}
WeakMap 的键为弱引用，若对象无其他引用则会被回收，闭包自动失效。function createCycle() {
const a = { name: "a" };
const b = { name: "b" };
a.ref = b; // a 引用 b
b.ref = a; // b 引用 a（循环引用）
}
createCycle(); // a 和 b 无法被回收
function createCycle() {
const a = { name: "a" };
const b = { name: "b" };
a.ref = b;
b.ref = a;
// 使用完毕后断开引用
a.ref = null;
b.ref = null;
}
const globalData = { largeArray: new Array(1000000).fill(1) };
function createObject() {
return {
data: globalData, // 引用全局大型对象
method: function () {
/* 使用 data */
},
};
}
const obj = createObject();
// 即使不再使用 obj.data，globalData 仍被引用
const globalData = { largeArray: new Array(1000000).fill(1) };
function createObject() {
// 传递副本而非原对象（适用于不可变数据）
return {
data: { ...globalData }, // 浅拷贝，减少引用
method: function () {
/* 使用 data */
},
};
}
const objectPool = [];
function createObject() {
if (objectPool.length > 0) {
return objectPool.pop(); // 复用池中的对象
}
return { data: new Array(1000000).fill(1) }; // 新建对象
}
function destroyObject(obj) {
obj.data.length = 0; // 清理数据
objectPool.push(obj); // 放回对象池
}
process.memoryUsage()：监控堆内存使用情况。--expose-gc 标志：手动触发 GC，配合 console.log 调试。优化内存管理的核心原则是：减少不必要的引用，及时释放不再使用的对象。通过合理设计闭包作用域、避免循环引用、使用弱引用和对象池等策略，可有效降低内存泄漏风险。同时，结合浏览器或 Node.js 提供的调试工具，定期分析内存快照，是定位和解决泄漏问题的关键。
关键词：Web Components
Web Components 作为现代前端开发的重要技术，具有以下显著优势：
样式隔离
Shadow DOM 确保组件内部样式不会泄露到外部，也不受外部样式影响，彻底解决 CSS 全局污染问题。
示例：组件内部的 .button { color: red } 不会影响外部按钮样式。
DOM 封装
组件内部结构对外部不可见，避免被意外修改，实现真正的关注点分离。
对比：传统组件（如 React/Vue）仍依赖全局 DOM 结构。
无需框架依赖
作为浏览器原生标准（如 Chrome、Firefox、Safari 均支持），可直接在任何环境使用，降低技术栈复杂度。
场景：在 legacy 项目或多框架共存环境中复用组件。
轻量级
相比框架组件（如 React 组件需引入 React 库），Web Components 更轻量，适合性能敏感场景。
<!-- 在 Vue 项目中使用 Web Components -->
<custom-button @click="handleClick"></custom-button>
标准化组件格式
基于 HTML、CSS、JS 标准，无需学习特定框架语法，降低开发者学习成本。
生态：可复用现有 HTML 组件生态（如 Material Design Web Components）。
独立分发
可打包为独立文件（如 .js），通过 CDN 直接引入，无需复杂构建流程。
示例：
<script src="https://cdn.example.com/custom-button.js"></script>
<custom-form>
<form>
<!-- 基础表单内容 -->
</form>
</custom-form>
浏览器级优化
原生组件渲染效率更高，尤其在大规模列表渲染时（如 1000+ 组件），性能优于虚拟 DOM 框架。
按需加载
通过 <script type="module"> 和动态导入，可实现组件的懒加载。
示例：
import("./heavy-component.js").then(() => {
document.body.innerHTML += "<heavy-component></heavy-component>";
});
<custom-slider min="0" max="100" value="50" @change="updateValue"></custom-slider>
框架集成
主流框架（如 React、Vue）均提供官方支持 Web Components 的方式。
React 示例：
function App() {
return <custom-element some-prop="value" />;
}
微前端场景
作为微前端架构中的“原子组件”，实现跨应用复用。
Web Components 凭借原生支持、真正封装、跨框架兼容三大核心优势，成为构建未来前端应用的理想选择。尤其适合需要长期维护、多团队协作、跨技术栈集成的大型项目。随着浏览器兼容性的提升（当前支持率约 95%），其应用场景将越来越广泛。
关键词：Web Components
Web Components 虽具备技术优势，但未能成为前端主流框架的核心原因可从以下维度分析：
React/Vue 的生态优势
主流框架拥有完善的工具链（如 Webpack、Vite）、状态管理库（Redux、Pinia）、UI 组件库（Ant Design、Element），以及丰富的文档和社区支持。
对比：Web Components 的生态碎片化严重，缺乏统一的最佳实践。
框架集成成本
在已有项目中引入 Web Components 可能需修改构建流程，而 React/Vue 可无缝集成现有工具链。
示例：Vue 组件可直接使用 <script setup> 语法，Web Components 则需手动处理生命周期。
声明式 vs 命令式
React/Vue 通过 JSX/模板语法提供更高级的抽象，降低 DOM 操作复杂度。
示例：React 的 useState 钩子比 Web Components 的 attributeChangedCallback 更直观。
状态管理复杂度
Web Components 原生未提供状态管理方案，处理复杂数据流需自行实现或引入第三方库（如 Redux），而 React/Vue 内置状态管理机制。
入门门槛
React/Vue 的概念（如虚拟 DOM、组件化）更贴近现代前端思维，而 Web Components 需掌握 Shadow DOM、Custom Elements 等多个低阶 API。
数据：Stack Overflow 调查显示，React/Vue 的问题活跃度远高于 Web Components。
框架黏性
开发者倾向使用已熟悉的框架（如 React 开发者更愿用 React 生态组件），而非切换技术栈。
虚拟 DOM 的优势
React/Vue 通过虚拟 DOM 差异更新减少真实 DOM 操作，在复杂 UI 场景下性能更优。
测试：大型列表渲染中，React 的 shouldComponentUpdate 比 Web Components 的原生更新更高效。
优化工具缺失
React/Vue 提供 Hooks、Suspense 等优化工具，Web Components 需手动实现类似功能。
兼容性成本
Web Components 在旧版浏览器（如 IE11）需引入大型 Polyfill，导致包体积膨胀。
数据：核心 Polyfill 约增加 100KB 体积，而 React 压缩后约 42KB。
特性碎片化
不同浏览器对 Shadow DOM 的实现存在细微差异（如 CSS 变量支持），增加测试成本。
商业公司背书
React（Meta）、Vue（开源但有官方支持）受益于大厂资源投入，持续迭代并推广新特性。
对比：Web Components 作为 W3C 标准，缺乏单一实体推动生态建设。
社区驱动创新
React/Vue 的第三方插件（如 React Query、Vue Router）加速了其普及，而 Web Components 社区活跃度较低。
Web Components 的定位
更适合构建原子组件（如按钮、输入框）或跨框架共享组件，而非完整应用框架。
案例：Google 的 Material Web Components 作为独立组件库使用。
框架的端到端解决方案
React/Vue 提供路由、状态管理、构建工具等一站式解决方案，降低全栈开发复杂度。
时间窗口错位
React（2013）、Vue（2014）诞生于前端工程化需求爆发期，而 Web Components 标准成熟较晚（2019 年全面支持）。
技术选型惯性
企业更倾向选择经过验证的框架（如 React），而非实验性技术。
混合架构兴起
现代项目常采用“框架 + Web Components”的混合模式（如在 React 中使用 Web Components 实现跨团队组件）。
框架原生支持
React 18+、Vue 3 均提供更好的 Web Components 集成方案，表明两者正走向融合而非竞争。
Web Components 未成为主流的核心矛盾在于：标准化的底层技术 vs 开发者对高效工具链和抽象层级的需求。未来更可能作为基础设施（如组件通信标准）而非独立框架存在，与 React、Vue 等上层框架形成互补生态。
关键词：约定是路由
约定式路由（Convention over Configuration，CoC）是现代前端框架（如 Next.js、Nuxt.js、VitePress 等）广泛采用的路由实现方式，其核心思想是根据文件目录结构自动生成路由配置，无需手动编写冗长的路由表。下面介绍其实现原理和关键技术：
约定式路由通过以下步骤工作：
pages/），获取所有文件和文件夹结构。pages/index.js → /
pages/posts/[id].js → /posts/:id（动态路由）框架使用 Node.js 的fs模块读取文件目录，并递归生成路径树。例如：
// 简化的文件扫描逻辑
import fs from "fs";
import path from "path";
function scanPages(dir, basePath = "") {
const entries = fs.readdirSync(dir, { withFileTypes: true });
const routes = [];
for (const entry of entries) {
const filePath = path.join(dir, entry.name);
const routePath = path.join(basePath, entry.name);
if (entry.isDirectory()) {
// 递归扫描子目录
routes.push(...scanPages(filePath, routePath));
} else {
// 处理文件（如.js、.vue）
routes.push({
file: filePath,
path: convertToRoutePath(routePath), // 转换为路由路径
});
}
}
return routes;
}
// 路径转换示例：pages/posts/[id].js → /posts/:id
function convertToRoutePath(filePath) {
// 移除扩展名
let route = filePath.replace(/\.(js|jsx|ts|tsx|vue)$/, "");
// 处理动态路由：[id] → :id
route = route.replace(/\[([^\]]+)\]/g, ":$1");
// 处理索引文件：index → /
route = route.replace(/\/index$/, "");
// 确保以斜杠开头
return route.startsWith("/") ? route : `/${route}`;
}
动态路由：使用方括号[]表示参数，例如：
pages/users/[id].js → 匹配/users/123
pages/[...all].js → 匹配所有路径（通配符路由）嵌套路由：通过目录结构实现，例如：
pages/
posts/
index.js → /posts
[id]/
index.js → /posts/:id
comments/
index.js → /posts/:id/comments
将扫描结果转换为框架所需的路由配置格式。例如，为 React Router 生成配置：
// 生成React Router配置
function generateReactRoutes(pages) {
return pages.map((page) => ({
path: page.path,
element: () => import(`./pages/${page.file}`), // 动态导入组件
}));
}
// 使用生成的路由配置
const router = createBrowserRouter(generateReactRoutes(pages));
布局文件：如_layout.js或layout.vue，用于包裹子路由：
pages/
_layout.js → 所有页面共用布局
index.js → 使用_layout.js的布局
错误页面：如404.js或error.vue，处理未匹配的路由：
// 404页面自动映射到未匹配的路由
{
path: '*',
element: <NotFoundPage />
}
import()）实现组件懒加载。next/link）。| 框架 | 约定规则 | 实现特点 |
|---|---|---|
| Next.js |
pages/目录，支持[param]动态路由 |
服务端渲染（SSR）支持、自动代码分割 |
| Nuxt.js |
pages/目录，支持_param动态路由 |
基于 Vue Router，支持中间件 |
| VitePress |
docs/目录，Markdown 文件自动转换 |
静态网站生成（SSG），支持 Vue 组件 |
以下是一个简化的实现示例，用于理解核心逻辑：
// 简易约定式路由实现
import fs from "fs";
import path from "path";
import { createRouter, createWebHistory } from "vue-router";
// 扫描pages目录
const pagesDir = path.resolve(__dirname, "pages");
const routes = fs
.readdirSync(pagesDir)
.filter((file) => file.endsWith(".vue"))
.map((file) => {
const name = file.replace(/\.vue$/, "");
const path = name === "index" ? "/" : `/${name}`;
return {
path,
component: () => import(`./pages/${file}`),
};
});
// 创建路由实例
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
约定式路由通过文件系统映射和自动化配置，极大简化了路由管理。其核心在于扫描文件、转换路径、生成配置和运行时匹配。现代框架在此基础上添加了动态路由、嵌套路由、懒加载等高级特性，提升了开发体验和应用性能。
关键词：性能优化
对大型 SPA（单页应用）进行全面性能优化需要从多个维度入手，以下是系统性的优化策略：
动态导入（Dynamic Import）：按需加载路由组件、组件库、第三方模块
// React示例：懒加载路由组件
const HomePage = React.lazy(() => import("./pages/HomePage"));
// Vue示例：异步组件
const HomePage = () => import("./pages/HomePage.vue");
路由级分割：按路由拆分 chunks，减少首屏加载体积
组件级分割：对大型组件（如数据表格、图表）单独拆分
console.log、debugger
<link rel="preload" href="critical.js" as="script" /> <link rel="prefetch" href="non-critical.js" as="script" />
next/link自动预取react-window（React）、vue-virtual-scroller（Vue）// 防抖示例
const debouncedHandleScroll = debounce(handleScroll, 300);
window.addEventListener("scroll", debouncedHandleScroll);
Cache-Control、ETag
localStorage、IndexedDB缓存静态数据<img src="image.jpg" srcset="image.jpg 1x, image@2x.jpg 2x" loading="lazy" alt="Description" />
font-display: swap避免 FOUTgetServerSideProps
transform和opacity进行动画，利用合成层（Compositing）loading="lazy"）<script src="https://cdn.tailwindcss.com"></script>
React.memo、useMemo、useCallback避免不必要渲染v-once渲染静态内容v-memo缓存组件树大型 SPA 性能优化需遵循以下原则：
先测量，后优化：使用工具定位瓶颈点
从大到小：优先处理首屏加载、关键路径
分层优化：构建、网络、运行时、渲染各维度协同
持续监控：建立性能基线，防止退化
关键词：微前端框架
以下是前端领域主流微前端框架的深度解析，涵盖核心特性、优劣势及适用场景，结合最新技术动态和企业级实践：
experimentalStyleIsolation，关键子应用逐步迁移至 Shadow DOMprops传递）activeRule或 Single-SPA 的registerApplication配置路由匹配规则preload配置或 Webpack 的prefetch注释通过综合评估项目需求、技术栈现状和团队能力，选择最适合的微前端框架，并结合上述避坑指南，可有效降低集成成本，提升系统可维护性和扩展性。
关键词：微前端框架
将大型 SPA（单页应用）迁移到微前端架构是一个复杂的系统工程，需要从业务、技术、团队等多维度综合考量。其核心目标是解决大型 SPA 的代码臃肿、团队协作低效、技术栈锁定、部署缓慢等问题，同时确保迁移过程平稳、业务不受影响。
在动手迁移前，需先明确“为什么要做微前端”，避免为了技术而技术。同时，需全面评估现有 SPA 的现状，为迁移策略提供依据。
微前端的核心价值是**“去中心化的前端架构”**，迁移目标应围绕以下几点展开：
若现有 SPA 未遇到上述问题（如团队小、业务简单），则无需迁移。
需深入分析现有应用的“痛点”和“基础”，避免盲目迁移：
迁移的核心是设计一套符合业务的微前端架构，需重点解决“微应用如何拆分、如何协作、如何集成”三大问题。
微应用的拆分是迁移的“灵魂”，直接决定后续协作效率和维护成本。拆分需遵循**“业务域边界清晰”**原则，常见拆分方式：
| 拆分维度 | 适用场景 | 示例（电商场景） |
|---|---|---|
| 按业务域拆分 | 业务模块独立性强，有明确的“职责范围” | 商品模块（列表、详情）、订单模块、支付模块 |
| 按用户角色拆分 | 不同角色使用的功能差异大（如 C 端用户、B 端商家） | 买家端微应用、商家端微应用 |
| 按功能层级拆分 | 功能有明显的“上下层”关系（如基础组件、业务组件） | 公共组件微应用、核心业务微应用 |
拆分原则：
微应用间需通信（如“商品详情页”跳转“订单页”时传递商品 ID），但需避免通信逻辑导致新的耦合。常见方案：
发布-订阅模式（EventBus）：通过全局事件总线传递消息（如 A 微应用触发addToCart事件，购物车微应用监听并处理）。适合简单、低频的通信（如跳转、数据传递）。
优点：低耦合（无需知道对方存在）；缺点：事件过多时难以追踪。
公共状态服务：将全局共享状态（如用户信息、权限）放在独立的“状态服务”中（如用 Redis 或前端全局 Store），微应用通过 API 读写。适合高频、核心数据共享（如用户登录状态）。
优点：状态统一；缺点：需设计状态更新规则（如防止并发修改冲突）。
接口调用：微应用通过暴露“对外 API”供其他应用调用（如订单微应用提供createOrder(params)方法）。适合复杂交互（如跨应用提交数据）。
优点：逻辑清晰；缺点：需维护 API 文档，耦合度略高。
原则：微应用内部状态（如表单临时数据）自行管理，仅将“必须共享”的数据放入全局通信层。
微前端需一个“主应用（容器应用）”负责路由分发：根据 URL 匹配对应的微应用，并加载/卸载微应用。核心考虑点：
路由规则设计：需避免微应用路由冲突（如 A 应用用/list，B 应用也用/list）。解决方案：为每个微应用分配“路由命名空间”（如商品应用路由前缀为/goods，订单应用为/order）。
路由切换策略：
框架选择：成熟的微前端框架（如 qiankun、single-spa）已内置路由管理能力，可直接复用（如 qiankun 通过registerMicroApps注册微应用与路由的映射关系）。
大型 SPA 的常见问题是“全局污染”（如样式冲突、变量覆盖），微前端需通过隔离机制解决：
样式隔离：
goods__title--active而非title）；css-loader给微应用样式自动添加前缀（如#goods-app .title），确保样式仅作用于当前应用。JS 隔离：
sandbox配置），避免全局变量（如window）被篡改；window.localStorage需通过mainApp.storage.get()调用）。微应用的资源（JS/CSS）加载直接影响首屏性能，需设计合理的加载策略：
加载时机：
资源共享：避免重复加载公共依赖（如 React、Vue、UI 组件库）：
externals配置引用，减少打包体积。缓存策略：对微应用资源（如 JS 包）设置合理的缓存过期时间（如Cache-Control: max-age=3600），配合版本号（如app.js?v=2.1.0）确保更新生效。
大型 SPA 通常有全局状态（如用户信息、权限）和局部状态（如表单数据），微前端需明确两者的管理边界：
全局状态：仅存放“跨微应用共享且稳定”的数据（如用户 ID、登录状态、全局主题），由主应用或独立的“状态服务”管理（如用 Redux Toolkit 或 Pinia 的“全局实例”）。
注意：全局状态需精简，避免成为“状态黑洞”（所有状态都往里塞，导致维护困难）。
局部状态：微应用内部的状态（如商品列表的筛选条件、订单表单的输入值）由自身管理（如 React 组件用useState，Vue 用reactive），不依赖外部。
大型 SPA 无法“一刀切”迁移，需采用**“增量迁移”**策略：先搭建基础框架，再逐步替换老模块，同时保留老应用的可用性，直到完全迁移。
搭建主应用（容器）：
主应用负责路由管理、微应用加载、全局通信、样式/JS 隔离等核心能力。初期可基于成熟框架（如 qiankun）快速搭建，无需开发业务功能。
选择“试点微应用”：
优先迁移独立、非核心、改动少的模块（如“用户中心”“设置页”），验证架构可行性（如通信、隔离、部署是否符合预期）。避免先迁移核心模块（如“支付流程”），减少风险。
老应用与微应用共存：
主应用通过“路由转发”同时支持老 SPA 和新微应用：访问老路由（如/old/goods）时加载原 SPA 的对应模块；访问新路由（如/new/order）时加载新微应用。
需开发“适配层”：将老 SPA 的全局变量、事件通过主应用的通信机制暴露给新微应用（如老 SPA 的userInfo通过EventBus传递给新应用）。
逐步迁移核心模块：
试点验证通过后，按业务优先级迁移核心模块（如商品、订单）。迁移时需先“解耦老代码”（如将老模块的全局依赖改为通过主应用 API 获取），再用新技术栈实现。
下线老 SPA：
当所有模块迁移完成后，逐步下线老 SPA 的路由，主应用完全接管所有业务。
微前端的成功依赖“团队自治”，需同步调整团队结构（康威定律：系统设计反映组织架构）：
迁移过程中可能遇到多种风险，需提前预案：
| 风险类型 | 具体问题 | 应对策略 |
|---|---|---|
| 性能下降 | 首屏加载时间变长（多应用资源加载） | 优化资源加载（预加载、共享依赖）、压缩包体积（Tree-Shaking）、监控性能指标（LCP、FID） |
| 兼容性问题 | 微应用在低版本浏览器（如 IE）运行异常 | 提前确定兼容范围，用 Babel/PostCSS 转译代码，对不支持的 API（如 Shadow DOM）降级处理 |
| 调试困难 | 多应用嵌套导致错误定位难（如“哪个应用抛了错”） | 集成统一监控工具（如 Sentry），在错误信息中添加微应用标识；开发环境用sourcemap定位源码 |
| 发布冲突 | 微应用独立部署导致版本兼容问题（如 A 应用依赖 B 应用 v1.0，B 应用已升级到 v2.0） | 制定版本兼容规范（如语义化版本），通过灰度发布验证兼容性，主应用支持“回滚到旧版本” |
将大型 SPA 迁移到微前端的核心是“以业务为中心，增量推进，平衡灵活性与复杂度”。需重点考虑：
微应用拆分是否符合业务边界；
通信、路由、隔离机制是否清晰；
迁移过程是否平稳（老应用与新应用共存）；
团队是否能适应自治协作模式。
大家好，我是 Simon，最近写了一个在线的压缩库，他的效果真的很惊艳，比一些付费的软件表现还好。
起因是我吐槽了，我们网站很多图片使用太大了，每次渲染的很慢，我就说了，你压缩一下再传，他说懒的弄，后来我就分享了一个我的工具，然后他说我这个肯定不好用，因为压缩每一家都有独特的算法，开源的肯定比不上，然后我就结合了 vibe coding 优化了这个网站，支持目录上传、拖拽、等等一系列的方式，能够直接左右对比压缩前后的图片差距，压缩的大小百分比，以及压缩质量的控制，然后再次安利了他，结果吊打了他的付费软件🤣
提供了 B 站的 链接： www.bilibili.com/video/BV1sf…
然后还有在线体验网站: browser-compress-image.netlify.app/
还有开源的 Github 地址：github.com/Simon-He95/…
如果你有一些好的建议，或者一些很棒的开源压缩浏览器端的库推荐，可以集成进来使用
.center-div {
width: 300px;
height: 200px;
/* Flexbox方案 - 现代浏览器首选 */
display: flex;
justify-content: center;
align-items: center;
/* Grid方案 - 最简方式 */
display: grid;
place-items: center;
/* 传统方法 - 固定宽高 */
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.float-container::after {
content: "";
display: table;
clear: both;
}
.float-center {
float: left;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.absolute-center {
position: absolute;
/* 视口居中 */
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
/* 已知尺寸居中 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 容器内居中 */
inset: 0;
margin: auto;
}
推荐至少16ms（≈60帧/秒）
原因：显示器的刷新率通常为60Hz，每帧间隔16.67ms。超过这个时间会导致动画卡顿，低于这个时间浏览器无法渲染额外帧。
/* 流畅动画的最佳实践 */
.animate {
transition: transform 0.16s ease-out;
animation: pulse 1s infinite;
}
absolute与fixed异同：
| 特性 | absolute | fixed |
|---|---|---|
| 定位基准 | 最近的positioned祖先 | 视口(viewport) |
| 滚动影响 | 随文档流滚动 | 始终固定在屏幕指定位置 |
| 共同点 | 脱离文档流 | 脱离文档流 |
| 应用场景 | 相对父元素的定位元素 | 固定导航、广告、弹窗 |
.example {
/* 共同特性 */
position: absolute | fixed;
top: 0;
left: 0;
z-index: 10;
}
.color-examples {
color: red; /* 关键词 */
color: #FF0000; /* 十六进制 */
color: #F00; /* 简写十六进制 */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGBA带透明度 */
color: hsl(0, 100%, 50%); /* HSL - 色相/饱和度/亮度 */
color: hsla(0, 100%, 50%, 0.5); /* HSLA带透明度 */
color: oklch(70% 0.2 0); /* 新兴的色彩空间 */
}
/* 爱心容器 */
.heart {
position: relative;
width: 100px;
height: 100px;
margin: 50px auto;
}
/* 使用伪元素创建两个半圆 */
.heart::before,
.heart::after {
content: '';
position: absolute;
width: 50px; /* 调整为宽度的一半 */
height: 80px; /* 高度略大于宽度 */
background: #ff6b81; /* 粉色系 */
border-radius: 50px 50px 0 0; /* 只圆化左上和右上 */
}
/* 左半部分 */
.heart::before {
left: 0;
transform: rotate(-45deg); /* 向左旋转45度 */
transform-origin: 100% 100%; /* 以右下角为旋转中心 */
}
/* 右半部分 */
.heart::after {
left: 50%;
transform: rotate(45deg); /* 向右旋转45度 */
transform-origin: 0 100%; /* 以左下角为旋转中心 */
}
不是所有情况都基于容器高度：
height：基于容器高度计算padding-top/bottom：基于容器宽度计算margin-top/bottom：基于容器宽度计算transform: translateY()：基于元素自身高度计算.container {
height: 400px;
width: 600px;
}
.child {
height: 50%; /* 200px (400px的50%) */
padding-top: 10%; /* 60px (600px的10%) */
margin-bottom: 5%; /* 30px (600px的5%) */
transform: translateY(50%); /* 自身高度的50% */
}
/* 解决方案 */
.element {
transform: translateZ(0); /* 开启GPU加速 */
backface-visibility: hidden; /* 隐藏背面 */
perspective: 1000px; /* 3D透视 */
/* 修复iOS闪屏 */
-webkit-transform-style: preserve-3d;
}
| 格式 | 特性 | 适用场景 | WebP支持 |
|---|---|---|---|
| JPG | 有损压缩、文件较小 | 照片、渐变色图像 | ✓ (需转换) |
| PNG | 无损压缩、支持透明通道 | Logo、透明背景图像 | ✓ (需转换) |
| GIF | 支持动画、256色限制 | 简单动画、低色彩图像 | ✗ |
| WebP | 更优压缩、支持透明/动画 | 现代浏览器中的通用图像格式 | 原生支持 |
<!-- WebP回退方案 -->
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="备用图像">
</picture>
* {
box-sizing: border-box; /* 强烈推荐的全局设置 */
}
/* box-sizing对比 */
.content-box {
box-sizing: content-box; /* 默认值: width=内容宽度 */
width: 200px;
padding: 20px; /* 总宽=240px */
}
.border-box {
box-sizing: border-box; /* width=内容+padding+border */
width: 200px;
padding: 20px; /* 总宽保持200px */
}
| 系统 | 特点 | 应用场景 | 兼容性 |
|---|---|---|---|
| Bootstrap | 12列布局、响应式断点 | 企业级应用、快速开发 | 优秀(IE10+) |
| CSS Grid | 二维布局、强大对齐控制 | 复杂布局、现代网站 | IE11部分支持 |
| Flexbox | 一维布局、弹性项目 | 组件内部布局 | IE10部分支持 |
| 自定义栅格 | 灵活、按需定制 | 特定设计需求的网站 | 可控 |
/* 媒体查询示例 */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
/* 移动优先策略 */
.component {
padding: 1rem; /* 基础样式 */
@media (min-width: 992px) {
padding: 2rem; /* 大屏样式 */
}
}
/* IE兼容方案 */
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<script src="respond.min.js"></script>
<![endif]-->
::selection {
background-color: #fd79a8; /* 粉红背景 */
color: #fff; /* 白色文字 */
text-shadow: 1px 1px 2px rgba(0,0,0,.2);
}
/* 兼容旧浏览器 */
::-moz-selection {
background: #fd79a8;
color: #fff;
}
/* 强制换行 */
.break-all {
word-break: break-all; /* 任意位置截断 */
overflow-wrap: break-word; /* 保留单词完整 */
}
/* 中文换行 */
.chinese-text {
word-break: break-word;
}
/* 禁止换行 */
.no-wrap {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* 超出显示省略号 */
}
/* CSS语法结构 */
selector { /* 选择器 */
property: value; /* 属性: 值; */
font-size: 16px; /* 声明 */
}
/* 组合选择器 */
nav a:hover, /* 伪类 */
footer > p:first-child { /* 子元素 */
color: #3498db;
}
/* @规则 */
@import url('reset.css');
@media (min-width: 768px) {...}
@keyframes pulse {...}
<div class="container">
<div class="fixed">固定高度 (300px)</div>
<div class="fluid">自适应剩余空间</div>
</div>
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.fixed {
height: 300px; /* 固定高度 */
background: #74b9ff;
}
.fluid {
flex: 1; /* 填充剩余空间 */
background: #a29bfe;
min-height: 0; /* 防止内容溢出 */
}
.element {
overflow: visible; /* 默认值：内容溢出容器 */
overflow: hidden; /* 裁剪溢出内容 */
overflow: scroll; /* 始终显示滚动条 */
overflow: auto; /* 仅在需要时显示滚动条 */
/* 单独设置方向 */
overflow-x: hidden;
overflow-y: auto;
/* 滚动条美化 */
scrollbar-width: thin; /* Firefox */
scrollbar-color: #6c5ce7 #dfe6e9;
}
/* Chrome滚动条 */
::-webkit-scrollbar {
width: 8px;
}
/* 双外边距浮动BUG (IE6) */
.floated {
display: inline; /* 触发layout */
}
/* PNG透明度 (IE6) */
.element {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
/* min-height (IE6-9) */
.container {
min-height: 500px;
height: auto !important;
height: 500px; /* IE6-7回退 */
}
/* IE10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {...}
/* Edge */
@supports (-ms-ime-align: auto) {...}
/* IE6-9 */
.element {
color: red\9; /* 所有IE */
*color: blue; /* IE6-7 */
_color: green; /* IE6 */
color: yellow\0/IE9; /* IE9 */
}
/* IE条件注释 */
<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->
/* Italic与Oblique区别 */
.text {
font-style: italic; /* 使用字体的斜体版本 */
font-style: oblique; /* 常规字体的倾斜版本 */
}
/* 实际应用 */
@font-face {
font-family: 'MyFont';
src: url('myfont-italic.woff') format('woff');
font-style: italic; /* 指定为斜体专用字体 */
}
html, body {
height: 100%; /* 关键设置 */
}
/* 现代方案 */
body {
min-height: 100vh; /* 视口高度 */
min-height: 100dvh; /* 动态视口高度 (移动端优化) */
/* 防止滚动条跳动 */
overflow-y: scroll;
}
/* 原因解释：
1. 百分比高度依赖父元素明确的高度定义
2. 视口单位(vh)直接参考设备屏幕
3. 需要html/body的高度链式传递
*/
/* 常用display值 */
.block { display: block; } /* 块级元素 */
.inline { display: inline; } /* 行内元素 */
.inline-block { display: inline-block; } /* 行内块元素 */
.flex { display: flex; } /* 弹性布局 */
.grid { display: grid; } /* 网格布局 */
.none { display: none; } /* 完全隐藏 */
/* 特殊值 */
table { display: table; } /* 表格布局 */
.list-item { display: list-item; } /* 列表项 */
.contents { display: contents; } /* 内容布局 */
/* 推荐重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%; /* 移动端调整 */
}
body {
min-height: 100vh;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
text-decoration: none;
color: inherit;
}
/* Block-Element-Modifier */
.header { /* 块 */ }
.header__logo { /* 元素 - 属于header */ }
.header__nav { /* 元素 */ }
.header--fixed { /* 修饰符 - 固定状态 */ }
.header__nav-item--active { /* 元素修饰符 */ }
/* 其他常见规范 */
/* OOCSS 分离容器与内容 */
.container {}
.article-title {}
/* SMACSS 分类管理 */
.layout-header {}
.module-alert {}
/* 方法1：border实现 */
.sector {
width: 0;
height: 0;
border: 100px solid transparent;
border-top: 100px solid #ff6b6b;
border-radius: 50%;
}
/* 方法2：clip-path */
.sector-clip {
width: 200px;
height: 200px;
background: #ff6b6b;
clip-path: polygon(0 0, 100% 0, 50% 50%);
border-radius: 0 100% 0 0;
}
/* 方法3：渐变 */
.sector-gradient {
width: 200px;
height: 200px;
background: conic-gradient(#ff6b6b 0 120deg, transparent 0);
border-radius: 50%;
}
<!-- 消除间隙的HTML写法 -->
<div class="container">
<span>Item1</span
><span>Item2</span
><span>Item3</span>
</div>
/* CSS解决方案 */
.container {
font-size: 0; /* 父元素字号清零 */
}
.container > * {
display: inline-block;
font-size: 16px; /* 重置子元素字号 */
vertical-align: top; /* 对齐方式统一 */
}
/* 负边距修复 */
.container {
margin-right: -4px;
}
/* 全局平滑滚动 */
html {
scroll-behavior: smooth; /* 基础方案 */
}
/* 容器级平滑滚动 */
.scroll-container {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; /* iOS优化 */
/* 性能优化 */
will-change: scroll-position;
overscroll-behavior: contain; /* 避免滚动链 */
}
/* JS实现平滑滚动 */
button.addEventListener('click', () => {
element.scrollTo({
top: 0,
behavior: 'smooth'
});
});
/* 适用场景 */
.override {
color: red !important; /* 1. 覆盖内联样式 */
}
.print-styles {
display: none !important; /* 2. 打印样式强制 */
}
.framework-fix {
width: calc(100% - 20px) !important; /* 3. 覆盖框架样式 */
}
/* 应避免的情况 */
.header {
padding: 10px !important; /* 常规样式中不要使用 */
}
/* 浮动原理 */
.float-box {
float: left; /* 脱离文档流 */
width: 200px;
}
/* 清除浮动方法 */
/* 方法1：clearfix */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* 方法2：父容器创建BFC */
.container {
overflow: auto;
display: flow-root; /* 推荐方式 */
}
/* 方法3：插入空元素 */
<br style="clear: both">
先来看个全局变量 executionContext。
executionContext 标记当前执行环境，比如当前是 render 阶段或者 commit 阶段。
类型是 number，取值有 4 种：
type ExecutionContext = number;
export const NoContext = /* */ 0b000;
const BatchedContext = /* 批量/同步更新 */ 0b001;
export const RenderContext = /* render 阶段 */ 0b010;
export const CommitContext = /* commit 阶段 */ 0b100;
初始值为 NoContext：
// 参考 react/packages/react-reconciler/src/ReactFiberWorkLoop.js
let executionContext: ExecutionContext = NoContext;
和 render 阶段平行的还有个 commit 阶段。
两者入口如下：
// 这是每个并发任务的入口点，即通过 Scheduler 的所有内容
function performConcurrentWorkOnRoot(
root: FiberRoot,
didTimeout: boolean,
): RenderTaskFn | null {
let lanes = getNextLanes(
root,
root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,
);
// 没有更新
if (lanes === NoLanes) {
// Defensive coding. This is never expected to happen.
return null;
}
// 在某些情况下，我们会禁用时间切片：如果 work 过长时间做计算（为了防止饥饿而将其视为“过期”的 work），或者我们处于默认启用同步更新模式。
const shouldTimeSlice =
!includesBlockingLane(root, lanes) &&
!includesExpiredLane(root, lanes) &&
(disableSchedulerTimeoutInWorkLoop || !didTimeout);
let exitStatus = shouldTimeSlice
? renderRootConcurrent(root, lanes) // 使用时间切片
// 1. render, 构建fiber树VDOM（beginWork|completeWork）
: renderRootSync(root, lanes); // 不用时间切片
// 2. commit, VDOM->DOM
commitRoot(root);
}
renderRootSync 是 render 阶段入口，包含 4 个步骤：
详细代码如下：
function renderRootSync(root: FiberRoot) {
// 1. render阶段开始
const prevExecutionContext = executionContext;
executionContext |= RenderContext; // 注意这里不能用等号，如果使用等号，会覆盖其他 execution，比如如果是批量更新，如果直接覆盖，批量更新就没有了
// 2. workInProgressTransitions 赋值
workInProgressTransitions = getTransitionsForLanes(root, lanes);
// 3. 初始化
prepareFreshStack(root, lanes);
// 4. 遍历构建 fiber 树
workLoopSync();
// 重置 Context 的相关值，入 currentlyRenderingFiber 等
resetContextDependencies();
// 4. render结束，重置 executionContext
executionContext = prevExecutionContext;
workInProgressRoot = null; // 当前正在工作的 root
workInProgressRootRenderLanes = NoLanes;
// 防止有新的更新，再遍历一边更新队列
finishQueueingConcurrentUpdates();
return workInProgressRootExitStatus;
}
function prepareFreshStack(root: FiberRoot): Fiber {
root.finishedWork = null;
workInProgressRoot = root; // FiberRoot
const rootWorkInProgress = createWorkInProgress(root.current, null); // Fiber
if (workInProgress === null) {
workInProgress = rootWorkInProgress; // Fiber
}
// 把 concurrentQueues 的内容添加到 fiber 的 queue 中，即给 fiber 的 lanes、childLanes 赋值
finishQueueingConcurrentUpdates();
return rootWorkInProgress;
}
function workLoopSync() {
while (workInProgress !== null) {
performUnitOfWork(workInProgress);
}
}
function performUnitOfWork(unitOfWork: Fiber) {
const current = unitOfWork.alternate;
// 1. beginWork
// 更新当前 fiber，比如 props/state 更新，生命周期函数执行、Hooks 函数执行等。
// 返回下一个 fiber。
let next = beginWork(current, unitOfWork);
// 把 pendingProps 更新到 memoizedProps
unitOfWork.memoizedProps = unitOfWork.pendingProps;
// 1.1 执行自己
// 1.2 (协调，bailout)返回子节点
if (next === null) {
// 没有产生新的work
// 如果不再产生新的 work，那么当前 work 结束
// 2. completeWork，比如生成原生节点，放在 fiber 的 stateNode 属性上
completeUnitOfWork(unitOfWork);
} else {
workInProgress = next;
}
// 当前 Fiber 为 null
ReactCurrentOwner.current = null
}
// 深度优先遍历，子节点、兄弟节点、叔叔节点、爷爷的兄弟节点...（王朝的故事）
function completeUnitOfWork(unitOfWork: Fiber) {
let completedWork = unitOfWork;
do {
const current = completedWork.alternate;
const returnFiber = completedWork.return;
let next = completeWork(current, completedWork);
if (next !== null) {
workInProgress = next;
return;
}
const siblingFiber = completedWork.sibling;
if (siblingFiber !== null) {
workInProgress = siblingFiber;
return;
}
completedWork = returnFiber as Fiber;
workInProgress = completedWork;
} while (completedWork !== null);
}
如果你需要画一个时钟表盘，你会怎么做？用12个div元素，使用CSS的transform属性来旋转它们，来将他们放在正确的位置。但是，你会发现，你需要使用JavaScript来计算每个div元素的旋转角度, 当前你也可以提前计算好，但终究是要计算的。一但钟表半径变化，你就需要重新计算。
那如何我们现在添加一些限制条件呢
<div class="panel">
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
</div>
使用上面的html片段，不使用nth-*之类的选择器，不使用+选择器。纯CSS应该如何实现一个表盘呢
先添加一些基础样式
.panel {
width: 200px;
height: 200px;
border-radius: 50%;
border: 3px solid #000;
position: relative;
}
.digit {
position: absolute;
left: 90px;
top: 90px;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
}
再没有JS的情况下，我们可以使用::after伪元素来实现向页面添加显示内容。那1-12这些数字应该实现如何呢。在html中有什么情况会自动为元素填充序号呢？没错，有序列表。那我们这里其实也类似，在CSS中有counter功能
.panel {
counter-reset: digit;
}
.digit {
counter-increment: digit;
&::after {
content: counter(digit);
}
}
这样每个div中都会显示一个数字。接下来，我们需要将这些数字旋转到正确的位置。我们可以使用transform属性来实现。问题是，我们如何知道每个数字的旋转角度呢？我们可以使用sibling-index函数来实现。这个函数可以返回一个元素在兄弟元素当中的索引。我们可以使用这个函数来计算每个数字的旋转角度。
.digit {
--angle: calc((sibling-index() - 3) * 30deg);
transform: translate(calc(cos(var(--angle)) * 90px), calc(sin(var(--angle)) * 90px));
}
附上完整代码
<style>
.panel {
width: 200px;
height: 200px;
border-radius: 50%;
border: 3px solid #000;
position: relative;
counter-reset: digit;
}
.digit {
position: absolute;
left: 90px;
top: 90px;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
counter-increment: digit;
--angle: calc((sibling-index() - 3) * 30deg);
transform: translate(calc(cos(var(--angle)) * 90px), calc(sin(var(--angle)) * 90px));
&::after {
content: counter(digit);
}
}
</style>
<div class="panel">
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
</div>
效果如下
目前只有chrome最新版本支持这个函数，其他浏览器还没有支持。谨慎使用
在 JavaScript 开发中，字符串拼接曾是开发者最频繁的操作之一。
随着 ES6 的普及，字符串模板（Template String）作为一项革命性特性，彻底改变了我们处理字符串的方式，它不仅简化了代码逻辑，而且提升了可读性和可维护性。
本文将结合数组方法、Symbol 类型等内容，深入解析字符串模板的核心原理和实际应用。
字符串模板通过反引号（`）定义，支持多行字符串和嵌入变量，语法如下：
const name = "狗·德川家康·薛定谔·保留";
const age = 3;
const sentence = `我的猫 ${name} 今年 ${age * 5} 岁.`;
console.log(sentence);
// 输出：我的猫 狗·德川家康·薛定谔·保留 今年 15 岁.
\n 或字符串拼接即可实现多行文本。${expression} 语法直接嵌入表达式，告别繁琐的 + 拼接。// 传统拼接
const sentenceOld = "我的猫 " + name + " 今年 " + (age * 5) + " 岁.";
// 字符串模板
const sentenceNew = `我的猫 ${name} 今年 ${age * 5} 岁.`;
字符串模板对多行字符串的处理尤其强大，尤其适合生成 HTML 结构或格式化文本：
const html = `
<div class="user-card">
<h2>${user.name}</h2>
<p>年龄：${user.age}岁</p>
<p>地址：${user.address}</p>
</div>
`;
const friends = [
{ name: '刘备', age: 520, address: '桃园' },
{ name: '关羽', age: 114, address: '同上' },
{ name: '张飞', age: 514, address: '俺也一样' }
];
const ul = document.getElementById('friends');
ul.innerHTML = friends.map(friend => `
<li>
${friend.name} ， <i>${friend.age}岁</i> ， <b>${friend.address}</b>
</li>
`).join('');
map 方法：遍历数组并返回新数组，每个元素为 <li> 的 HTML 字符串。.join('')：将数组转换为字符串，避免 innerHTML 中出现逗号分隔符。<li> 标签，结构清晰，格式自然保留。map 的深度解析map 方法的核心特性
map 是 ES6 为数组提供的高阶函数，用于将数组中的每个元素映射为新形式，返回新数组：
const numbers = [1, 2, 3];
const squares = numbers.map(n => n * n);
console.log(squares); // [1, 4, 9]
const users = [
{ id: 1, name: 'Alice', role: 'Admin' },
{ id: 2, name: 'Bob', role: 'User' }
];
const tableBody = users.map(user => `
<tr>
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.role}</td>
</tr>
`).join('');
document.getElementById('user-table').innerHTML = tableBody;
map 与 forEach 的对比
| 特性 | map |
forEach |
|---|---|---|
| 返回值 | 新数组（映射后的结果） | undefined |
| 适用场景 | 数据转换、生成新数组 | 仅需遍历，无需返回新数组 |
| 示例 | numbers.map(n => n * 2) |
arr.forEach(item => console.log(item)) |
Symbol 是 ES6 引入的原始数据类型，表示独一无二的值，常用于定义对象的私有属性：
const sym1 = Symbol();
const sym2 = Symbol('desc'); // 可选描述信息
console.log(sym1 === sym2); // false
const ID = Symbol('id');
const user = {
name: 'Alice',
[ID]: 123,
[Symbol('age')]: 20
};
console.log(user[ID]); // 123
console.log(user[Symbol('age')]); // undefined（Symbol 是唯一的）
for...in 遍历，适合模拟私有属性。const user = {
name: 'Alice',
[Symbol('id')]: 123,
age: 18
};
for (let key in user) {
console.log(key); // 输出 name 和 age，不会包含 Symbol 键
}
| 特性 | 字符串键（String Key） | Symbol 键（Symbol Key） |
|---|---|---|
| 唯一性 | 可能冲突（如 age vs 'age'） |
始终唯一 |
| 遍历性 | 可遍历（for...in） |
默认不可遍历（需 Object.getOwnPropertySymbols()） |
| 适用场景 | 公共属性 | 私有属性、元数据 |
JavaScript 本身没有原生的枚举类型，但可以通过对象或 Symbol 模拟：
const status = {
ready: Symbol('ready'),
running: Symbol('running'),
done: Symbol('done')
};
let state = status.ready;
if (state === status.ready) {
console.log('准备就绪');
}
结合字符串模板、map 和 DOM 操作，实现动态渲染：
<ul id="user-list"></ul>
<script>
const friends = [
{ name: '刘备', age: 520, address: '桃园' },
{ name: '关羽', age: 114, address: '同上' },
{ name: '张飞', age: 514, address: '俺也一样' }
];
const userList = document.getElementById('user-list');
userList.innerHTML = users.map(user => `
<li>
<strong>${user.name}</strong>（<em>${user.age}岁</em>）<br>
<small>地址：${user.address}</small>
</li>
`).join('');
</script>
将 JSON 数据转换为 HTML 表格，展示 map 与字符串模板的协同作用：
const products = [
{ id: 1, name: '苹果', price: 5 },
{ id: 2, name: '香蕉', price: 3 }
];
const table = `
<table border="1">
<thead>
<tr><th>ID</th><th>名称</th><th>价格</th></tr>
</thead>
<tbody>
${products.map(p => `
<tr>
<td>${p.id}</td>
<td>${p.name}</td>
<td>¥${p.price}</td>
</tr>
`).join('')}
</tbody>
</table>
`;
document.body.innerHTML = table;
${} 实现多行字符串和变量嵌入。map 方法：用于数据转换，与字符串模板结合可高效生成动态内容。map：在需要返回新数组的场景中，优先选择 map 而非 forEach。map 返回的数组未用 .join('') 转换，导致 innerHTML 中出现逗号。
.join('') 处理数组。Object.getOwnPropertySymbols() 访问 Symbol 键。在工业监控、人脸识别等场景中，摄像头集成是常见需求。本文将以OneCode平台的xui.UI.Camera组件为例，展示如何用50行核心代码实现一个功能完备的摄像头插件，涵盖设备访问、视频流显示和拍照功能，并提炼OneCode插件开发的核心要素。
xui.Class("xui.UI.Camera", "xui.UI", {
Instance: {
// 初始化摄像头
initCamera: function() {
const video = this.getSubNode("H5").dom;
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => video.srcObject = stream)
.catch(e => xui.log("摄像头访问失败:", e));
},
// 拍照功能
captureImage: function() {
const canvas = document.createElement("canvas");
const video = this.getSubNode("H5").dom;
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext("2d").drawImage(video, 0, 0);
return canvas.toDataURL("image/png");
}
},
Static: {
Templates: {
tagName: 'div',
H5: { tagName: 'video', autoplay: true, playsinline: true },
COVER: { tagName: 'div', style: "background-image:url("+xui.ini.img_bg+");" }
},
DataModel: {
width: { $spaceunit:1, ini:'34em' },
height: { $spaceunit:1, ini:'25em' },
captureBtn: { ini: true, action: function(v) { v && this.boxing().initCamera(); } }
},
RenderTrigger: function() { this.boxing().initCamera(); }
}
});
核心依赖Web API getUserMedia实现摄像头数据流捕获：
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => video.srcObject = stream)
Templates: {
tagName: 'div', // 根容器
H5: { tagName: 'video', ... }, // 视频播放元素
COVER: { ... } // 覆盖层
}
采用声明式DOM结构，支持动态属性绑定（如autoplay: {_autoplay}）
DataModel: {
width: { $spaceunit:1, ini:'34em' }, // 支持响应式单位
captureBtn: { // 功能开关属性
ini: true,
action: function(v) { ... } // 属性变化回调
}
}
$spaceunit: 启用单位转换（em/px自动适配）action: 属性值变化时的触发逻辑RenderTrigger: function() {
this.boxing().initCamera(); // 组件渲染完成后初始化摄像头
}
组件生命周期关键节点，确保DOM就绪后执行初始化逻辑
利用Canvas API实现视频帧捕获：
captureImage: function() {
const canvas = document.createElement("canvas");
// 匹配视频分辨率
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
// 绘制当前视频帧
canvas.getContext("2d").drawImage(video, 0, 0);
return canvas.toDataURL("image/png"); // 返回base64图片
}
xui.Class("xui.UI.Camera", "xui.UI", { ... })
xui.UI基类获取组件基础能力xui.UI.Audio）initCamera() - 处理设备访问captureImage() - 实现核心业务逻辑onCaptureSuccess等回调方法通过DataModel定义可配置属性，实现组件灵活性：
// 支持动态调整分辨率
resolution: {
ini: "720p",
listbox: ["480p", "720p", "1080p"],
action: function(v) {
const constraints = { video: { width: { ideal: v=="1080p"?1920:v=="720p"?1280:640 } } };
// 重新初始化摄像头
}
}
const getUserMedia = navigator.mediaDevices.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
this.getSubNode("H5").html("您的浏览器不支持摄像头功能");
}
// 在Templates中添加按钮
CAPTURE_BTN: { tagName: 'button', text: '拍照', onclick: 'capture' }
// 添加点击事件处理
Instance: { capture: function() { const img = this.captureImage(); ... } }
uploadImage: function(base64Data) {
xui.ajax({ url: '/upload', method: 'POST', data: { image: base64Data } });
}
基于MediaRecorder API扩展：
startRecord: function() {
this.recorder = new MediaRecorder(this.stream);
this.chunks = [];
this.recorder.ondataavailable = e => this.chunks.push(e.data);
this.recorder.start();
}
destroy: function() {
if (this.stream) this.stream.getTracks().forEach(track => track.stop());
}
通过本文示例，我们展示了如何用50行核心代码实现一个基础摄像头插件。OneCode平台的组件化设计极大简化了开发流程，开发者只需关注核心业务逻辑。实际项目中，可基于此扩展人脸识别、二维码扫描等高级功能，满足不同场景需求。
提示：完整代码可参考
xui.UI.Camera组件源码，更多API细节请查阅OneCode官方文档。
这几天做了个小项目 —— 用户上传图片后，AI能自动识别出对应的英文单词，还能生成例句和语音。整个过程踩了不少坑，也有很多值得说道的细节，今天就从头到尾捋一捋实现思路，尤其是那些容易被忽略的技术点。
任何 React 项目都需要一个主组件来串联各个功能，App.jsx 就是这个项目的 “大脑”，负责管理全局状态和协调各个模块。先看最基础的结构：
import { useState } from "react";
import "./App.css";
import PictureCard from "./components/PictureCard";
import { generateAudio } from "./lib/audio";
function App() {
// 后面会逐步添加状态和方法
return (
<div className='container'>
{/* 内容后续填充 */}
</div>
);
}
export default App;
这个组件的核心任务有三个：存储项目中所有需要共享的数据（比如识别出的单词、语音地址）、处理 AI 接口调用逻辑、把数据和方法传递给子组件。
首先要明确，这个项目需要存储哪些数据？我列了一下，至少包括这些：
function App() {
// 英文单词
const [word, setWord] = useState("请上传图片");
// 英文例句
const [sentence, setSentence] = useState("");
// 语音地址
const [audio, setAudio] = useState("");
// 控制详情区域是否展开
const [detailExpand, setDetailExpand] = useState(false);
// 图片的预览地址
const [imgPreview, setImgPreview] = useState("");
// 单词的详细解释
const [explanation, setExplanation] = useState([]);
// 解释中问句的回复内容
const [expReply, setExpReply] = useState([]);
}
这些状态各自有明确的用途：word 展示核心单词，sentence 展示例句，audio 存储语音地址…… 最关键的是，这些状态会在不同组件间流转，比如 word 和 audio 会传给子组件 PictureCard 展示，而 imgPreview 则会在详情区域显示。
状态定义好了，接下来要考虑如何把这些数据展示给用户。页面结构其实很简单，主要分为两部分：图片上传区和结果展示区。
return (
<div className='container'>
<PictureCard
word={word}
audio={audio}
uploadImg={uploadImg}
/>
{/* 结果展示区域 */}
<div className="output">
<div className="sentence">{sentence}</div>
{/* 详情展开/收起区域 */}
<div className="details">
<button onClick={() => setDetailExpand(!detailExpand)}>Talk about it</button>
{
detailExpand ? (
<div className="expand">
<img src={imgPreview} alt="preview"/>
{
explanation.map((explanation, index) => (
<div key={index} className="explanation">
{explanation}
</div>
))
}
{
expReply.map((reply, index) => (
<div key={index} className="reply">
{reply}
</div>
))
}
</div>
): (
<div className="fold" />
)
}
</div>
</div>
</div>
);
这段代码的逻辑很清晰：
PictureCard 组件处理图片上传，把需要展示的数据（word、audio）和处理方法（uploadImg）传进去setDetailExpand 切换详情的显示状态，这是 React 中常见的条件渲染方式PictureCard 组件是用户交互的入口，负责接收用户上传的图片并实时预览，同时把图片数据传给 App 组件处理。先看它的基础结构：
import { useState } from "react";
import "./style.css";
const PictureCard = (props) => {
const { word, audio, uploadImg } = props;
const [imgPreview, setImgPreview] = useState(
"https://res.bearbobo.com/resource/upload/W44yyxvl/upload-ih56twxirei.png"
);
return (
<div className="card">
{/* 上传相关内容 */}
</div>
);
};
export default PictureCard;
这个组件的核心任务是：让用户能选择图片 → 读取图片内容 → 实时预览 → 把图片数据传给父组件。
return (
<div className="card">
<input
type="file"
id="selectImage"
accept=".jpg,.jpeg,.png,.gif"
onChange={uploadImgData}
/>
{/* label 与 input 关联，点击图片就会打开文件选择框 */}
<label htmlFor="selectImage" className="upload">
<img src={imgPreview} alt="preview" />
</label>
</div>
);
选择图片需要一个文件输入框，但原生的输入框样式不好控制，所以用了个小技巧：把 input[type="file"] 隐藏起来，用 label 关联它，这样就能自定义上传按钮的样式。点击 label 里的图片时，其实触发的是文件选择框，体验会好很多。
接下来是关键的 uploadImgData 方法，它负责读取用户选择的图片并转换格式：
const uploadImgData = async (e) => {
// 获取用户选择的第一个文件
const file = e.target.files?.[0];
if (!file) return;
// 用 Promise 包装，方便父组件知道图片处理完成的时机
return new Promise((resolve, reject) => {
// 创建 FileReader 实例，用于读取文件内容
const reader = new FileReader();
// 以 DataURL 格式读取文件（会把文件转成 base64 字符串）
reader.readAsDataURL(file);
reader.onload = () => {
const data = reader.result;
setImgPreview(data);
uploadImg(data);
resolve(data);
};
// 读取失败的回调
reader.onerror = (error) => {
reject(error);
};
});
};
最关键的是 uploadImgData 函数，这里用到了 FileReader API。刚开始我想直接把文件对象传给后端，后来发现前端预览必须先读文件内容。readAsDataURL 方法会把文件转换成 base64 格式的字符串，长得像 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA... 这种。
为什么要用 base64？因为它可以直接作为 img 标签的 src 属性值，不用上传到服务器就能预览。当 reader.onload 触发时，reader.result 就是转换好的 base64 字符串，把它存到 imgPreview 状态里，图片就实时显示出来了。
这里踩过一个坑：如果取消选择文件，e.target.files 会是空的，所以必须加个判断 if (!file) return，否则会报错。另外，用 Promise 包装读取过程，是为了让父组件能知道图片什么时候处理完，方便后续调用 API。
图片数据传到 App 组件后，下一步就是调用 AI 接口分析图片内容。这部分逻辑在 uploadImg 方法里，这个方法是 PictureCard 组件传图片数据时触发的。
调用 AI 接口时，提示词（prompt）非常关键，直接决定返回结果的质量。我专门写了一段提示词，明确告诉 AI 需要做什么、返回什么格式的数据：
// 定义提示词，指导 AI 如何分析图片
const picPrompt = `
请分析图片内容，找出最能描述图片的一个英文单词，尽量选择 A1-A2 难度的基础词汇。
必须严格按照以下 JSON 格式返回结果，不要添加任何额外内容：
{
"image_description": "对图片内容的简要描述",
"representative_word": "最能代表图片的英文单词",
"example_sentence": "包含该单词的简单英文例句",
"explanation": "用英文解释这个单词，要求每句单独一行，以 Look at... 开头，最后加一个与日常生活相关的问句",
"explanation_reply": ["对问句的第一个回复（英文）", "对问句的第二个回复（英文）"]
}
`;
提示词里强调了几点：单词难度（A1-A2）、严格的 JSON 格式、解释的结构（每句一行 + 问句）。刚开始没限制格式时，AI 经常返回大段文本，解析起来很麻烦，加了格式限制后就顺畅多了。
有了提示词，就可以编写调用接口的代码了：
const uploadImg = async (imageData) => {
setImgPreview(imageData);
setWord("分析中...");
// 月之暗面 API 的地址
const endpoint = "https://api.moonshot.cn/v1/chat/completions";
// 请求头
const headers = {
"Content-Type": "application/json",
// 从环境变量获取 API 密钥，避免明文暴露
Authorization: `Bearer ${import.meta.env.VITE_KIMI_API_KEY}`
};
try {
// 发送 POST 请求
const response = await fetch(endpoint, {
method: "POST",
headers,
body: JSON.stringify({
model: "moonshot-v1-8k-vision-preview",
messages: [
{
role: "user",
content: [
{
type: "image_url",
image_url: { url: imageData }
},
{
type: "text",
text: picPrompt
}
]
}
],
stream: false
})
});
// 解析接口返回的 JSON 数据
const data = await response.json();
const replyData = JSON.parse(data.choices[0].message.content);
// 更新状态，让页面显示识别结果
setWord(replyData.representative_word);
setSentence(replyData.example_sentence);
setExplanation(replyData.explanation.split("\n"));
setExpReply(replyData.explanation_reply);
// 调用 TTS 接口生成语音（后面详细讲）
const audioUrl = await generateAudio(replyData.example_sentence);
setAudio(audioUrl);
} catch (error) {
// 出错时显示错误提示
setWord("分析失败，请重试");
console.error("API 调用出错：", error);
}
};
这段代码的关键步骤：
imageData 是从子组件传过来的 base64 字符串，直接作为图片 URL 传给 API，省了先上传到服务器的步骤。Authorization 用了环境变量 VITE_KIMI_API_KEY，这是为了安全，密钥不能明文写在代码里，用 Vite 的环境变量管理很方便。model: "moonshot-v1-8k-vision-preview"，这是月之暗面支持图片识别的模型。JSON.parse 解析，因为 AI 返回的是字符串格式的 JSON，必须转成对象才能用。generateAudio 生成语音，把例句读出来，这个函数的实现是另一个重点。按理说我们拿到了数据应该去渲染页面，但是我为了偷懒直接把页面放在前面了😁😁
除了上传功能，这个组件还要显示识别出的单词和语音播放按钮。在 return 里补充这部分内容：
return (
<div className="card">
<input type="file" id="selectImage" ... />
<label htmlFor="selectImage" className="upload">
<img src={imgPreview} alt="preview" />
</label>
<div className="word">{word}</div>
{/* 语音播放按钮，只有当 audio 有值时才显示 */}
{audio && (
<div className="playAudio" onClick={playAudio}>
<img
width="20px"
src="https://res.bearbobo.com/resource/upload/Omq2HFs8/playA-3iob5qyckpa.png"
alt="play"
/>
</div>
)}
</div>
);
再实现播放语音的方法：
// 播放语音的方法
const playAudio = () => {
const audioEle = new Audio(audio);
audioEle.play();
};
这里的逻辑很简单：当父组件传来 audio 地址时，渲染播放按钮；点击按钮时，用 Audio 构造函数创建音频实例并播放。
最后一步是把生成的例句转成语音，这部分逻辑放在 lib/audio.js 里，涉及到 base64 解码和 Blob 处理，是项目的技术亮点之一。
首先实现调用 TTS 服务的方法，获取音频的 base64 数据：
// lib/audio.js
export const generateAudio = async (text) => {
// 从环境变量获取配置
const token = import.meta.env.VITE_AUDIO_ACCESS_TOKEN;
const appId = import.meta.env.VITE_AUDIO_APP_ID;
const clusterId = import.meta.env.VITE_AUDIO_CLUSTER_ID;
const voiceName = import.meta.env.VITE_AUDIO_VOICE_NAME;
// TTS 接口地址
const endpoint = "/tts/api/v1/tts";
// 请求头
const headers = {
"Content-Type": "application/json",
Authorization: `Bearer;${token}`
};
// 构造请求体，不同服务的参数格式可能不同
const payload = {
app: {
appid: appId,
token,
cluster: clusterId
},
user: {
uid: "ai-word-user" // 自定义用户 ID
},
audio: {
voice_type: voiceName, // 发音人
encoding: "mp3", // 音频格式
rate: 24000, // 采样率
speed_ratio: 1.0, // 语速
emotion: "neutral" // 情感
},
request: {
reqid: Math.random().toString(36).substring(2, 10), // 随机请求 ID
text, // 要转换的文本（例句）
text_type: "plain" // 文本类型为纯文本
}
};
try {
// 调用 TTS 接口
const response = await fetch(endpoint, {
method: "POST",
headers,
body: JSON.stringify(payload)
});
const data = await response.json();
// 把返回的 base64 音频数据转成可播放的 URL
return getAudioUrl(data.data);
} catch (error) {
console.error("语音生成失败：", error);
return null;
}
};
这个函数的作用是把例句文本传给 TTS 服务，拿到音频数据。这里的 reqid 用随机字符串生成，是为了避免请求冲突。返回的 data.data 是 base64 编码的音频内容，不能直接用，调用 getAudioUrl 方法把数据转成浏览器能播放的格式。
TTS 服务返回的是 base64 编码的音频数据，不能直接播放，需要将其转换为浏览器可以识别的格式：
const getAudioUrl = (base64Data) => {
// 1. 解码 base64 字符串，得到二进制字符串
const byteCharacters = atob(base64Data);
// 2. 创建字节数组
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
// 3. 创建 Uint8Array（8 位无符号整数数组）
const byteArray = new Uint8Array(byteNumbers);
// 4. 创建 Blob 对象（二进制大对象）
const blob = new Blob([byteArray], { type: 'audio/mp3' });
// 5. 生成可播放的 URL
return URL.createObjectURL(blob);
};
这个过程涉及几个关键步骤：
解码 base64：使用 atob() 函数将 base64 字符串解码为原始二进制数据
转换为字节数组：将二进制字符串转换为数字数组，每个数字对应一个字节
创建类型化数组：使用 Uint8Array 将普通数组转换为 JavaScript 可以处理的二进制数据
创建 Blob 对象：将二进制数据封装为 Blob 对象，并指定 MIME 类型为 audio/mp3
生成 URL：使用 URL.createObjectURL() 为 Blob 对象生成一个临时 URL，这个 URL 可以直接作为 <audio> 元素的 src
为什么不直接使用 base64 字符串作为音频源？虽然可以这样做，但性能会较差，尤其是对于较大的音频文件。而使用 Blob URL 可以让浏览器更高效地处理音频数据，并且在不再需要时可以通过 URL.revokeObjectURL() 释放资源。
好了，整个项目的流程就是这样了，下面让我们上传一张图片来看看具体效果吧！
这个项目虽然功能不复杂，但把图片处理、AI 接口调用、语音生成这些知识点串起来了。尤其是前端直接处理文件和二进制数据的部分，以前总觉得很深奥，实际做起来才发现，掌握 FileReader、Blob、URL 这些 API 后，很多需求都能迎刃而解。最后想问一句，这个苹果是不是看起来很好吃？
服务器启动阶段: options和buildStart钩子会在服务启动时被调用。
请求响应阶段: 当浏览器发起请求时，Vite 内部依次调用resolveId、load和transform钩子。
服务器关闭阶段: Vite 会依次执行buildEnd和closeBundle钩子。
moduleParsed: 模块解析后触发，允许你修改模块的元数据。 在开发阶段不被调用，因为 Vite 使用的是热重载和即时模块更新，不需要完整的模块解析阶段。
renderChunk:生成输出块时调用，允许你自定义生成的代码块。 开发阶段不调用，因为 Vite 主要依赖浏览器的即时更新，而非生成最终的打包输出。
import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
{
...typescript2(),
apply: 'build',
},
{
...image(),
enforce: 'pre',
},
],
})
注意：名字 vite-plugin-xxx
适用场景 - 动态生成配置 运行时变量注入 按需生成工具函数
import type { Plugin } from 'vite'
// 定义虚拟模块ID
const virtualModuleId = 'virtual:fibonacci'
const resolvedVirtualModuleId = '\0' + virtualModuleId
export default function virtualFibPlugin(): Plugin {
return {
name: 'vite-plugin-virtual-fib',
// 解析虚拟模块ID
resolveId(id) {
console.log(id, 'resolveId')
if (id === virtualModuleId) {
return resolvedVirtualModuleId
}
},
// 加载虚拟模块内容
load(id) {
console.log(id, 'load')
if (id === resolvedVirtualModuleId) {
return `
// 斐波那契数列实现
export function fib(n) {
return n <= 1 ? n : fib(n - 1) + fib(n - 2)
}
// 记忆化版本
export function memoFib(n, memo = {}) {
if (n in memo) return memo[n]
if (n <= 1) return n
memo[n] = memoFib(n - 1, memo) + memoFib(n - 2, memo)
return memo[n]
}
`
}
}
}
}
注意1：加 \0 公共插件使用 virtual:插件名 格式（如 virtual:posts）
注意2: 虚拟模块在生产的时候 最好显示配置一下
export default {
plugins: [virtualPlugin()],
build: {
rollupOptions: {
plugins: [virtualPlugin()] // 显式注册
}
}
}
🤔：不配置啥后果 虚拟模块在生产环境中的可用性取决于具体场景
基本虚拟模块（仅生成静态内容）：
复杂虚拟模块（依赖特定钩子或转换）：
config - 修改配置
config(config, { command, mode }) {
// command: 'serve'开发模式 | 'build'生产模式
// mode: 'development' | 'production' | 自定义模式
if (command === 'serve') {
return {
server: {
port: 3000, // 修改开发服务器端口
open: true // 自动打开浏览器
}
}
}
// 生产环境配置
return {
build: {
minify: 'terser'
}
}
}
configResolved - 配置确认
const myPlugin = () => {
let viteConfig // 用于存储配置
return {
name: 'my-plugin',
// configResolved 钩子
configResolved(resolvedConfig) {
// 存储最终解析的配置
viteConfig = resolvedConfig
console.log('当前运行模式:', viteConfig.command)
},
// 在其他钩子中使用配置
transform(code, id) {
if (viteConfig.command === 'serve') {
console.log('开发模式处理:', id)
} else {
console.log('生产构建处理:', id)
}
return code
}
}
}
configResolved(config) {
this.isDev = config.command === 'serve'
this.isProduction = !this.isDev
},
load(id) {
if (id === virtualModuleId) {
return this.isDev
? `export const mode = 'development'`
: `export const mode = 'production'`
}
}
configureServer 开发服务器的钩子
configureServer(server: ViteDevServer): void | (() => void)
参数 server 包含以下重要属性：
eg
import type { Plugin } from 'vite'
import type { ViteDevServer } from 'vite'
export default function vitePluginTest(): Plugin {
let devServer: ViteDevServer
return {
name: 'vite-plugin-test',
configureServer(server) {
devServer = server
// 监听src目录下的所有文件变化（修正了watcher.add的用法）
server.watcher.add('src/**/*')
// 添加API接口
server.middlewares.use('/api/data', (_, res) => {
res.setHeader('Content-Type', 'application/json')
res.end(
JSON.stringify({
data: '测试数据',
timestamp: Date.now()
})
)
})
// 请求日志中间件
server.middlewares.use((req, res, next) => {
console.log(`[${new Date().toISOString()}] 请求: ${req.method} ${req.url}`)
next()
})
// 监听文件变化（修正了监听逻辑）
server.watcher.on('change', (file) => {
console.log(`文件发生变化: ${file}`)
if (file.startsWith('src/')) {
console.log('src目录文件变化，刷新页面')
server.ws.send({
type: 'full-reload',
path: '*'
})
}
})
},
handleHotUpdate({ file }) {
if (file.endsWith('.tsx')) {
console.log('TSX文件修改，触发全量刷新')
devServer.ws.send({
type: 'full-reload',
path: '*'
})
}
}
}
}
注意
configureServer(server) {
// 这个会在Vite中间件之前执行
server.middlewares.use(...)
// 返回的函数会在Vite中间件之后执行
return () => {
server.middlewares.use(...)
}
}
可以 自动插入标签 修改内容
transformIndexHtml(html, ctx) {
const tags: Array<{
tag: string
injectTo: 'head' | 'body' | 'head-prepend' | 'body-prepend'
children?: string
attrs?: Record<string, string>
}> = []
const isDev = !!ctx.server
if (isDev) {
tags.push({
tag: 'script',
injectTo: 'body-prepend',
children: 'console.log("开发模式已启动")'
})
} else {
tags.push({
tag: 'meta',
injectTo: 'head',
attrs: { name: 'robots', content: 'index,follow' }
})
}
const newHtml = html.replace(
'<title>Vite + React + TS</title>',
'<title>我的定制应用</title>'
)
// 返回符合 Vite 要求的类型
return {
html: newHtml,
tags
}
},
handleHotUpdate(ctx) {
if (ctx.file.endsWith('.tsx')) {
console.log('TSX文件修改，触发全量刷新')
devServer.ws.send({
type: 'full-reload',
path: '*'
})
}
// 2. 只处理项目文件，忽略node_modules
return ctx.modules.filter((module) => !module?.id?.includes('node_modules'))
}
graph TD
A[采购食材 config] --> B[确认菜单 configResolved]
B --> C[员工培训 configureServer]
C --> D[开门营业 buildStart]
D --> E{客人点餐}
E -->|HTML订单| F[摆盘 transformIndexHtml]
E -->|食材请求| G[接单→备货→烹饪 resolveId→load→transform]
E -->|变更需求| H[厨房监控 handleHotUpdate]
H --> I{是否打烊}
I -->|是| J[清理 buildEnd → 关店 closeBundle]
一个自动引入插件 可以自动为你的项目按需导入 API，无需手动编写 import 语句，自动导入，按需加载。
思考: 问题
所以的插件功能主要实现 自动导入全部antd组件 并且可以自定义前缀
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import AutoImport from 'unplugin-auto-import/vite'
import antdResolver from './unplugin-auto-import-antd'
// https://vite.dev/config/
export default defineConfig({
plugins: [
react(),
AutoImport({
imports: [
'react',
{
// antd: [
// 'Button',
// 'Input'
// ]
}
],
resolvers: [
// antdResolver({
// prefix: 'A', // 可选：为所有组件添加 A 前缀
// packageName: 'antd' // 可选：默认为 'antd'
// }),
{
type: 'component',
resolve: (name: string) => {
console.log('resolve', name)
const supportedComponents = ['AButton', 'Button', 'AInput', 'Table'] // 扩展这个列表
if (supportedComponents.includes(name)) {
return {
from: 'antd',
name: 'Input',
as: `${name}` // 统一添加A前缀
}
}
return undefined
}
}
],
dts: true, // 生成类型声明文件
eslintrc: {
enabled: true // 生成 eslint 配置
}
})
]
})
import type { Plugin } from 'vite'
import fs from 'node:fs/promises'
import { transform } from '@svgr/core'
import { transform as esbuildTransform } from 'esbuild'
interface SvgrOptions {
defaultExport?: 'url' | 'component' // 导出类型：URL字符串 或 React组件
svgrOptions?: Record<string, any> // 自定义SVGR配置
}
export default function svgrPlugin(options: SvgrOptions = {}): Plugin {
// 设置默认值：默认导出为组件，空SVGR配置
const { defaultExport = 'component', svgrOptions = {} } = options
return {
name: 'vite-plugin-svgr',
// transform 钩子：转换文件内容
async transform(_, id) {
// 只处理 .svg 文件
if (!id.endsWith('.svg')) return
try {
// 1. 读取 SVG 文件内容
const svg = await fs.readFile(id, 'utf-8')
// 2. 使用 SVGR 将 SVG 转换为 React 组件代码
const componentCode = await transform(
svg, // SVG 原始内容
{
...svgrOptions, // 用户自定义配置
// 核心插件配置开始
plugins: [
'@svgr/plugin-jsx', // 转换 SVG 为 JSX
'@svgr/plugin-prettier' // 格式化生成的代码
],
// 其他重要配置
typescript: true, // 生成 TS 兼容代码
jsxRuntime: 'automatic', // 使用新版 JSX 运行时
exportType: 'named', // 使用命名导出
// 自定义模板：控制组件输出结构
template: ({ componentName, jsx }, { tpl }) => {
return tpl`
const ${componentName} = (props) => ${jsx};
export { ${componentName} };
`
}
},
{ componentName: 'ReactComponent' } // 设置组件名称
)
// 3. 清理生成的代码
let jsCode = componentCode
.replace(/^\/\*.*?\*\/\s*/gms, '') // 移除注释
.replace(/\n+/g, '\n') // 压缩空行
.trim()
// 4. 处理导出逻辑
if (defaultExport === 'url') {
// URL 模式：默认导出 SVG 路径
jsCode = `
${jsCode}
export default ${JSON.stringify(id)};
`.trim()
} else {
// 组件模式：默认导出 React 组件
jsCode = `
${jsCode}
export default ReactComponent;
`.trim()
}
// 5. 使用 esbuild 转换 JSX 为浏览器可执行代码
const result = await esbuildTransform(jsCode, {
loader: 'jsx', // 指定为 JSX 类型
jsx: 'automatic', // 使用新版 JSX 转换
sourcefile: id, // 源文件路径（用于 sourcemap）
format: 'esm', // 输出 ESM 格式
target: 'es2020', // 目标 ES 版本
logLevel: 'silent' // 不输出日志
})
// 6. 返回转换后的代码
return {
code: result.code,
map: result.map || null
}
} catch (error) {
// 错误处理：回退到原始 SVG 路径导出
console.error(`SVG转换失败 [${id}]:`, error)
return {
code: `export default ${JSON.stringify(id)};`,
map: null
}
}
}
}
}
在Web开发中，文件上传是一个常见的功能需求。无论是用户头像的上传、文档的提交还是图片的分享，文件上传都扮演着重要的角色。本文将详细介绍文件上传的消息格式和实现方式，帮助你更好地理解和实现文件上传功能。
文件上传的本质仍然是一个数据提交过程，只是数据量通常较大。在实践中，人们逐渐形成了一种共识，文件上传默认使用multipart/form-data格式。这种格式允许在一个请求中发送多个部分（part），每个部分可以包含不同的数据类型，如文本字段和文件数据。
以下是一个典型的文件上传请求格式：
POST /upload HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="avatar"; filename="小仙女.jpg"
Content-Type: image/jpeg
(文件二进制数据)
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="username"
admin
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="password"
123123
----WebKitFormBoundary7MA4YWxkTrZu0gW
multipart/form-data，浏览器会自动分配一个定界符boundary。boundary分割成多个部分，每个部分是一个键值对。对于文件数据部分，还会包含文件的本地名称和MIME类型。在现代Web开发中，文件上传通常通过表单或JavaScript实现。以下是一个基于表单的文件上传实现示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传示例</title>
</head>
<body>
<form action="http://localhost:8000/api/upload" method="post" enctype="multipart/form-data">
<label for="avatar">选择文件：</label>
<input type="file" id="avatar" name="avatar">
<br>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<br>
<button type="submit">上传文件</button>
</form>
</body>
</html>
使用JavaScript可以实现更灵活的文件上传功能，例如在上传前进行文件大小和类型的验证。以下是一个使用FormData和fetch API实现文件上传的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传示例</title>
</head>
<body>
<input type="file" id="avatar">
<input type="text" id="username">
<input type="password" id="password">
<button id="uploadButton">上传文件</button>
<script>
document.getElementById('uploadButton').addEventListener('click', function() {
const avatar = document.getElementById('avatar').files[0];
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const formData = new FormData();
formData.append('avatar', avatar);
formData.append('username', username);
formData.append('password', password);
fetch('http://localhost:8000/api/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('上传成功:', data);
})
.catch(error => {
console.error('上传失败:', error);
});
});
</script>
</body>
</html>
Blob（Binary Large Object） 是 JavaScript 处理二进制数据的核心对象：
image/png）描述数据格式文件操作：<input type="file">获取的 File 对象继承自 Blob
document.querySelector("input").addEventListener("change", (e) => {
const file = e.target.files[0]; // File继承自Blob
console.log(file.size); // 文件大小
});
动态文件下载
const blob = new Blob(["Hello, World!"], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "file.txt";
a.click();
URL.revokeObjectURL(url); // 释放内存
分片上传
async function upload(file) {
const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
for (let start = 0; start < file.size; start += CHUNK_SIZE) {
const chunk = file.slice(start, start + CHUNK_SIZE);
await fetch("/upload", { method: "POST", body: chunk });
}
}
媒体预览
const img = document.getElementById("preview");
img.src = URL.createObjectURL(file);
new Blob(array, options)
array：数据源数组（ArrayBuffer/String/Blob）options：
type：MIME 类型（默认""）blob.size; // 字节大小
blob.type; // MIME类型
blob.slice(); // 分割Blob
blob.stream(); // 返回ReadableStream
blob.arrayBuffer(); // 转为ArrayBuffer（异步）
blob.text(); // 转为文本（异步）
function base64ToBlobUrl(base64Data, mimeType) {
// 1. Base64解码
const byteChars = atob(base64Data);
// 2. 创建二进制数组
const byteArray = new Uint8Array(byteChars.length);
for (let i = 0; i < byteChars.length; i++) {
byteArray[i] = byteChars.charCodeAt(i);
}
// 3. 创建Blob并生成URL
const blob = new Blob([byteArray], { type: mimeType });
return URL.createObjectURL(blob);
}
// 音频播放
const audioUrl = base64ToBlobUrl(base64Data, "audio/mpeg");
const audio = new Audio(audioUrl);
audio.play();
// 图片预览
const img = document.createElement("img");
img.src = base64ToBlobUrl(base64Image, "image/jpeg");
document.body.appendChild(img);
data:协议的限制内存管理：及时释放资源
const url = base64ToBlobUrl(data, "audio/mp3");
audio.src = url;
// 播放结束后释放
audio.onended = () => URL.revokeObjectURL(url);
MIME 类型对照表
| 实际格式 | 正确 MIME 类型 |
|---|---|
| MP3 | audio/mpeg |
| WAV | audio/wav |
| PNG | image/png |
| JPEG | image/jpeg |
大文件处理优化
function chunkedBase64ToBlob(base64Data, mimeType, chunkSize = 1_000_000) {
const chunks = [];
for (let i = 0; i < base64Data.length; i += chunkSize) {
const chunk = base64Data.slice(i, i + chunkSize);
const byteChars = atob(chunk);
const byteArray = new Uint8Array(byteChars.length);
for (let j = 0; j < byteChars.length; j++) {
byteArray[j] = byteChars.charCodeAt(j);
}
chunks.push(byteArray);
}
return URL.createObjectURL(new Blob(chunks, { type: mimeType }));
}
// 接收Base64语音
socket.on("voice-message", (data) => {
const audio = new Audio(base64ToBlobUrl(data, "audio/webm"));
// 播放后自动清理
audio.onended = () => {
URL.revokeObjectURL(audio.src);
audio.remove();
};
document.body.appendChild(audio);
audio.play();
});
// Canvas转Blob预览
canvas.toBlob((blob) => {
const img = new Image();
img.src = URL.createObjectURL(blob);
img.onload = () => URL.revokeObjectURL(img.src);
document.body.appendChild(img);
}, "image/png");
// 旧浏览器兼容处理
if (typeof atob === "undefined") {
window.atob = function (encoded) {
return Buffer.from(encoded, "base64").toString("binary");
};
}
if (!URL.createObjectURL) {
URL.createObjectURL = function (blob) {
return `data:${blob.type};base64,${btoa(
new Uint8Array(blob).reduce(
(data, byte) => data + String.fromCharCode(byte),
""
)
)}`;
};
}
最佳实践：Blob 对象是浏览器端处理二进制数据的基石，结合 Base64 转换技术，可在保证性能的前提下实现丰富的文件操作功能。关键要掌握内存管理、类型匹配和分块处理三大核心技巧。
文章结构如下：
- 引言：响应式系统的重要性
- 响应式基础：定义和核心概念
- Vue 2的响应式原理（Object.defineProperty）
- Vue 3的响应式原理（Proxy）
- 依赖收集与派发更新
- 响应式API对比（Vue 2 vs Vue 3）
- 计算属性和侦听器
- 响应式系统的局限性和解决方案
- 最佳实践
- 总结
在现代前端开发中，响应式编程已成为构建动态用户界面的核心范式。Vue 的响应式系统是其最强大的特性之一，它使得数据与DOM之间的同步变得自动化且高效。本文将深入剖析 Vue 响应式系统的实现原理、核心概念和最佳实践，帮助您全面掌握这一关键技术。
| 概念 | 作用 | 示例 |
|---|---|---|
| 响应式数据 | 被 Vue 追踪的数据 |
data(), reactive(), ref()
|
| 依赖收集 | 建立数据-视图关系 | getter 中收集 watcher |
| 派发更新 | 数据变化时通知更新 | setter 中触发 watcher 更新 |
| 异步队列 | 优化更新性能 | 批量处理数据变更 |
// Vue 2 选项式 API
data() {
return {
message: 'Hello Vue 2'
}
}
// Vue 3 组合式 API
import { reactive, ref } from 'vue'
const state = reactive({
count: 0
})
const message = ref('Hello Vue 3')
function defineReactive(obj, key, val) {
const dep = new Dep() // 依赖管理器
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
// 收集当前正在计算的 watcher
if (Dep.target) {
dep.depend()
}
return val
},
set(newVal) {
if (newVal === val) return
val = newVal
// 通知所有订阅者更新
dep.notify()
}
})
}
1. 组件渲染 → 2. 触发数据 getter → 3. 收集当前 Watcher
4. 数据变更 → 5. 触发 setter → 6. 通知 Dep → 7. 执行 Watcher 更新
this.obj.newProp = value
this.arr[index] = newValue 不会触发更新this.arr.length = newLength 无效Vue.set(target, propertyName/index, value)this.$set(target, propertyName/index, value)// 添加新属性
Vue.set(this.obj, 'newProp', value)
this.$set(this.obj, 'newProp', value)
// 修改数组
this.$set(this.arr, index, newValue)
this.arr.splice(index, 1, newValue)
问题：直接添加/删除属性不会触发更新
解决：
// Vue 2
this.$set(this.user, 'newProp', value)
// Vue 3
this.user.newProp = value // 直接工作
变异方法（自动触发更新）：
push(), pop(), shift(), unshift(), splice(), sort(), reverse()
非变异方法：
filter(), concat(), slice() - 需要替换原数组
特殊案例：
// Vue 2
this.$set(this.items, index, newValue)
// 直接修改长度不触发
this.items.splice(newLength)
function reactive(obj) {
return new Proxy(obj, {
get(target, key, receiver) {
track(target, key) // 依赖收集
const res = Reflect.get(target, key, receiver)
// 深层响应处理
return isObject(res) ? reactive(res) : res
},
set(target, key, value, receiver) {
const oldValue = target[key]
const result = Reflect.set(target, key, value, receiver)
if (hasChanged(value, oldValue)) {
trigger(target, key) // 触发更新
}
return result
},
deleteProperty(target, key) {
const hadKey = hasOwn(target, key)
const result = Reflect.deleteProperty(target, key)
if (hadKey) {
trigger(target, key)
}
return result
}
})
}
| API | 适用场景 | 特点 | 示例 |
|---|---|---|---|
reactive |
对象/数组 | 深度响应 | const state = reactive({ count: 0 }) |
ref |
基本类型 | 通过.value 访问 |
const count = ref(0) |
computed |
计算属性 | 自动缓存 | const doubled = computed(() => count.value * 2) |
watch |
侦听变化 | 精确控制 | watch(count, (newVal) => {...}) |
watchEffect |
自动侦听 | 立即执行 | watchEffect(() => console.log(count.value)) |
toRefs |
解构响应 | 保持响应性 | const { count } = toRefs(state) |
Vue 使用异步更新策略优化性能：
nextTick 等待 DOM 更新后执行代码this.count = 10
this.count = 20
this.count = 30 // 只会触发一次更新
// 获取更新后 DOM
nextTick(() => {
console.log('DOM updated!')
})
import { customRef } from 'vue'
function debouncedRef(value, delay = 200) {
let timer
return customRef((track, trigger) => {
return {
get() {
track()
return value
},
set(newValue) {
clearTimeout(timer)
timer = setTimeout(() => {
value = newValue
trigger()
}, delay)
}
}
})
}
// 使用
const text = debouncedRef('', 500)
import { reactive } from 'vue'
const stateMachine = reactive({
state: 'idle',
transitions: {
idle: { start: 'loading' },
loading: { success: 'success', error: 'error' },
success: { reset: 'idle' },
error: { retry: 'loading', reset: 'idle' }
},
dispatch(action) {
const nextState = this.transitions[this.state][action]
if (nextState) this.state = nextState
}
})
// store.js
import { reactive } from 'vue'
export const store = reactive({
count: 0,
increment() {
this.count++
}
})
// ComponentA.vue
import { store } from './store'
// ComponentB.vue
import { store } from './store'
Object.freeze(largeData)
| 问题场景 | 解决方案 |
|---|---|
| 循环引用导致内存泄漏 | 使用 WeakMap 或手动解引用 |
| 大型响应式对象性能问题 | 分片加载 + 非响应式处理 |
| 异步更新导致状态不一致 | 使用 nextTick 确保更新完成 |
| 第三方库集成问题 | 使用 shallowRef 或 markRaw |
Vue.config.warnHandler
| 特性 | Vue 2 | Vue 3 |
|---|---|---|
| 核心实现 | Object.defineProperty | Proxy |
| 数组处理 | 特殊劫持方法 | 原生支持 |
| 性能 | 递归初始化 | 惰性响应 |
| 集合类型 | 不支持 | Map/Set 支持 |
| 按需响应 | 困难 | 精细控制 |
reactivity transform
Vue 的响应式系统将前端开发从繁琐的 DOM 操作中解放出来，让开发者能够专注于数据和业务逻辑。通过本文的深度解析，您应该能够：
响应式编程不仅是 Vue 框架的特性，更是一种现代化的编程范式。掌握它，将为您构建高效、可维护的前端应用奠定坚实基础。
概述；利用 React 框架 实现上传图片，调用 moon-shoot 多模态模型识别图片，并通过设计 prompt 生成返回一个 json 数据，并调用火山引擎语音模型生成对应的语音。
{ "image_discription": "图片描述", "representative_word": "图片代表的英文单词", "example_sentence": "结合英文单词和图片描述，给出一个简单的例句", "explaination": "结合图片解释英文单词，段落以 Look at...开头，将段落分句，每一句单独一行，解释的最后给一个日常生活有关的问句", "explaination_replys": ["根据 explaination 给出的回复 1", "根据 explaination 给出的回复 2"] }
一个图片上传卡片，一个点击查看详情页面的按钮，以及点击按钮出现的详情页面，页面垂直排布，使用 flex 布局
效果
项目地址 AIFullStackJourney/React/shot-word at main · XXUZZWZ/AIFullStackJourney
在前端将 base64 编码的图片数据转换成二进制对象，并使用 URL.createObjectURL()方法创建一个临时 URL，并设置给 img 标签的 src 属性，实现图片的预览。避免 Content-Security-Policy 对 data: 协议的限制，规避跨域资源访问问题（CORS）。
Blob URL 可流式播放，无需等待完整数据解码
内存管理更优（Base64 Data URL 体积增大 33%）
实现函数
const getAudioUrl = (base64Data) => {
// 创建一个数组来存储字节数据
var byteArrays = [];
// 使用atob()将Base64编码的字符串解码为原始二进制字符串
// atob: ASCII to Binary String (原始二进制字符串（每个字符表示一个字节，但以字符串的形式存在）)
var byteCharacters = atob(base64Data);
// 遍历解码后的二进制字符串的每个字符
for (var offset = 0; offset < byteCharacters.length; offset++) {
// 将每个字符转换为其ASCII码值（0-255之间的数字）
var byteArray = byteCharacters.charCodeAt(offset);
// 将ASCII码值添加到字节数组中
byteArrays.push(byteArray);
}
// 创建一个Blob对象
// new Uint8Array(byteArrays)将普通数组转换为8位无符号整数数组
// { type: 'audio/mp3' } 指定Blob的MIME类型为MP3音频
var blob = new Blob([new Uint8Array(byteArrays)], { type: "audio/mp3" });
// 使用URL.createObjectURL创建一个临时的URL
// 这个URL可以用于<audio>标签的src属性
// 这个URL在当前页面/会话有效，页面关闭后会自动释放
// 创建一个临时 URL 供音频播放
return URL.createObjectURL(blob);
};
下面我将详细拆解 getAudioUrl 函数的每个步骤，解释其工作原理和前端处理的意义：
const getAudioUrl = (base64Data) => {
// 步骤1：准备存储容器
var byteArrays = [];
作用：创建空数组用于存储转换后的二进制数据。
// 步骤2：Base64解码
var byteCharacters = atob(base64Data);
关键点：
atob() 是浏览器内置函数，将 Base64 字符串解码为二进制字符串"TWFu" (Base64) → "Man" (二进制字符串)// 步骤3：字符到字节转换
for (var offset = 0; offset < byteCharacters.length; offset++) {
var byteArray = byteCharacters.charCodeAt(offset);
byteArrays.push(byteArray);
}
核心操作：
charCodeAt() 获取字符的 ASCII 码值（0-255）字符: 'M' 'a' 'n'
ASCII: 77 97 110
数组: [77, 97, 110]
// 步骤4：创建二进制对象
var blob = new Blob([new Uint8Array(byteArrays)], { type: "audio/mp3" });
关键技术：
new Uint8Array(byteArrays)：
new Blob()：
{ type: "audio/mp3" } 指定 MIME 类型，告知浏览器这是 MP3 音频 // 步骤5：生成可访问URL
return URL.createObjectURL(blob);
};
核心价值：
blob:https://example.com/550e8400-e29b-41d4...）<audio src="{getAudioUrl(base64Data)}" controls />
数据转换的必要性
与 Data URL 的对比
// 替代方案（不推荐）：
const dataUrl = `data:audio/mp3;base64,${base64Data}`;
浏览器兼容性处理
// 兼容旧浏览器的atob
if (typeof atob === "undefined") {
atob = function (encoded) {
return Buffer.from(encoded, "base64").toString("binary");
};
}
语音消息预览：
// 接收Base64语音数据
socket.on("voice-message", (data) => {
const audio = new Audio(getAudioUrl(data));
audio.play();
// 播放后清理内存
audio.onended = () => URL.revokeObjectURL(audio.src);
});
性能优化技巧：
// 更高效的Uint8Array直接填充
const optimizedVersion = (base64Data) => {
const str = atob(base64Data);
const array = new Uint8Array(str.length);
for (let i = 0; i < str.length; i++) {
array[i] = str.charCodeAt(i);
}
return URL.createObjectURL(
new Blob([array], { type: "audio/webm" }) // 根据实际类型调整
);
};
内存管理
主动释放资源：
const url = getAudioUrl(data);
audio.src = url;
// 不再需要时
URL.revokeObjectURL(url);
页面关闭时浏览器自动回收
MIME 类型陷阱
audio/mp3 可能不匹配实际编码| 实际格式 | 正确 MIME 类型 |
|---|---|
| MP3 | audio/mpeg |
| WAV | audio/wav |
| OGG | audio/ogg |
大文件处理
超过 50MB 的音频建议分块处理：
const CHUNK_SIZE = 1_000_000; // 1MB分块
const chunks = [];
for (let i = 0; i < base64Data.length; i += CHUNK_SIZE) {
const chunk = base64Data.slice(i, i + CHUNK_SIZE);
chunks.push(atob(chunk));
}
const blob = new Blob(
chunks.map(
(c) => new Uint8Array([...c].map((char) => char.charCodeAt(0)))
),
{ type: "audio/mp3" }
);
这种处理方式在前端实现了 二进制转换 → 内存存储 → 媒体资源生成 的完整链路，是处理客户端音频数据的标准实践方案。
在前端处理 Base64 音频数据并生成 Blob URL（如示例代码所示）具有以下显著优势：
<!-- 直接使用生成的 URL -->
<audio src="{getAudioUrl(base64Data)}" controls />
data:audio/mp3;base64,...）更高效：
Content-Security-Policy 对 data: 协议的限制Uint8Array 直接处理二进制数据，比字符串操作更高效// 播放结束后释放资源
audioElement.onended = () => {
URL.revokeObjectURL(audioElement.src);
};
Blob，IE11+ 支持 URL.createObjectURL
core-js）type 与实际格式匹配（示例中 audio/mp3 需与实际编码一致）// 更高效的转换方式（减少循环次数）
const getAudioUrlOptimized = (base64Data) => {
const byteChars = atob(base64Data);
const byteArray = new Uint8Array(byteChars.length);
for (let i = 0; i < byteChars.length; i++) {
byteArray[i] = byteChars.charCodeAt(i);
}
return URL.createObjectURL(new Blob([byteArray], { type: "audio/mp3" }));
};
FileReader.readAsDataURL() 获取的音频处理⚠️ 重要提示：对于持久化存储，仍需将原始 Base64 或二进制数据发送至服务器，Blob URL 仅适用于临时访问场景。
前面咱们已经跑通了第一个Cypress测试用例，这一章就来深入看看它的“内部构造”。就像拆一台家用小电器，搞懂每个部件的作用，才能更好地驾驭它解决实际问题。
第一次启动Cypress时，它会自动生成一套标准的文件结构，就像盖房子先搭好框架。这些文件夹各司其职，让测试工作条理清晰：
cypress/fixtures：测试数据的“仓库”
这里放的是JSON格式的静态数据文件，比如登录用的账号密码、接口返回的模拟数据等。举个例子，创建一个user.json，把用户名密码存进去，测试时用cy.fixture('user')就能直接调用，不用在代码里反复写这些数据，改起来也方便。
cypress/integration：测试用例的“主战场”
所有测试脚本（.js、.jsx等格式）都放在这里，Cypress会自动识别并执行。咱们之前写的登录测试用例，就该放在这个文件夹下。如果项目大，还能建子文件夹分类，比如按“登录”“购物车”“支付”分开管理，找起来一目了然。
cypress/plugins：功能扩展的“工具箱”
默认有个index.js文件，用来扩展Cypress的能力。比如想在测试前连接数据库清理数据，或者动态修改配置，都可以在这里写代码，Cypress会在测试开始前自动加载执行。
cypress/support：自定义命令的“加工厂”
commands.js：可以把重复的操作封装成命令，比如“输入用户名→输入密码→点击登录”这一串步骤，写成cy.login()，之后在所有测试用例里直接调用，不用重复写代码。index.js：负责加载上面的自定义命令，还能放一些全局配置，比如设置每个用例运行前都自动访问某个页面。Cypress很灵活，就像手机的“设置”界面，能根据项目需求调整各种参数，主要通过cypress.json文件或代码来配置：
基础配置项
比如设置基础URL，之后访问页面就不用写完整地址了；调整浏览器窗口大小，模拟手机或平板的显示效果：
{
"baseUrl": "http://localhost:7077", // 基础地址，简化访问路径
"viewportWidth": 375, // 模拟手机宽度
"viewportHeight": 667, // 模拟手机高度
"testFiles": "login/**/*.js" // 只运行登录相关的测试用例
}
动态改配置
代码里用Cypress.config()能临时调整参数，比如测试某个慢接口时，延长超时时间：
// 把页面加载超时从默认60秒改成100秒
Cypress.config('pageLoadTimeout', 100000)
写自动化测试最头疼的就是“元素还没加载出来，代码就执行完了”，导致测试失败。但Cypress有个贴心的“自动重试”功能，就像有人帮你盯着页面，等元素准备好了再执行操作：
比如这段代码，检查页面上的h1标签是否包含“欢迎回来”：
cy.get('h1').should('contain', '欢迎回来')
如果h1暂时没有这段文字，Cypress会在4秒内（可以通过defaultCommandTimeout调整）反复检查，直到文字出现才继续，不用手动写sleep等待。
不过要注意：只有查询元素的命令（比如get find）会重试，像click()这种可能改变页面状态的命令不会重试，避免重复操作出问题。
测试跑完了，怎么清晰地展示结果？Cypress支持好几种“成绩单”格式，满足不同场景：
生成报告很简单，运行时加个参数就行，比如生成HTML报告：
npx cypress run --reporter mochawesome
上一篇文章 创建根节点 createRoot 介绍了 createRoot 函数，本文继续说下它的返回值，共三个：
其中 _internalRoot 在上一篇文章已经介绍，这里重点讲述 render 和 unmount。
ReactDOMRoot.prototype.render = function(children: ReactNodeList): void {
const root = this._internalRoot;
updateContainer(children, root, null, null)
}
ReactDOMRoot.prototype.unmount = function(): void {
const root = this._internalRoot;
if(root !== null) {
this._internalRoot = null;
const container = root.containerInfo;
// flushSync 是 React 提供的 API，外部也可以用，参考 https://zh-hans.react.dev/reference/react-dom/flushSync
flushSync((() => {
updateContainer(null, root, null, null)
}))
unmarkContainerAsRoot(container) // 函数定义在上一篇文章中
}
}
可以看到，两者都有 updateContainer 函数，下面重点说下。
updateContainer 函数分为 4 步：
// 把子节点渲染到容器内
function (
element: ReactNodeList, // 子节点
container: OpaqueRoot // FiberRoot
): Lane {
// 1. 获取 current 和 lane
// 在 React 中，lane 是用于标识 update 优先级，可以理解为表示 update 的优先级的一种机制。每个 update 都会被分配一个或多个 lane，以确定其在更新队列中的优先级顺序。
const current = container.current // container 对应的 fiber
// 获取本次 update 对应的 lane
const lane = requestUpdateLane(current)
// 2. 创建 update
const update = createUpdate(lane)
update.payload = {element}
// 3. update 入队，将 update 加入到 fiber 的 updateQueue 中
const root = enqueueUpdate(current, update, lane);
if (root !== null) {
// 4. 调度更新
scheduleUpdateOnFiber(root, current, lane);
}
}
function requestUpdateLane(fiber: Fiber): Lane {
// React 内部的一些 update，比如 flushSync、setState，会通过上下文变量来跟踪其优先级
const updateLane: Lane = (getCurrentUpdatePriority(): any);
if (updateLane !== NoLane) {
return updateLane
}
// React 外部的 update，根据事件类型，向当前环境获取对应的优先级
const eventLane: Lane = (getCurrentEventPriority(): any);
return updateLane
}
function getCurrentEventPriority(): EventPriority {
const currentEvernt = window.event;
if (currentEvernt === undefined) {
return DefaultEventPriority
}
return getEventPriority(currentEvernt.type)
}
export const DefaultEventPriority: EventPriority = DefaultLane // 页面初次渲染的 lane 是二进制的 32
let currentUpdatePriority: EventPriority = NoLane
function getCurrentUpdatePriority(): EventPriority {
return currentUpdatePriority
}
// 点击更新状态时触发
function setCurrentUpdatePriority(newPriority: EventPriority) {
currentUpdatePriority = newPriority
}
createRoot(root).render() 节点与类组件的 setState、forceUpdate 阶段均会创建 update
render() 两次会创建两个 update
类组件中调用两次 setState，也会创建两个 update。
// const UpdateState = 0 // 页面初次渲染，类组件 setState
// const ReplaceState = 1 // 类组件
// const ForceState = 2 // 类组件
// const CaptureState = 3 // 类组件
type Update<State> = {
lane: Lane,
tag: 0 | 1 | 2 | 3,
payload: any, // 携带的参数。初次渲染是子节点；类组件比如 setState 的参数
callback: (() => nuxed) | null,
next: Update<State> | null // 单链表
}
const UpdateState = 0
function createUpdate(lane: Lane): Update<mixed> {
const update: Update<mixed> = {
lane,
tag: UpdateState,
payload: null,
callback: null,
next: null
}
return update
}
createRoot(root).render() 阶段与类组件的 setState、forceUpdate 阶段最开始调用的是 enqueueUpdate。
type SharedQueue = {
pending: Update<State> | null, // 单向循环链表，尾节点 -> 头节点
lanes: Lanes // 多个 update 合并成一个
}
function enqueueUpdate<State>(
fiber: Fiber,
update: Update<State>,
lane: Lane
) {
const updateQueue = fiber.updateQueue
if (updateQueue === null) {
// 只发生在 fiber 卸载时
return null
}
const sharedQueue: SharedQueue<State> = (updateQueue: any).shared
return enqueueConcurrentClassUpdate(fiber, sharedQueue, update, lane)
}
type ConcurrentUpdate = {
next: ConcurrentUpdate,
lane: Lane
}
type ConcurrentQueue = {
pending: ConcurrentUpdate | null
}
// 如果渲染正在进行中，并且收到来自并发事件的更新，我们会等到当前的渲染结束（无论是完成还是被中断）之后再将其添加到 fiber 队列中。
// 将其推送到这个数组中，这样我们以后就可以访问 queue、fiber、update 等。
const concurrentQueues: Array<any> = []
let concurrentQueuesIndex = 0;
let concrrentlyUpdatedLanes: Lanes = NoLanes;
function enqueueConcurrentClassUpdate<State>(
fiber: Fiber,
queue: ClassQueue<State>,
update: ClassUpdate<State>,
lane: Lane
): FiberRoot | null {
const concurrentQueue: ConcurrentQueue = (queue: any)
const concurrentUpdate: ConcurrentUpdate = (update: any)
// 1. update 入队
enqueueUpdate(fiber, concurrentQueue, concurrentUpdate, lane)
// 2. 返回 FiberRoot
return getRootForUpdateFiber(fiber)
}
function enqueueUpdate(
fiber: Fiber,
queue: ConcurrentQueue | null,
update: ConcurrentUpdate | null,
lane: Lane
) {
concurrentQueues[concurrentQueuesIndex++] = fiber
concurrentQueues[concurrentQueuesIndex++] = queue
concurrentQueues[concurrentQueuesIndex++] = update
concurrentQueues[concurrentQueuesIndex++] = lane
concrrentlyUpdatedLanes = mergeLanes(concrrentlyUpdatedLanes, lane)
fiber.lanes = mergeLanes(fiber.lanes, lane)
const alternate = fiber.alternate
// 如果老节点非空
if (alternate !== null) {
alternate.lanes = mergeLanes(alternate.lanes, lane)
}
}
function mergeLanes(a: Lanes | Lane, b: Lanes | Lane): Lanes {
return a | b
}
页面初次渲染、类组件 setState/forceUpdate、函数组件 useState/useReducer 都会走到更新，都会调用 scheduleUpdateOnFiber 函数。
function _markRootUpdated(root: FiberRoot, updatedLane: Lane) {
root.pendingLanes |= updatedLane
// 如果 update 是 idle 的，将不会处理它，因为我们直到所有常规 update 完成后才会处理 idle 更新
if(updatedLane !== IdleLane) {
root.suspendedLanes = NoLandex
root.pingedLanes = NoLanes
}
}
// 标记根节点有一个 pending update，即待处理的更新。
function markRootUpdated(root: FiberRoot, updatedLanes: Lanes) {
_markRootUpdated(root, updatedLanes)
if (enableInfiniteRenderLoopDetection) {
// 如果循环超过限制次数（类组件 50 次，函数组件 25 次），抛出错误。比如在类组件的 render 函数里执行 setState
throwIfInfiniteUpdateLoopDetected()
}
}
function scheduleUpdateOnFiber(
root: FiberRoot, // 从根节点开始更新：具体的更新是在子节点上发生的，但是遍历是从根节点开始的
fiber: Fiber,
lane: Lane
) {
markRootUpdated(root, lane)
}
