HTML - 基础标签

HTML是Web的骨架，掌握基础文档结构和常用标签是前端开发的起点。

文档结构与根元素

知识点 说明 相关标签/属性
文档声明 DOCTYPE声明，告诉浏览器文档类型 <!DOCTYPE html>
html根元素 HTML文档的根元素，包含所有其他元素 html lang
head头部 包含文档元数据，不显示在页面上 head title meta
body主体 包含所有可见的页面内容 body
字符编码 设置文档字符编码，通常使用UTF-8 charset="UTF-8"
视口设置 控制页面在移动设备上的显示 viewport

文本标签

标签 说明 使用场景
h1-h6 标题标签，h1最高级，h6最低级 文章标题、章节标题
p 段落标签 普通文本段落
br 换行标签 强制换行
hr 水平分隔线 内容分隔
pre 预格式化文本，保留空格和换行 代码展示
blockquote 引用文本块 引用他人内容

格式化标签

标签 效果 语义
strong 粗体 重要强调（语义化）
b 粗体 样式粗体（无语义）
em 斜体 强调（语义化）
i 斜体 技术术语等（无语义）
del 删除线 删除内容
ins 下划线 插入内容
mark 高亮 标记重点
small 小文本 免责声明、版权

链接与图像

标签 属性 说明
<a> href 链接地址
<a> target 打开方式（_self/_blank）
<a> rel 关系（nofollow/noopener）
<a> download 下载属性
<a> hreflang 链接语言
<img> src 图像路径
<img> alt 替代文本（必填）
<img> width/height 尺寸
<img> loading 加载方式（lazy懒加载）
<img> srcset 响应式图片

列表标签

标签 说明 子元素
ul 无序列表 li
ol 有序列表 li
li 列表项 可包含其他元素
dl 定义列表 dt dd
dt 定义术语 -
dd 定义描述 -

表格标签

标签 说明 属性
table 表格容器 -
tr 表格行 -
td 单元格 colspan rowspan
th 表头单元格 scope colspan
thead 表头部分 -
tbody 表格主体 -
tfoot 表脚部分 -
caption 表格标题 -

HTML - 表单

表单是Web应用中用户交互的核心，掌握表单元素的创建与验证。

表单元素

元素 说明 主要属性
form 表单容器 action method enctype
input 输入控件 type name value
textarea 多行文本输入 rows cols maxlength
select 下拉选择框 multiple size
option 选项 value selected disabled
optgroup 选项分组 label
datalist 输入建议列表 list
button 按钮 type (submit/reset/button)
label 表单标签 for
fieldset 表单字段集 disabled
legend 字段集标题 -

input 类型

类型 说明 验证支持
text 单行文本 minlength, maxlength, pattern
password 密码输入 -
email 邮箱地址 内置邮箱验证
number 数字输入 min, max, step
tel 电话号码 pattern
url URL地址 内置URL验证
date 日期选择 min, max
time 时间选择 min, max
datetime-local 本地日期时间 min, max
color 颜色选择器 -
range 范围滑块 min, max, step
search 搜索框 -
file 文件上传 accept, multiple
checkbox 复选框 checked
radio 单选框 checked, name分组

表单属性

属性 说明 适用元素
name 表单控件名称 input, select, textarea, button
value 控件值 input, select, button
placeholder 输入提示 input, textarea
required 必填验证 input, select, textarea
disabled 禁用控件 所有表单元素
readonly 只读 input, textarea
autocomplete 自动完成 form, input
autofocus 自动聚焦 form内首个元素
pattern 正则验证 input (text, tel等)
min/max 最小/最大值 input (number, date, range)
step 步长 input (number, range)
novalidate 禁用验证 form

HTML - HTML5 新特性

HTML5引入了大量新特性和API，极大扩展了Web应用的能力。

语义化标签

标签 说明 使用场景
header 页面或区域的头部 页面顶部、文章标题区
nav 导航链接区域 主菜单、目录
main 主要内容区域 页面核心内容（唯一）
article 独立内容区块 博客文章、新闻
section 文档章节 文章小节、功能区块
aside 侧边栏内容 相关链接、广告
footer 页面或区域底部 版权信息、联系方式
address 联系信息 作者联系方式

文本增强标签

标签 说明 示例
time 时间标记，datetime属性定义机器可读时间 <time datetime="2024-01-01">元旦</time>
mark 高亮文本 <mark>关键词</mark>
progress 进度条 <progress value="70" max="100">70%</progress>
meter 度量衡（已知范围） <meter min="0" max="100" value="75">75%</meter>
figure 独立内容单元 图片、图表、代码块
figcaption figure的标题 图片说明
details 可展开详情（需配合summary） FAQ、展开更多
summary details的可见标题 点击展开的部分

多媒体标签

标签 说明 主要属性
video 视频播放 src, controls, autoplay, loop, muted, poster
audio 音频播放 src, controls, autoplay, loop, muted
source 为video/audio指定多个源 src, type
track 字幕轨道 src, kind, srclang, label
picture 响应式图片容器 -

响应式图片

属性/标签 说明 示例
srcset 图片资源列表 + 描述符 src="small.jpg 1x, medium.jpg 2x"
sizes 图片显示尺寸 sizes="(max-width: 600px) 100vw, 50vw"
<source> picture内指定不同条件的图片 <source media="(min-width: 800px)" srcset="large.jpg">
loading 懒加载控制 loading="lazy"
decoding 图片解码方式 decoding="async"
srcset+type 不同图片格式选择 type="image/webp"

Web API

API 说明 主要方法
Canvas 2D图形绘制 getContext('2d'), fillRect(), drawImage()
Web Storage 客户端存储 localStorage.setItem(), sessionStorage.getItem()
Geolocation 获取地理位置 getCurrentPosition(), watchPosition()
Drag and Drop 拖拽API draggable="true", ondragstart, ondrop
Web Workers 后台线程执行脚本 new Worker(), postMessage()
File API 文件操作 FileReader, FileList
History API 浏览器历史管理 pushState(), replaceState(), popstate

HTML - 无障碍与SEO

无障碍访问(A11y)和搜索引擎优化是现代Web开发的重要考量。

无障碍访问 - ARIA属性

属性 说明 示例
role 定义元素的角色 role="button", role="navigation"
aria-label 为元素提供可访问标签 aria-label="关闭菜单"
aria-labelledby 引用其他元素作为标签 aria-labelledby="heading1"
aria-describedby 引用描述元素 aria-describedby="tooltip"
aria-hidden 隐藏元素（屏幕阅读器） aria-hidden="true"
aria-expanded 展开状态 aria-expanded="true/false"
aria-pressed 按下状态 aria-pressed="true"
aria-disabled 禁用状态 aria-disabled="true"
aria-current 当前项指示 aria-current="page"
aria-live 实时更新区域 aria-live="polite"

无障碍访问 - 其他要点

要点 说明
语义化HTML 使用header/nav/main/article/section/aside/footer等语义标签
图像alt 为所有img添加alt描述，装饰性图片alt=""
表单标签 使用label关联输入控件，required/aria-required标记必填
键盘导航 确保所有交互可通过键盘完成，tabindex控制顺序
焦点样式 不为:focus设置outline: none，提供可见焦点指示
颜色对比度 文本与背景对比度至少4.5:1（大文本3:1）
跳过链接 提供"跳转到主要内容"链接
表格可访问性 使用th的scope属性，caption标签提供标题

SEO 优化 - Meta标签

标签 说明 示例
<title> 页面标题（最重要SEO因素） <title>页面标题 - 网站名</title>
description 页面描述（搜索结果摘要） <meta name="description" content="页面描述...">
keywords 关键词（多数搜索引擎已忽略） <meta name="keywords" content="关键词1,关键词2">
author 作者 <meta name="author" content="作者名">
viewport 视口设置（影响移动体验） <meta name="viewport" content="width=device-width, initial-scale=1.0">
robots 爬虫规则 <meta name="robots" content="index,follow">
generator 生成工具 <meta name="generator" content="WordPress 6.0">
referrer 引用来源策略 <meta name="referrer" content="strict-origin-when-cross-origin">

SEO 优化 - 结构化数据

类型 说明 使用场景
JSON-LD 结构化数据格式，script标签嵌入 富摘要、Knowledge Panel
Schema.org 通用词汇表 所有类型内容
Article 文章类型 博客文章、新闻
Product 产品类型 商品信息、价格
Organization 组织类型 公司信息、Logo
BreadcrumbList 面包屑类型 页面路径导航
FAQ 问答类型 常见问题（富摘要）
LocalBusiness 本地商家 店铺信息、营业时间

SEO 优化 - Open Graph

属性 说明 示例
og:title 分享标题 <meta property="og:title" content="标题">
og:description 分享描述 <meta property="og:description" content="描述">
og:image 分享图片（重要） <meta property="og:image" content="图片URL">
og:url 页面URL <meta property="og:url" content="页面URL">
og:type 内容类型 <meta property="og:type" content="website">
og:site_name 网站名称 <meta property="og:site_name" content="网站名">
og:locale 语言/地区 <meta property="og:locale" content="zh_CN">
twitter:card Twitter卡片类型 <meta name="twitter:card" content="summary_large_image">

CSS - 基础语法与选择器

CSS为HTML添加样式，掌握基础语法和选择器是样式开发的第一步。

基本语法结构

组成部分 说明 示例
选择器 用于选中要样式的元素 p, .class, #id
声明块 包含一个或多个样式声明 { color: red; font-size: 16px; }
属性:值 具体的样式规则 color: blue;
注释 用于解释代码，不被执行 /* 这是一个注释 */
引入方式 内联/内部/外部样式表 <style>, <link rel="stylesheet">

基础选择器

选择器 语法 说明
元素选择器 p { } 选中所有指定元素
类选择器 .classname { } 选中所有class="classname"的元素
ID选择器 #idname { } 选中id="idname"的元素（唯一）
通配符选择器 * { } 选中所有元素
属性选择器 [attr], [attr="value"] 选中具有指定属性的元素

复合选择器

选择器 语法 说明 示例
后代选择器 空格 选中所有后代元素 .container p - container内所有p
子元素选择器 > 仅选中直接子元素 .container > p - container的直接子元素p
相邻兄弟 + 选中紧随其后的兄弟元素 h2 + p - h2后面紧跟的p
后续兄弟 ~ 选中后面所有兄弟元素 h2 ~ p - h2后面所有p
交集选择器 无空格 同时满足多个条件 p.highlight - p且class="highlight"

伪类选择器

伪类 说明 示例
:link 未访问的链接 a:link
:visited 已访问的链接 a:visited
:hover 鼠标悬停状态 button:hover
:active 激活状态（点击中） button:active
:focus 获得焦点状态 input:focus
:first-child 作为第一个子元素 p:first-child
:last-child 作为最后一个子元素 li:last-child
:nth-child(n) 第n个子元素 li:nth-child(2n) - 偶数项
:not(selector) 否定选择器 p:not(.highlight)

伪元素

伪元素 说明 使用场景
::before 在元素内容前插入虚拟元素 图标、装饰性内容
::after 在元素内容后插入虚拟元素 清除浮动、装饰
::first-line 元素第一行文本 首行特殊样式
::first-letter 元素第一个字母 首字母大写（drop cap）
::selection 用户选中的文本 自定义选中样式
::placeholder 输入框占位文本 自定义placeholder样式

CSS - 盒模型与布局

盒模型是CSS布局的核心，Flexbox和Grid是现代布局的两大支柱。

盒模型概念

组成部分 说明 CSS属性
content 内容区域，实际显示的内容 width, height
padding 内边距，内容与边框之间的区域 padding, padding-top, padding-right...
border 边框，内边距和外边距之间的边框 border, border-width, border-style
margin 外边距，边框与其他元素之间的区域 margin, margin-top, margin-right...

box-sizing 盒尺寸计算

值 说明 计算公式
content-box 默认值，只包含内容区域 总宽度 = width + padding + border
border-box 包含内容、内边距和边框 总宽度 = width（已包含padding和border）

display 显示类型

值 说明 特点
block 块级元素 独占一行，可设置宽高
inline 行内元素 同行显示，不可设置宽高
inline-block 行内块元素 同行显示，可设置宽高
none 不显示 完全隐藏，不占空间
flex 弹性盒容器 一维布局
grid 网格容器 二维布局

Flexbox 属性

属性 值 说明
flex-direction row 主轴水平（默认）
flex-direction column 主轴垂直
flex-direction row-reverse/column-reverse 反向排列
flex-wrap nowrap 不换行（默认）
flex-wrap wrap/wrap-reverse 换行
justify-content flex-start 主轴起点对齐
justify-content flex-end 主轴终点对齐
justify-content center 居中对齐
justify-content space-between 两端对齐，间距相等
justify-content space-around 间距两边小中间大
justify-content space-evenly 间距完全相等
align-items stretch 拉伸填满（默认）
align-items flex-start 交叉轴起点对齐
align-items flex-end 交叉轴终点对齐
align-items center 交叉轴居中
align-items baseline 基线对齐

Grid 网格布局

属性 说明 示例
grid-template-columns 定义列的尺寸和数量 1fr 1fr 1fr
grid-template-rows 定义行的尺寸和数量 auto 100px auto
gap 网格间距 gap: 10px
grid-template-areas 命名网格区域 "header header"
grid-column 指定列位置 grid-column: 1 / 3
grid-row 指定行位置 grid-row: 1 / 2

position 定位

值 说明 定位原点
static 默认定位，正常文档流 -
relative 相对定位 元素自身原位置
absolute 绝对定位 最近非static祖先元素
fixed 固定定位 浏览器视口
sticky 粘性定位 根据滚动位置切换

CSS - 高级特性与动画

掌握CSS高级特性，包括响应式设计、动画过渡和最新CSS功能。

响应式设计 - 单位

单位 说明 参考基准
px 像素 绝对单位
em 相对单位 父元素font-size
rem 相对单位 根元素font-size
% 百分比 父元素对应属性
vw 视口宽度 1vw = 1%视口宽度
vh 视口高度 1vh = 1%视口高度
vmin/vmax 视口极值 vw和vh中较小/较大者

媒体查询 @media

特性 说明 示例
min-width 最小宽度（及以上） @media (min-width: 768px)
max-width 最大宽度（及以下） @media (max-width: 1200px)
orientation 屏幕方向 @media (orientation: portrait)
prefers-color-scheme 颜色主题偏好 @media (prefers-color-scheme: dark)
prefers-reduced-motion 减少动画偏好 @media (prefers-reduced-motion: reduce)

CSS3 颜色

颜色模式 说明 示例
颜色名称 预定义颜色名 red, blue, transparent
十六进制 #RRGGBB或#RGB格式 #ff0000, #f00
RGB/rgba 红绿蓝+透明度 rgb(255, 0, 0), rgba(255,0,0,0.5)
HSL/hsla 色相饱和度亮度 hsl(0, 100%, 50%)
LCH/OKLCH 设备无关颜色 oklch(0.7 0.2 280)

背景与渐变

属性 说明 示例
background-image 设置背景图像 background-image: url(bg.jpg)
background-size 背景尺寸 cover, contain, 100px 200px
background-position 背景位置 center, top left, 50% 50%
linear-gradient() 线性渐变 linear-gradient(to right, red, blue)
radial-gradient() 径向渐变 radial-gradient(circle, red, blue)
conic-gradient() 圆锥渐变 conic-gradient(red, yellow, green)

过渡与动画

属性 说明 值
transition 过渡效果简写 all 0.3s ease
transition transition-property 应用过渡的属性 all, transform, opacity
transition transition-duration 过渡时长 0.3s, 300ms
transition transition-timing-function 缓动函数 ease, linear, ease-in-out
animation 动画简写 slideIn 0.5s ease
animation animation-name 关键帧名称 slideIn
animation animation-duration 动画时长 1s, 0.5s
animation animation-iteration-count 播放次数 1, 2, infinite

transform 变换

函数 说明 示例
translate(x, y) 位移 translate(100px, 50px)
rotate(angle) 旋转 rotate(45deg)
scale(x, y) 缩放 scale(1.5), scale(1, 2)
skew(x, y) 倾斜 skew(10deg, 20deg)
matrix(a, b, c, d, e, f) 矩阵变换 matrix(1, 0, 0, 1, 30, 30)
transform-origin 变换原点 center, 50% 50%

CSS 变量与最新特性

特性 说明 示例
CSS变量 自定义属性，--变量名定义 --primary-color: #2563eb;
var()函数 使用CSS变量 color: var(--primary-color)
@property 注册自定义属性类型 @property --size { type: length; }
@container 容器查询 @container (min-width: 400px)
:has() 父选择器 .card:has(.highlight)
nesting 原生CSS嵌套 .parent { .child { } }

JavaScript - 基础到精通

JavaScript是Web的核心编程语言，从基础语法到最新ES特性，构建完整的JS知识体系。

基础语法 对象与函数 DOM操作 异步编程 ES6+特性

基础 基础语法

主题 说明 相关关键字
变量声明 var函数作用域(已不推荐)、let块级作用域、const常量声明，变量提升现象。 var let const
数据类型 原始类型(Undefined/Null/Boolean/Number/String/Symbol/BigInt)、引用类型(对象/数组/函数)。 typeof 原始类型 引用类型
运算符 算术运算符、比较运算符、逻辑运算符、赋值运算符、条件运算符、三点运算符解构。 + - * / == === && || ! ...
流程控制 if-else条件判断、switch-case多分支、for/while/do-while循环、break/continue控制。 if switch for while
严格模式 "use strict"启用严格模式，禁止不推荐语法、更早捕获错误、更好的性能优化。 use strict

JavaScript - 对象与函数

对象和函数是JavaScript的核心概念，理解它们的机制对于掌握JS至关重要。

基础 对象

主题 说明 相关关键字
对象创建 对象字面量{}、new Object()、构造函数、Object.create()原型创建，ES6类语法糖。 对象字面量 构造函数
属性访问 点号访问obj.prop、方括号访问obj["prop"]、属性遍历for...in、Object.keys/values/entries。 点号访问 方括号访问 for...in
对象方法 this指向当前对象、对象方法定义、getter/setter访问器、super关键字调用父类。 this getter setter
Symbol 类型 Symbol()创建唯一值、Symbol作为对象属性键、Symbol.for注册表、Symbol迭代器。 Symbol unique symbol

基础 函数

主题 说明 相关关键字
函数定义 函数声明function name(){}、函数表达式const fn = function(){}、箭头函数const fn = () => {}。 函数声明 函数表达式 箭头函数
函数参数 默认参数、剩余参数...args、可选参数、参数解构、arguments对象(非箭头函数)。 默认参数 剩余参数 ...args
this 指向 普通函数this指向调用者、箭头函数this继承外层作用域、call/apply/bind改变this。 this call apply bind
闭包 函数访问外部变量形成闭包，闭包记忆状态、私有变量实现、模块模式应用。 闭包 作用域链

进阶 原型与继承

主题 说明 相关关键字
原型链 每个对象都有原型、原型查找机制、prototype原型对象、__proto__原型指针、Object.getPrototypeOf。 原型链 prototype __proto__
原型继承 原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承。 原型继承 构造函数继承
ES6 Class class类定义、constructor构造函数、extends继承、super调用父类、static静态方法。 class extends super static
私有属性 #field私有字段、#method私有方法、私有属性只能在类内部访问、外部不可见不可改。 私有字段 #field

JavaScript - DOM 操作

DOM是JavaScript操作HTML的接口，掌握DOM操作是前端开发的基础技能。

基础 DOM 查询

主题 说明 相关方法
选择器查询 document.querySelector()返回单个元素、document.querySelectorAll()返回NodeList集合。 querySelector querySelectorAll
传统方法 getElementById()、getElementsByClassName()、getElementsByTagName()、getElementsByName()。 getElementById getElementsByClassName
元素关系 parentNode/parentElement父元素、children子元素、firstChild/lastChild首尾子节点。 parentNode children firstChild
兄弟元素 nextSibling/previousSibling兄弟节点、nextElementSibling/previousElementSibling兄弟元素。 nextSibling previousSibling

基础 DOM 操作

主题 说明 相关方法
创建元素 document.createElement()创建新元素、document.createTextNode()创建文本节点。 createElement createTextNode
添加删除 appendChild()末尾添加、insertBefore()指定位置插入、remove()删除自身、removeChild()删除子元素。 appendChild removeChild insertBefore
修改元素 innerHTML/innerText/textContent修改内容、className/classList操作类名、style操作行内样式。 innerHTML classList style
属性操作 getAttribute()获取属性、setAttribute()设置属性、removeAttribute()删除属性、dataset数据属性。 getAttribute dataset

进阶 事件处理

主题 说明 相关关键字
事件绑定 onclick等HTML属性绑定(不推荐)、addEventListener()事件监听、removeEventListener()移除监听。 addEventListener removeEventListener
事件对象 event事件对象、target事件目标、currentTarget当前目标、type事件类型、preventDefault()阻止默认。 event target preventDefault
事件传播 捕获阶段capture、目标阶段target、冒泡阶段bubble、stopPropagation()停止传播。 捕获 冒泡 stopPropagation
事件委托 将事件绑定到父元素、利用事件冒泡处理子元素事件、减少事件绑定数量提高性能。 事件委托 事件冒泡

JavaScript - 异步编程

异步编程是JavaScript的重要特性，从回调函数到Promise再到async/await，异步处理能力不断进化。

基础 回调与定时器

主题 说明 相关关键字
回调函数 将函数作为参数传递给另一个函数，在特定时机执行，是最基础的异步模式，但存在回调地狱问题。 callback 回调地狱
定时器 setTimeout()延迟执行、setInterval()周期执行、clearTimeout()/clearInterval()清除定时器。 setTimeout setInterval clearTimeout
防抖节流 防抖debounce限制函数执行频率、节流throttle固定时间间隔执行，用于优化性能。 debounce throttle

进阶 Promise

主题 说明 相关关键字
Promise 基础 Promise三种状态pending/fulfilled/rejected、new Promise()创建、then/catch/finally链式调用。 Promise pending fulfilled rejected
静态方法 Promise.resolve()/reject()创建已决议Promise、Promise.all()全部完成、Promise.race()竞速完成。 Promise.all Promise.race Promise.allSettled
Promise 进阶 Promise.allSettled等待所有完成、Promise.any任意一个完成、Promise finally无论结果如何执行。 allSettled any finally

进阶 async/await

主题 说明 相关关键字
async 函数 async声明异步函数、函数自动返回Promise、函数内可使用await等待Promise。 async await
await 等待 await暂停函数执行等待Promise resolve、捕获rejected用try-catch、错误处理更直观。 await try-catch
并发控制 Promise.all()并发等待多个Promise、for循环配合await顺序执行、Promise.race超时控制。 并发控制 Promise.all

进阶 Event Loop

主题 说明 相关关键字
执行机制 JS单线程、调用栈执行代码、同步代码直接在调用栈执行、异步代码放入任务队列。 调用栈 执行栈
宏任务与微任务 宏任务macro-task：setTimeout/setInterval/I/O/UI渲染；微任务micro-task：Promise.then/MutationObserver。 宏任务 微任务
执行顺序 每轮事件循环：先执行完所有微任务、再执行一个宏任务、然后渲染UI、更新界面。 执行顺序 事件循环

JavaScript - ES6+ 核心特性

ES6(ES2015)及后续版本引入了大量新语法，极大提升了JavaScript的开发体验和表达能力。

核心语法特性

特性 说明 相关关键字
let/const 块级作用域 块级作用域声明、TDZ暂时性死区、const常量不可重新赋值、推荐默认使用const。 let const 块级作用域
箭头函数 () => {}简写语法、this词法绑定(不创建自己的this)、不能作为构造函数使用。 箭头函数 this绑定
模板字符串 `string ${variable}`插值表达式、多行字符串支持、标签模板函数Tag Function。 模板字符串 插值
解构赋值 数组解构[a, b] = arr、对象解构{key} = obj、默认值、剩余模式、参数解构。 数组解构 对象解构 默认值
扩展运算符 ...arr展开数组、...obj展开对象、rest收集剩余参数、浅拷贝应用。 扩展运算符 rest参数
Symbol 类型 Symbol()创建唯一值、Symbol作为对象属性键避免命名冲突、Symbol.for全局注册表。 Symbol 唯一值

数据结构与迭代

特性 说明 相关关键字
Set/Map 数据结构 Set集合(值唯一)、Map映射(键可为任意类型)、WeakSet/WeakMap弱引用不阻止GC。 Set Map WeakMap
迭代器 Iterator Symbol.iterator部署迭代器、for...of遍历迭代对象、可迭代协议、next()方法返回value/done。 Iterator for...of
生成器 Generator function*定义、yield暂停执行、next()继续执行、异步流程控制应用。 Generator yield

面向对象与模块

特性 说明 相关关键字
Promise 对象 异步操作最终结果容器、三种状态、then/catch/finally链式调用、Promise静态方法。 Promise
Class 类 class语法糖、constructor构造函数、extends继承、super调用父类、static静态成员、私有#字段。 class extends super
模块化 Import/Export export导出(命名导出/默认导出)、import导入、静态分析支持Tree Shaking。 ES Modules import export

JavaScript - 最新特性

近年来的新特性持续增强JavaScript语言能力。

语法增强

特性 说明 相关关键字
顶层 Await ES2022支持在模块顶层直接使用await，无需包装在async函数中，简化异步模块写法。 顶层await top-level await
at() 方法 数组/字符串at(index)支持负索引访问末尾元素，arr.at(-1)获取最后一个元素。 at() 负索引
Object.hasOwn() Object.hasOwn(obj, prop)检查属性是否为自身属性(不含原型链)，更安全的hasOwnProperty。 Object.hasOwn
Error Cause new Error(message, {cause: value})传递错误原因，便于错误追踪和调试。 Error Cause
RegExp v 标志 正则表达式v标志支持集合表示法[abcd]、属性转义\d支持Unicode属性。 RegExp v

集合与异步增强

特性 说明 相关关键字
Array Grouping Object.groupBy()和Map.groupBy()按条件分组数组元素，返回分组后的对象。 groupBy
Promise withResolvers Promise.withResolvers()同时获取promise、resolve、reject三个函数，便于Promise状态控制。 withResolvers
Iterator Helper 迭代器辅助方法：take()截取、drop()跳过、toArray()转数组、flatMap()扁平映射。 Iterator Helper

TypeScript - 基础类型

TypeScript是JavaScript的超集，为JS添加静态类型系统，是现代前端开发的必备技能。

基础 基础类型

类型 说明 关键字
原始类型 string字符串、number数字(包含bigint)、boolean布尔、undefined未定义、null空值、symbol唯一值。 string number boolean undefined null symbol
数组类型 number[]数字数组、Array泛型数组写法、只读数组ReadonlyArray。 number[] Array ReadonlyArray
元组类型 [string, number]固定长度和类型的数组、可选元素[string, number?]、剩余元素[string, ...number[]]。 Tuple 可选元素
枚举类型 enum枚举命名常量集、数字枚举、字符串枚举、常量枚举const enum、枚举反向映射。 enum 数字枚举 字符串枚举
any/unknown/never any任意类型关闭检查、unknown类型安全的any、never永不返回、void无返回值。 any unknown never void

基础 接口与类型别名

主题 说明 关键字
接口定义 interface定义对象结构、属性类型、可选属性?、只读属性readonly、索引签名[Key: Type]: Value。 interface 可选属性 readonly 索引签名
类型别名 type定义类型别名、可定义任何类型、对象类型、联合类型、交叉类型、元组等。 type 类型别名
接口继承 interface A extends B继承父接口成员、多接口继承A extends B, C、继承与交叉类型对比。 extends 多继承
交叉类型 type C = A & B合并多个类型、所有成员并集、类型冲突时合并规则。 交叉类型 &

进阶 函数类型

主题 说明 关键字
函数类型签名 (param: Type) => ReturnType函数类型、完整函数声明包含参数和返回值类型。 函数类型 => ReturnType
可选参数与默认参数 可选参数param?: Type带问号、默认参数param: Type = value、严格模式下可选参数不可省略。 可选参数 默认参数
重载签名 函数重载multiple signatures、最后实现签名、编译器根据参数类型选择对应签名。 函数重载 Overload
this 类型 显式this参数、箭头函数this绑定、类方法中的this类型、工具函数this处理。 this参数

TypeScript - 进阶类型

掌握TypeScript的高级类型特性，实现更精确的类型控制和更复杂的类型逻辑。

进阶 联合类型与类型守卫

主题 说明 关键字
联合类型 A | B联合类型表示A或B或两者兼备、使用|分隔多个类型、宽类型向窄类型流转。 联合类型 |
类型守卫 typeof类型守卫、instanceof实例判断、in属性存在检查、自定义类型守卫函数。 typeof instanceof in 类型守卫
类型断言 as Type断言转换、<>尖括号断言、non-null非空断言!、类型守卫自动窄化类型。 as ! 非空断言
类型谓词 is parameter is Type自定义类型守卫、返回boolean同时告诉编译器窄化类型。 is 类型谓词

进阶 特殊类型特性

主题 说明 关键字
类型推断 TS自动推断变量类型、上下文推断、infer类型推断用于条件类型提取类型信息。 类型推断 infer
Literal Types "hello"字符串字面量类型、100数字字面量类型、联合字面量类型、类型收窄。 字面量类型 Literal
类型收窄 Narrowing if/else/switch/typeof/instanceof等条件中类型自动收窄、never类型可达性分析。 类型收窄 narrowing
unique symbol const sym: unique symbol = Symbol()创建唯一类型符号、用于常量作为类型键。 unique symbol

TypeScript - 泛型编程

泛型是TypeScript最强大的类型工具之一，实现类型参数化和代码复用。

进阶 泛型基础

主题 说明 关键字
泛型函数 泛型参数、函数中使用T作为类型、调用时自动推断或显式指定。 泛型
泛型约束 约束T必须是Type的子类型、extends关键字、约束边界可使用多种类型。 extends 泛型约束
多泛型参数 多个泛型参数、分别约束不同类型、Key-Value模式的类型安全。 多泛型
泛型类 class MyClass { prop: T }类声明泛型、实例化时指定T的类型。 泛型类

进阶 泛型应用

主题 说明 关键字
泛型接口 interface Response { data: T }泛型接口、数据类型声明分离、API响应类型复用。 泛型接口
泛型类型别名 type Container = { value: T }泛型类型别名、可包含多种类型组合。 泛型类型别名
工厂函数泛型 function factory(constructor: new () => T): T() => { ... }泛型构造函数类型。 new () => T
泛型参数默认类型 泛型参数默认值、简化调用、无需显式指定类型时的默认类型。 默认泛型 = Type

TypeScript - 工具类型

TypeScript内置了大量工具类型，用于常见类型转换和操作。

进阶 基础工具类型

工具类型 说明 关键字
Partial/Required/Readonly Partial所有属性可选、Required所有属性必填、Readonly所有属性只读。 Partial Required Readonly
Pick/Omit Pick从T中选取K属性、Omit从T中排除K属性、实现类型裁剪。 Pick Omit
Record Record构造键K类型、值V类型的对象类型、{ [P in K]: V }映射类型语法糖。 Record
Exclude/Extract Exclude从T中排除可分配给U的类型、Extract从T中提取可分配给U的类型。 Exclude Extract

进阶 函数与推断工具

工具类型 说明 关键字
ReturnType/Parameters ReturnType获取函数返回值类型、Parameters获取函数参数类型元组。 ReturnType Parameters
ConstructorParameters ConstructorParameters获取构造函数参数类型元组、用于工厂函数和依赖注入。 ConstructorParameters
NonNullable NonNullable从T中排除null和undefined、类型断言时常用、联合类型窄化。 NonNullable

进阶 高级工具类型

工具类型 说明 关键字
条件类型 T extends U ? X : Y条件判断类型、分布式条件类型、联合类型分发规则。 条件类型 extends ? :
infer 类型推断 infer T在条件类型中推断类型、提取数组元素类型、函数参数/返回值类型推断。 infer 类型推断
模板字面量类型 `${T}`模板字面量类型、字符串类型拼接、类型模式匹配、事件名类型生成。 模板字面量
映射类型修饰符 readonly/?映射修饰符、加减修饰符+ readonly/- readonly、控制属性可选和只读。 映射类型 + -
Key Remapping as子句重映射键名、{ [K in keyof T as NewKey]: ... }新键名生成复杂类型。 as Key Remapping
never 类型应用 never穷尽检查、联合类型中的never被排除、类型安全边界、无限递归类型终止。 never

TypeScript - 最新特性

TypeScript持续演进，以下是近年来的新特性和最佳实践。

类型系统增强

特性 说明 关键字
infer 增强 TS 5.0+ infer支持默认值、infer分布式的尾递归优化、复杂类型推断性能提升。 infer 默认值
const 类型参数 const T类型参数推导为字面量类型而非宽类型、对象属性自动readonly。 const T
@deprecate 注解 @deprecated注解标记废弃API、IDE显示废弃提示、编译警告信息。 @deprecated
类型参数 Variance 注解 out T协变、in T逆变、显式声明泛型类型的协变逆变行为，更精确类型控制。 out in 协变逆变
Template String 模式匹配 模板字面量类型模式匹配能力增强、正则表达式风格的类型匹配。 Template Pattern
Using 声明 using声明资源管理、自动调用Symbol.dispose释放资源、类似C# using语法。 using

框架生态

现代前端框架提高开发效率，React和Vue是两大主流，Next.js和Nuxt是全栈元框架。

85% 新项目使用元框架
65% 企业代码AI辅助
40% 代码驳回率下降

主流框架

框架/库 核心特性 关键技术
React 组件化开发、JSX语法、Props属性、State状态、Hooks(useState/useEffect/useContext等) React JSX Hooks
Next.js 15+ App Router路由系统、Server Components服务器组件、Server Actions服务端动作、SSR/SSG混合渲染 App Router Server Components
Vue 3 Composition API、Setup语法糖、响应式系统ref/reactive、Pinia状态管理、Vue Router Vue 3 Composition API
Nuxt 4 混合渲染模式、Vapor Mode性能优化、文件目录约定、自动化路由和API生成 Nuxt Vapor Mode
TanStack Query React Query数据获取、缓存管理、自动重新获取、乐观更新、服务器状态管理标准 React Query TanStack Query

Vue 3 核心概念

概念 说明 示例
Composition API 基于函数的组织方式，逻辑复用更灵活，类型推断更优 setup() ref reactive
Setup 语法糖 script setup语法糖，更简洁的组件编写方式，自动返回响应式数据 <script setup>
响应式系统 ref处理基本类型，reactive处理对象，computed计算属性，watch/watchEffect监听 ref() reactive() computed()
生命周期 Composition API生命周期钩子：onMounted/onUpdated/onUnmounted等 onMounted onUnmounted
模板语法 双花括号插值、v-if/v-show条件渲染、v-for列表渲染、v-bind绑定 {{ msg }} v-for v-bind
组件通信 props/emit父子通信、provide/inject跨层级、Pinia状态管理、mitt事件总线 props emit provide
Vue Router 4 声明式路由、嵌套路由、路由守卫、动态路由、编程式导航 createRouter useRoute useRouter
Pinia 状态管理 Vue官方推荐状态管理，替代Vuex，TypeScript支持，组合式API风格 defineStore storeToRefs

Nuxt 元框架

特性 说明 关键配置
目录结构 pages目录自动生成路由、components自动导入、composables组合式函数 pages/ components/ composables/
渲染模式 SSR服务端渲染、CSR客户端渲染、SSG静态生成、ISR增量静态再生 ssr: true prerender
数据获取 useFetch统一数据获取、useAsyncData异步数据、useLazy延迟加载 useFetch useAsyncData
Server API server/目录创建API端点，自动注册H3处理器，支持Nitro引擎 server/api/ server/routes/
模块系统 官方模块生态：@nuxt/image、@nuxtjs/tailwindcss、@pinia/nuxt等 modules nuxt.config.ts
混合渲染 页面级渲染模式控制、route rules规则配置、缓存策略 routeRules swr isr
Vapor Mode 基于Nitro引擎的性能优化模式，更快的构建和运行时性能 experimental.vapor
部署目标 支持Vercel、Netlify、Docker、Kubernetes、Node.js服务器等多种部署 nitro preset

Vue 3 性能优化

优化项 说明 实践方法
按需加载 路由懒加载、组件异步加载、动态import减少首包体积 defineAsyncComponent lazy
v-memo 缓存 模板虚拟DOM节点缓存，跳过无需更新的子树的Diff v-memo
PatchFlag 模板编译优化标记，精确识别动态节点类型 编译优化
Tree Shaking 模块化设计，未使用的API在构建时自动剔除 ES Module
响应式优化 shallowRef避免深层响应式、triggerRef强制更新、toRaw脱离响应式 shallowRef toRaw

Node.js 常用命令

Node.js是前端开发的基础运行环境，掌握常用命令提升开发效率。

包管理命令

命令 说明 示例
npm init 初始化package.json，可加-y快速初始化 npm init -y npm init --yes
npm install 安装所有依赖，可加--save/-S或--save-dev/-D npm i npm i vue
npm uninstall 卸载包，移除package.json中的依赖 npm un vue npm remove lodash
npm update 更新依赖到指定范围，通常更新patch版本 npm update npm update vue@latest
npm run 运行package.json中定义的脚本 npm run dev npm run build
pnpm add pnpm包管理，比npm快且节省磁盘空间 pnpm add vue pnpm i
yarn add yarn包管理，Facebook出品，依赖锁定 yarn add vue yarn install
npx 运行npm包命令，无需全局安装 npx create-vue npx vite

Node.js 运行时命令

命令 说明 使用场景
node script.js 运行JavaScript文件，执行Node.js脚本 脚本执行 CLI工具
node --watch 监听文件变化自动重启（Node.js 18+） 开发调试
node -e "code" 直接执行代码字符串 快速测试 单行命令
node --eval "code" 等同于-e，评估代码字符串 快速测试
node -v 查看Node.js版本 版本检查
node --inspect 启动调试模式，配合Chrome DevTools调试 远程调试
node --loader 自定义模块加载器，支持ESM等 ESM支持
nvm use 使用指定Node.js版本，需安装nvm 版本切换

npm scripts 常用脚本

脚本 说明 常用工具
dev 启动开发服务器，热更新开发 webpack vitest parcel
build 生产环境构建，打包优化 webpack rollup esbuild
preview 预览生产构建结果 本地预览
test 运行测试用例 vitest jest mocha
lint 代码规范检查 eslint stylelint
format 代码格式化 prettier
prepare 安装后自动执行的脚本，用于husky等 husky lint-staged

核心模块 API

模块 说明 常用方法
fs 文件系统操作，读写文件、目录操作 readFile writeFile mkdir
path 路径处理，路径拼接、解析、格式化 join resolve basename
http HTTP服务器和客户端，API接口开发 createServer request
url URL解析和格式化 parse format URL
querystring 查询字符串解析和序列化 stringify parse
crypto 加密解密，Hash、HMAC、AES、RSA等 createHash createCipher
child_process 子进程管理，执行系统命令 exec spawn execSync
stream 流处理，大文件读写、管道传输 createReadStream createWriteStream

Deno 常用命令

Deno是Node.js的作者Ryan Dahl重新设计的新一代JavaScript运行时，更安全、更现代。

基础命令

命令 说明 示例
deno run 运行JavaScript/TypeScript文件 deno run app.ts deno run -A app.ts
deno cache 预下载依赖并缓存到本地 deno cache deps.ts
deno install 将脚本安装为系统命令，创建可执行链接 deno install -n fmt deno fmt
deno info 显示模块和依赖信息 deno info https://deno.land/std@0.224.0/http/server.ts
deno eval 直接执行代码字符串 deno eval "console.log('hello')"
deno version 显示Deno版本信息 deno --version
deno help 显示命令帮助信息 deno run --help

权限与运行选项

权限 说明 缩写
--allow-all 允许所有权限，等同于-A -A
--allow-read 允许读取文件系统，可指定路径 --allow-read=/tmp
--allow-write 允许写入文件系统 --allow-write=/data
--allow-net 允许网络请求，可指定域名白名单 --allow-net=api.example.com
--allow-env 允许访问环境变量 --allow-env
--allow-run 允许运行子进程 --allow-run
--allow-ffi 允许加载外部动态链接库 --allow-ffi
--no-check 跳过TypeScript类型检查，加快运行速度 --no-check

Deno 核心特性

特性 说明 对比Node.js
原生TypeScript 内置TypeScript支持，无需配置编译步骤 无需tsc
ESM模块 原生ES Modules支持，使用URL导入模块 无需CommonJS
沙盒安全 默认拒绝所有权限，需显式授权运行 更安全
标准库 官方维护的标准库std，质量保证 stdlib.deno.land
单可执行文件 deno编译为单个二进制文件，部署简单 无node_modules
内置工具 格式化deno fmt、测试deno test、文档deno doc 无需配置ESLint
浏览器兼容 支持大多数Web API，Fetch、WebSocket等 API一致
依赖管理 使用URL直接导入，deno.json锁定依赖 无package.json

常用标准库模块

模块 说明 导入路径
http 服务器 快速搭建HTTP服务，基于std/http std/http/server.ts
fs 文件系统 文件系统操作，异步API std/fs/mod.ts
path 路径 跨平台路径处理 std/path/mod.ts
datetime 日期 日期时间格式化 std/datetime/mod.ts
encoding 编码 CSV、JSON、YAML等编码处理 std/encoding/csv.ts
flags 参数 命令行参数解析 std/flags/mod.ts
fmt 格式化 控制台日志美化输出 std/fmt/colors.ts
collections 集合 数组、对象工具函数 std/collections/mod.ts

部署与打包

命令 说明 使用场景
deno compile 将脚本编译为独立可执行文件 跨平台部署
deno bundle 打包为单个JS文件 生产构建
deno task 运行deno.json中定义的任务 自定义脚本
deno init 初始化deno项目，创建配置文件 新项目
deno vendor 将远程依赖 vendoring到本地 离线构建
deno upgrade 升级Deno到最新版本 版本更新

运行时与Server Components

Server Components改变前后端边界，无服务器架构成为主流开发模式。

Server Components 技术

技术 说明 关键字
Server Components React Server Components服务器组件、数据库直连、无网络开销、零客户端JavaScript bundle Server Components RSC
Server Actions "use server"声明服务端函数、渐进增强、表单处理简化、类型安全调用 Server Actions "use server"
Streaming SSR 结合Suspense流式渲染、首屏快速响应、复杂组件异步加载、用户体验优化 Streaming Suspense
Partial Prerendering React新渲染模式、静态壳+动态流结合、最佳首屏+最佳交互性能 PPR

前端架构演进

阶段 特点 技术模式
传统前后端分离 Client → API → Server → Database，JSON传输，状态管理复杂 REST API JSON
SSR/SSG 时代 服务端渲染或静态生成，首屏快但交互受限 SSR SSG
Server Components 时代 前后端代码统一仓库，按组件选择渲染策略 RSC 混合渲染

开发工具链

现代前端开发依赖完善的工具链，从构建到测试到部署。

构建与开发工具

类别 说明 工具/技术
构建工具 Turbopack(Turbo引擎)、Rsbuild(Rspack)、Vite(开发服务器)、Lightning CSS极速样式处理 Turbopack Rsbuild Vite
测试工具 Vitest(Vitest单元测试)、Playwright(E2E测试)、React Testing Library组件测试 Vitest Playwright
代码质量 ESLint 9.x、Prettier 4.x、Biome(统一lint+format)、Stylelint样式检查 ESLint Prettier Biome
AI 编程工具 Cursor IDE(v0 AI UI生成)、GitHub Copilot、Claude Code智能体编程 Cursor v0 Copilot

架构模式与最佳实践

良好的架构设计提升代码质量和团队协作效率。

现代架构模式

模式 说明 关键技术
Monorepo 架构 Turborepo/Nx统一管理多包、代码共享、构建缓存、依赖分析、发布流程统一 Turborepo Nx
微前端 Module Federation共享模块、Single-SPA应用聚合、iframe隔离、容器化部署 Module Federation Micro-frontend
状态管理 TanStack Query(服务器状态)、Zustand(客户端状态)、Redux Toolkit(RTK)、Jotai原子化状态 TanStack Query Zustand Redux
CSS 架构 CSS Modules局部作用域、Tailwind原子化CSS、CSS Variables设计令牌、组件库样式隔离 CSS Modules Tailwind

前端日常工作必备工具及工作流程

掌握日常开发工具和标准工作流程，提升开发效率与团队协作能力。

开发环境与编辑器

工具类型 说明 常用工具
代码编辑器 VS Code是主流选择，支持丰富插件生态，WebStorm功能全面 VS Code WebStorm Neovim
VS Code 必备插件 ESLint/Prettier代码格式化、GitLens版本管理、Live Server本地预览 ESLint Prettier GitLens
浏览器开发工具 Chrome DevTools元素审查、网络请求分析、性能监控、JavaScript调试 Chrome Firefox Edge
终端工具 iTerm2(macOS)、Windows Terminal、Windows PowerShell iTerm2 Windows Terminal
包管理工具 npm/npx包管理、yarn/pnpm高性能替代、pnpm节省磁盘空间 npm pnpm yarn

版本控制与协作

工具/实践 说明 关键命令/功能
Git 版本控制 分布式版本管理系统，代码历史追踪、分支管理、协作开发 git clone git branch git merge
Git 工作流 Git Flow分支策略、GitHub Flow简单流程、Trunk Based Development主干开发 feature/ develop/ release/
代码托管平台 GitHub最大开源社区、GitLab自托管、Bitbucket私有仓库 GitHub GitLab Bitbucket
Pull Request 代码评审流程、自动化检查、团队协作审核、CI/CD触发 PR Code Review CI
代码评审规范 提交信息规范、代码风格检查、测试覆盖要求、文档更新 Conventional Commits lint test

开发工作流程

阶段 说明 工具/产出
需求分析 理解产品需求、技术评估、任务拆解、工时评估 Jira Notion 飞书
技术设计 API设计评审、数据库设计、组件设计、技术方案文档 Swagger Draw.io Figma
本地开发 代码编写、热更新调试、单元测试、本地环境搭建 Vite Hot Reload Vitest
代码提交 代码评审、Git提交规范、自动化检查、关联需求 ESLint husky commitlint
持续集成 自动化构建、测试执行、代码质量检查、制品生成 GitHub Actions GitLab CI Jenkins
测试验收 功能测试、集成测试、UI测试、回归测试、QA验收 Playwright Cypress Jest
部署上线 环境部署、配置管理、灰度发布、回滚策略、监控告警 Vercel Docker K8s

文档与协作工具

工具类型 说明 常用工具
文档管理 技术文档编写、API文档维护、知识库建设、团队wiki Notion 语雀 Confluence
API 文档 接口文档编写、交互式文档、Mock数据、版本管理 Swagger Apifox Postman
原型设计 UI/UX设计、交互原型、设计稿标注、组件库共享 Figma Sketch Axure
项目管理 任务跟踪、进度管理、敏捷看板、燃尽图、迭代规划 Jira Trello 飞书
即时通讯 团队沟通、代码分享、快捷回复、频道管理 Slack Discord 钉钉

性能监控与问题排查

工具类型 说明 常用工具
性能分析 页面加载性能、资源大小分析、渲染性能优化建议 Lighthouse PageSpeed Chrome DevTools
错误监控 JavaScript错误上报、Promise异常捕获、用户行为追踪 Sentry Bugsnag Front
行为分析 用户访问路径、页面停留时间、点击热图、转化漏斗 Google Analytics Mixpanel 神策
接口监控 API可用性检测、响应时间监控、错误率告警、接口Mock Apifox Postman Mock.js
真机调试 移动端调试、真机预览、跨平台测试、远程调试 Eruda VConsole Chrome Remote

效率提升技巧

技巧 说明 工具/快捷键
编辑器快捷键 多光标编辑、行移动、命令面板、快速搜索、文件跳转 Ctrl+Shift+L Ctrl+P F1
Git 效率操作 交互式暂存、commit修改、cherry-pick、stash暂存 git add -i git commit --amend
代码片段 常用代码模板、自定义snippet、团队共享片段 VS Code Snippets GitHub Copilot
Alfred/Spotlight 快速启动应用、计算器、剪贴板历史、 workflows Alfred Spotlight
窗口管理 分屏显示、快速切换、窗口排列、虚拟桌面 Rectangle Moom Windows Snap

AI 对前端工作的影响

人工智能正在深刻改变前端开发方式，从代码生成到智能调试，AI已成为现代开发者的必备工具。

65% 代码AI辅助率
40% 开发效率提升
55% 重复工作减少

AI 代码生成工具

工具 说明 主要功能
GitHub Copilot 微软与OpenAI合作的AI编程助手，支持多种语言和IDE，实时代码补全和建议 代码补全 函数生成 注释转代码
Cursor 专为AI编程设计的编辑器，集成Claude等大模型，支持自然语言交互和UI生成 v0 UI生成 智能重构 上下文理解
Claude Code Anthropic推出的AI编程智能体，能理解复杂需求并自主编写代码 智能体编程 代码审查 自动化任务
Tabnine AI代码补全工具，支持本地部署保护代码隐私，个性化学习团队代码风格 隐私保护 个性化训练 多语言支持
CodeWhisperer 亚马逊推出的AI编程助手，与AWS服务深度集成，安全扫描和许可证追踪 AWS集成 安全扫描 许可证检查

AI 在前端开发中的应用场景

场景 说明 AI 工具
UI/UX 设计生成 通过自然语言或草图生成完整UI设计稿，支持多种风格一键切换 v0 Galileo Uizard
组件代码生成 根据设计稿或描述自动生成React/Vue组件，包含样式和交互逻辑 Copilot Cursor v0
测试用例生成 自动生成单元测试、集成测试用例，提高代码覆盖率和测试效率 RooCode Copilot TestGen
代码重构与优化 智能识别代码异味，提供重构建议，自动优化性能和可读性 Cursor Claude SonarQube
Bug 定位与修复 分析错误堆栈，定位问题根源，提供修复方案甚至自动修复 Sentry AI Cursor GitHub Copilot
文档自动生成 根据代码自动生成API文档、README、类型说明，保持文档同步 Copilot Mintlify Swimm
代码翻译与迁移 将代码从一种框架/语言迁移到另一种，保持功能和风格一致 Claude GPT-4 Cursor

AI 开发最佳实践

实践 说明 注意事项
提示词工程 编写清晰、具体的提示词，包含上下文、约束条件和期望输出格式 分步描述 提供示例 明确约束
代码审查 AI生成的代码必须经过人工审查，验证逻辑正确性和安全性 单元测试 安全扫描 代码规范
渐进式生成 从简单功能开始，逐步增加复杂度，及时验证每一步的正确性 小步迭代 频繁验证 版本控制
上下文管理 提供足够的项目上下文，包括代码结构、约定和规范，帮助AI生成更准确的代码 代码库索引 文档链接 规范说明
敏感信息保护 避免在提示词中包含敏感信息，使用本地部署或隐私保护工具 脱敏处理 本地模型 API安全

AI 时代前端技能要求

技能 说明 重要性
提示词工程 学会与AI有效沟通，编写高质量提示词引导AI生成准确代码 必备
代码审查能力 快速识别AI生成代码中的问题、漏洞和性能隐患 必备
架构设计能力 AI擅长实现但难以独立完成整体架构设计，需要人类把控全局 必备
调试与排错 理解代码执行流程，快速定位和修复AI生成的错误代码 进阶
技术选型判断 根据项目需求选择合适的AI工具和技术方案，平衡效率和质量 进阶
AI 工具集成 将AI工具集成到开发工作流中，配置个性化设置和自动化脚本 进阶

主流 AI 开发平台

平台 说明 特点
GitHub Copilot 最成熟的AI编程助手，与GitHub生态深度集成 生态完善 IDE支持广 企业版
Cursor (Pointer) 专注AI编程的IDE，集成Claude和GPT-4 UI生成 智能重构 上下文理解
Claude (Anthropic) 擅长复杂推理和长上下文理解，代码质量高 长上下文 安全对齐 代码能力强
ChatGPT (OpenAI) 通用对话AI，支持代码解释、生成和调试 多用途 插件丰富 易上手
CodeLlama (Meta) 开源大语言模型，专门针对代码任务优化 开源免费 本地部署 可微调
DeepSeek 国产开源大模型，代码能力突出，推理成本低 开源免费 中文优化 成本低

未来趋势与建议

趋势 说明 建议
AI First 开发模式 开发流程以AI为中心，人机协作成为常态 拥抱AI工具 提升协作能力
低代码/无代码普及 简单功能可通过AI+低代码平台快速实现 了解低代码平台 聚焦复杂场景
全栈能力增强 AI降低全栈开发门槛，前端更容易扩展到后端 学习全栈思维 了解架构设计
AI Agent 普及 自主完成任务的多智能体系统，可以独立完成开发任务 关注Agent框架 学习任务编排
持续学习能力 技术更新快，需要持续学习新工具和最佳实践 保持好奇心 建立学习习惯

前端必备第三方库

掌握日常开发中常用的第三方库，提升开发效率和代码质量。

UI 组件库

组件库 说明 特点
Ant Design 企业级UI设计语言和组件库，React生态最流行的组件库之一 企业级 TypeScript 设计规范
Material-UI (MUI) Google Material Design规范的React实现，全球使用最广泛 Material 主题定制 响应式
Element Plus Vue 3版本Element UI，饿了么出品的中文组件库 Vue 3 中文文档 表格强大
Radix UI 无样式、可访问的React组件原语，适合构建自定义设计系统 无样式 可访问性 Composable
Shadcn/ui 基于Radix UI的现代UI组件，代码直接复制到项目，支持深度定制 代码复制 Tailwind 现代设计
Headless UI Tailwind CSS团队开发的无样式可访问组件，完全可定制 Tailwind 无样式 React/Vue

状态管理

库 说明 特点
Zustand 轻量级状态管理库，API简洁，性能优秀，React社区新宠 轻量 简洁API 无Provider
Jotai 原子化状态管理，每个状态都是独立的原子，支持细粒度更新 原子化 细粒度 TypeScript
Redux Toolkit Redux官方推荐的工具集，简化Redux使用，TypeScript原生支持 RTK 中间件 调试工具
TanStack Query 服务端状态管理标准，自动缓存、重新获取、乐观更新 缓存 服务端状态 React Query
Recoil Facebook实验性状态管理库，原子化设计，与React并发特性兼容 原子化 React并发 派生状态

数据请求与处理

库 说明 特点
Axios 基于Promise的HTTP客户端，支持浏览器和Node.js，请求拦截统一处理 Promise 拦截器 取消请求
Fetch API 浏览器原生API，现代替代XMLHttpRequest，简洁易用 原生 Promise 流式响应
SWR Stale-While-Revalidate库，React数据获取和缓存方案 SWR 缓存 乐观更新
Lodash JavaScript实用工具库，提供丰富的数组、对象、函数处理方法 工具集 函数式 性能优化
dayjs 轻量级日期处理库，API兼容Moment.js，体积小5KB 轻量 Moment兼容 不可变
date-fns 模块化日期处理库，按需引入，树摇优化，TypeScript支持 模块化 树摇 函数式
qs URL查询字符串解析和序列化，处理复杂嵌套对象 查询字符串 序列化 嵌套对象

动画与特效

库 说明 特点
Framer Motion React最流行的动画库，声明式API，手势动画，布局动画 声明式 手势 布局动画
GSAP 专业级动画引擎，高性能，支持SVG、Canvas，时间线控制 高性能 时间线 多平台
React Spring 基于物理的动画库，弹簧动画，真实感的交互效果 物理 弹簧 交互
Anime.js 轻量级JavaScript动画库，简洁API，SVG动画支持 轻量 SVG 路径动画
Motion One 基于Web Animations API的现代动画库，性能优秀，体积小 WAAPI 性能 轻量

表单处理

库 说明 特点
React Hook Form React高性能表单库，性能优秀，减少重新渲染，支持验证 高性能 Hooks Zod验证
Formik React表单构建库，状态管理简单，上手容易，社区成熟 简单 社区 验证
Zod TypeScript优先的Schema验证库，类型安全，错误信息清晰 TypeScript Schema 类型推导
Yup 对象Schema验证库，常与Formik配合使用，链式API Schema 链式 异步验证
React Select 强大的下拉选择组件，支持搜索、多选、异步加载 多选 异步 可定制

图表与可视化

库 说明 特点
ECharts 百度开源图表库，图表类型丰富，交互强大，文档完善 图表丰富 交互 大数据
AntV G2 蚂蚁金服可视化引擎，声明式API，支持复杂图表 声明式 语法糖 可视化
Chart.js 简单灵活的HTML5图表库，快速上手，响应式支持 简单 响应式 轻量
Recharts React原生图表库，基于D3，完全组件化 React D3 组件化
D3.js 数据可视化底层库，强大灵活，学习曲线陡峭 底层 强大 自定义

工具与实用库

库 说明 特点
immer 不可变状态更新库，用Proxy实现，简化不可变逻辑 不可变 Proxy 简洁
clsx 条件类名拼接工具，动态构建className 条件渲染 拼接 轻量
classnames JavaScript条件类名库，功能全面，社区广泛使用 条件类名 多种输入 广泛使用
tokens CSS-in-JS样式管理方案，支持主题变量和设计令牌 样式 主题 变量
uuid 生成符合RFC标准的UUID，支持多种版本 UUID 唯一标识 TypeScript
immer 不可变状态更新库，用Proxy实现，简化不可变逻辑 不可变 Proxy 简洁
valibot 轻量级Schema验证库，体积小，性能好，TypeScript原生 轻量 Schema TypeScript

路由与导航

库 说明 特点
React Router React官方路由库，支持嵌套路由、动态路由、状态保持 官方 嵌套路由 React 18
Vue Router Vue.js官方路由库，声明式路由，配置简单 官方 声明式 Vue 3
wouter 轻量级React路由库，迷你简洁，适合小型项目 轻量 迷你 简单
TanStack Router 类型安全的React路由，完整的TypeScript支持 类型安全 完整TS 现代

CSS-in-JS 与样式

库 说明 特点
styled-components CSS-in-JS先驱，组件级样式，主题支持，动态样式 CSS-in-JS 组件化 主题
Emotion 高性能CSS-in-JS库，灵活API，性能优秀 高性能 灵活 SSR支持
PandaCSS 原子化CSS引擎，编译时生成，构建时优化 原子化 编译时 性能
Linaria 零运行时CSS-in-JS，样式提取为CSS文件 零运行时 提取CSS 性能
Vanilla Extract 类型安全的CSS-in-JS，零运行时，CSS模块替代 类型安全 零运行 CSS模块

国际化与本地化

库 说明 特点
i18next 成熟的国际化框架，功能强大，框架无关 i18n 框架无关 插件生态
react-i18next React绑定i18next，Hooks API，SSR支持 React Hooks SSR
formatjs 消息格式化库，原生Intl API封装，React集成 Intl 格式化 React
lingui 支持编译时提取的国际化库，类型安全 编译时 类型安全 现代

拖拽与排序

库 说明 特点
dnd kit 现代React拖拽库，轻量可访问，支持触摸屏 React 可访问 轻量
react-beautiful-dnd Atlassian出品的拖拽排序库，动画精美，列表排序首选 拖拽排序 动画 列表
react-dnd React拖拽API底层库，高度可定制，学习曲线陡峭 底层 可定制 复杂
SortableJS 原生JavaScript排序库，零依赖，支持多种框架 原生 零依赖 多框架

富文本与编辑器

库 说明 特点
TipTap 基于ProseMirror的headless编辑器，完全可定制，Vue/React支持 Headless ProseMirror 可定制
Slate React可定制富文本编辑器，API灵活，数据模型可自定义 React 数据模型 灵活
Draft.js Facebook出品的React富文本框架，状态驱动 React 状态驱动 插件
Quill 开箱即用的现代WYSIWYG编辑器，主题丰富 WYSIWYG 开箱即用 主题
Monaco Editor VS Code底层编辑器，代码编辑体验，专业级 代码编辑 VS Code 专业

前端学习路线：从入门到精通

系统化的前端学习路径，帮助你从零基础成长为高级前端工程师。

第一阶段：入门基础（1-3个月）

学习内容 说明 学习资源
HTML基础 HTML标签、语义化、表单、SEO基础，掌握页面结构搭建 MDN W3Schools
CSS基础 选择器、盒模型、Flexbox布局、响应式设计基础 CSS-Tricks MDN
JavaScript基础 变量、数据类型、DOM操作、事件处理、基础算法 JavaScript.info MDN
开发工具 Chrome DevTools使用、VS Code配置、Git基础命令 VS Code Git官方文档
实战项目 静态页面、TodoList、简易计算器、天气应用 Codepen CodeSandbox

第二阶段：框架入门（3-6个月）

学习内容 说明 学习资源
Vue.js / React 选择其一深入学习，掌握组件化、状态管理、路由基础 Vue Docs React Docs
TypeScript 基础类型、泛型、接口、类型推断，为大型项目做准备 TS官方教程 TS入门教程
工程化工具 Vite/Webpack配置、ESLint、Prettier、npm/yarn使用 Vite ESLint
CSS框架 Tailwind CSS或Bootstrap快速搭建页面，了解组件库使用 Tailwind Ant Design
实战项目 电商SKU选择器、TodoList升级版、简易博客系统 GitHub Vercel

第三阶段：进阶提升（6-12个月）

学习内容 说明 学习资源
框架深入 原理理解（Virtual DOM、响应式原理）、性能优化、源码阅读 Vue源码 React源码
状态管理 Redux/Zustand原理、TanStack Query服务端状态、状态设计模式 Redux TanStack Query
性能优化 Core Web Vitals、代码分割、懒加载、CDN优化、SSR Lighthouse Web.dev
测试实践 单元测试Jest/Vitest、组件测试React Testing Library、E2E测试 Jest Playwright
实战项目 完整全栈项目、组件库开发、性能优化实战、团队协作项目 GitHub CI/CD

第四阶段：高级精通（1-2年+）

学习内容 说明 提升方向
架构设计 大型项目架构、微前端方案、Monorepo管理、领域驱动设计 架构思维 技术选型
全栈能力 Node.js服务端开发、数据库设计、RESTful/GraphQL API Express Next.js
工程化体系 CI/CD流程、构建优化、代码规范体系、Monorepo架构 GitHub Actions Turborepo
团队协作 Code Review、技术文档、敏捷实践、跨团队沟通 协作工具 流程规范
技术影响力 开源贡献、技术博客、会议分享、社区建设 GitHub 技术博客

推荐学习资源

类型 资源 说明
官方文档 MDN Web Docs 最权威的Web技术文档，入门必读
视频教程 Bilibili、YouTube、Udemy 适合视觉学习者，跟随实战项目
在线课程 FreeCodeCamp、Coursera、掘金小册 系统化学习路径，循序渐进
技术书籍 《JavaScript高级程序设计》《你不知道的JavaScript》 深入理解原理，打好基础
开源项目 GitHub Trending、Awesome Lists 学习优秀代码，参与开源贡献
技术社区 掘金、SegmentFault、Stack Overflow、Reddit 解决问题，分享经验，交流讨论

项目实践建议

项目类型 说明 技能提升
静态页面 企业官网、个人博客、落地页，练习HTML/CSS布局 布局 响应式 SEO
交互应用 TodoList、记账本、天气应用，练习JavaScript逻辑 DOM操作 状态管理 本地存储
电商应用 购物车、商品列表、SKU选择器，复杂业务逻辑 表单处理 状态管理 组件设计
全栈项目 博客系统、社交应用、CRM系统，前后端联调 API设计 用户认证 数据库
开源贡献 参与开源项目、提交PR、修复issue，提升影响力 代码规范 协作 问题定位
造轮子 手写UI组件库、工具库、动画库，深入理解原理 设计模式 TypeScript 测试

职业发展路径

级别 能力要求 工作年限
初级前端 掌握HTML/CSS/JS基础，能完成简单页面开发，修复简单bug 0-1年
中级前端 熟悉主流框架，独立完成功能开发，了解基本性能优化 1-3年
高级前端 深入原理和架构，能解决复杂问题，指导初中级开发者 3-5年
资深前端/架构 技术选型与架构设计，跨团队协调，技术方案评审 5-8年
技术专家/VP 技术战略规划，团队建设，技术影响力，业界知名度 8年+

常见问题与建议

问题 建议 行动
技术太多学不完 先打好基础，再根据项目需求学习，勿盲目追新 打好基础 按需学习
感觉进步慢 做项目+写博客+造轮子，坚持输出，形成正向循环 项目实战 技术输出
看不懂源码 先会用，再深入原理，结合调试器和测试用例阅读 调试阅读 测试驱动
如何准备面试 系统复习基础知识，手撕算法题，准备项目经验阐述 八股文 算法 项目
要不要造轮子 学习阶段建议造轮子理解原理，工作后优先选成熟方案 学习造轮子 工作中选成熟方案

国内前端应用场景

了解前端技术在国内互联网行业的具体应用领域和场景，助你规划职业发展方向。

电商领域

应用场景 核心业务 核心技术栈 必备技能 岗位量
淘宝/天猫 商品展示、直播带货、亿级并发 React TaaS Serverless 性能优化 高并发 Node.js ★★★★★
京东 SKU选择、物流追踪、O2O Vue SSR 微前端 复杂表单 状态管理 ★★★★★
拼多多 拼团裂变、极致性能 React Taro H5 性能优化 小程序 ★★★★☆
唯品会 品牌特卖、限时抢购 Vue SSR 小程序 倒计时 高并发 ★★★☆☆
得物 AR试穿、社区种草、竞拍 React WebGL 小程序 3D渲染 WebGL ★★★☆☆

社交与内容

应用场景 核心业务 核心技术栈 必备技能 岗位量
微信生态 小程序、公众号、企业微信 原生小程序 Taro uni-app 小程序开发 API对接 ★★★★★
抖音/快手 短视频播放、直播弹幕 React Canvas WebGL 视频技术 Canvas ★★★★★
小红书 笔记分享、种草社区 React SSR 小程序 图片处理 瀑布流 ★★★★☆
B站 视频播放器、弹幕系统 React WebSocket flv.js WebSocket 视频流 ★★★★☆
微博 信息流、话题热搜 React SSR H5 列表渲染 性能优化 ★★★★☆

金融科技

应用场景 核心业务 核心技术栈 必备技能 岗位量
支付宝 支付收银、理财基金 React 小程序 Ant Design 安全意识 组件库 ★★★★★
微信支付 收款码、账单管理 小程序 H5 React 支付对接 安全 ★★★★☆
银行APP 账户管理、转账交易 React Native Flutter 移动端 混合开发 ★★★★☆
证券交易 K线行情、实时交易 Canvas WebSocket Vue 图表 实时数据 ★★★☆☆
保险科技 投保理赔、智能核保 React 表单 小程序 复杂表单 OCR ★★★☆☆

出行与本地生活

应用场景 核心业务 核心技术栈 必备技能 岗位量
美团 外卖订单、酒店旅游 React 小程序 H5 LBS 地图 ★★★★★
饿了么 外卖配送、商家后台 Vue 小程序 Element 后台系统 订单 ★★★★☆
滴滴出行 网约车、路线规划 React 地图API WebSocket 地图 实时定位 ★★★★☆
高德/百度地图 路径规划、导航 地图SDK WebGL React 地图API AR导航 ★★★☆☆
携程/去哪儿 机票酒店、攻略游记 Vue SSR 小程序 搜索 日历 ★★★★☆

企业服务与SaaS

应用场景 核心业务 核心技术栈 必备技能 岗位量
钉钉 即时通讯、审批流程 React 小程序 Ant Design 企业级开发 RBAC ★★★★★
飞书 多维表格、知识库 React 富文本 WebSocket 富文本编辑 协同 ★★★★★
企业微信 客户联系、API集成 小程序 H5 React 开放平台 IM ★★★★☆
有赞/微盟 微商城、CRM Vue 小程序 H5 电商 营销 ★★★★☆
北森/薪人薪事 HR SaaS、薪酬绩效 React Vue Ant Design 复杂表单 图表 ★★★☆☆

教育与在线学习

应用场景 核心业务 核心技术栈 必备技能 岗位量
猿辅导/学而思 直播课堂、AI批改 WebRTC Canvas React 实时通信 白板 ★★★★★
作业帮 拍照搜题、题库 Canvas OCR Vue 图像处理 Canvas ★★★★☆
得到/混沌学园 音视频课程、知识社区 React WebSocket 小程序 音频 支付 ★★★☆☆
慕课网 视频课程、实战项目 Vue SSR H5 视频 编辑器 ★★★★☆
VIPKID 1对1直播、预约系统 WebRTC React 小程序 实时通信 日历 ★★★☆☆

游戏与娱乐

应用场景 核心业务 核心技术栈 必备技能 岗位量
小游戏平台 休闲游戏、社交游戏 Cocos LayaAir Three.js 游戏开发 Canvas ★★★★☆
剧本杀/狼人杀 线上桌游、语音社交 Vue WebSocket Canvas WebSocket 实时通信 ★★★☆☆
数字人/虚拟形象 虚拟主播、数字人客服 WebGL Three.js WebXR 3D WebGL ★★★★☆
NFT/数字藏品 数字藏品、区块链 Vue Web3.js 小程序 区块链 钱包对接 ★★☆☆☆

医疗健康与智能硬件

应用场景 核心业务 核心技术栈 必备技能 岗位量
互联网医院 在线问诊、电子处方 React 小程序 WebRTC 医疗 隐私合规 ★★★☆☆
健康监测 运动记录、健康报告 Vue 图表 小程序 数据可视化 图表 ★★★☆☆
AI导诊 症状自查、智能分诊 React NLP 小程序 AI对接 表单 ★★☆☆☆
智能家居 设备控制、场景联动 Vue MQTT 小程序 物联网协议 WebSocket ★★★☆☆
车联网 车载大屏、导航地图 React 地图SDK WebGL 车载 地图 ★★★★☆
工业IoT 设备监控、数据大屏 Vue ECharts WebSocket 大屏 实时数据 ★★★☆☆

岗位薪资与技能要求

公司类型 技术要求 必备技能 薪资范围 竞争度
一线大厂 深入原理、性能优化、架构设计 React/Vue原理 性能 工程化 25K-60K ★★★★★
二线互联网 主流框架熟练、组件设计 框架 TS 工程化 15K-35K ★★★★☆
创业公司 全栈能力、快速迭代 Vue/React Node.js 小程序 12K-30K ★★★☆☆
外企 英语沟通、技术深度 英语 代码规范 国际化 20K-45K ★★★★☆
国企/银行 稳定性、业务理解 Vue 安全 合规 10K-25K ★★☆☆☆
SaaS公司 组件开发、复杂交互 组件设计 TypeScript 测试 15K-35K ★★★★☆

社交与内容

应用场景 说明 技术栈
微信生态 小程序、公众号、H5页面、企业微信应用，接入微信开放能力 原生小程序 Taro uni-app
抖音/快手 短视频播放、直播弹幕、创作者工具、特效滤镜、Canvas渲染 React Canvas WebGL
小红书 笔记分享、种草社区、商品笔记、电商闭环、搜索推荐 React SSR 小程序
B站 视频播放器、弹幕系统、专栏文章、直播互动、创作者中心 React WebSocket flv.js
微博 信息流、话题热搜、粉丝互动、直播、微博小店 React SSR 移动端H5

金融科技

应用场景 说明 技术栈
支付宝 支付收银、理财基金、保险服务、芝麻信用、生活服务 React 小程序 Ant Design
微信支付 收款码、账单管理、红包、企业付款、理财通 小程序 H5 React
银行APP 账户管理、转账汇款、贷款理财、信用卡、网点预约 React Native Flutter
证券交易 K线行情、实时交易、资讯订阅、投顾服务、模拟炒股 Canvas WebSocket Vue
保险科技 保险投保、智能核保、保单管理、理赔服务、健康档案 React 表单 小程序

出行与本地生活

应用场景 说明 技术栈
美团 外卖订单、到店消费、酒店民宿、旅游出行、买菜到家 React 小程序 H5
饿了么 外卖配送、蜂鸟即配、商家后台、会员体系、点餐系统 Vue 小程序 Element
滴滴出行 网约车、代驾、顺风车、青桔单车、社区团购 React 地图API WebSocket
高德/百度地图 路径规划、实时导航、POI搜索、打车聚合、AR导航 地图SDK WebGL React
携程/去哪儿 机票酒店预订、景点门票、攻略游记、签证办理、当地向导 Vue SSR 小程序

企业服务与SaaS

应用场景 说明 技术栈
钉钉 即时通讯、日志周报、审批流程、项目管理、开放平台 React 小程序 Ant Design
飞书 多维表格、文档协作、OKR管理、会议系统、知识库 React 富文本 WebSocket
企业微信 客户联系、会话存档、审批打卡、上下游管理、API集成 小程序 H5 React
有赞/微盟 微商城、小程序商城、CRM系统、营销工具、分销体系 Vue 小程序 H5
北森/薪人薪事 HR SaaS、薪酬管理、绩效评估、招聘管理、e-learning React Vue Ant Design

教育与在线学习

应用场景 说明 技术栈
猿辅导/学而思 直播课堂、AI批改、题库系统、1对1辅导、学习报告 WebRTC Canvas React
作业帮/小猿搜题 拍照搜题、答案解析、错题本、知识点图谱、会员体系 Canvas OCR Vue
得到/混沌学园 音视频课程、专栏订阅、知识城邦、学习打卡、付费会员 React WebSocket 小程序
慕课网/极客时间 视频课程、专栏文章、实战项目、训练营、认证考试 Vue SSR H5
VIPKID/51Talk 1对1外教直播、课程预约、学习报告、绘本馆、家长端 WebRTC React 小程序

游戏与娱乐

应用场景 说明 技术栈
小游戏/小游戏平台 微信小游戏、抖音小游戏、QQ小游戏、Canvas/WebGL渲染 Cocos LayaAir Three.js
互动剧本杀 线上剧本、角色扮演、语音社交、线索收集、线索卡交互 Vue WebSocket Canvas
狼人杀/桌游 实时语音、角色技能、投票机制、房间系统、录像回放 WebRTC React WebSocket
虚拟形象/数字人 虚拟主播、数字人客服、虚拟演唱会、Avatar换装、动捕驱动 WebGL Three.js WebXR
NFT/数字藏品 数字藏品展示、铸造发行、交易流转、盲盒玩法、区块链交互 Vue Web3.js 小程序

医疗健康

应用场景 说明 技术栈
互联网医院 在线问诊、电子处方、药品配送、健康档案、预约挂号 React 小程序 WebRTC
健康监测 运动记录、睡眠监测、心率血氧、健康报告、运动社区 Vue 图表 小程序
AI导诊 症状自查、智能分诊、科室推荐、挂号引导、自然语言处理 React NLP 小程序
医保支付 电子医保、异地就医、费用结算、商保理赔、处方流转 Vue 小程序 表单
慢病管理 用药提醒、指标记录、医生随访、健康方案、社交支持 React WebSocket H5

智能硬件与IoT

应用场景 说明 技术栈
智能家居 设备控制、场景联动、语音助手、离家/回家模式、能耗统计 Vue MQTT 小程序
车联网 车载大屏、导航地图、语音控制、OTA升级、车辆状态 React 地图SDK WebGL
智能手表/手环 表盘设计、健康数据、运动轨迹、消息提醒、支付功能 Canvas SVG React
工业IoT 设备监控、产线看板、数据大屏、告警中心、远程控制 Vue ECharts WebSocket
新零售 自助收银、电子价签、客流统计、智能导购、无人售货 Vue 小程序 Electron

招聘与职业发展

公司类型 技术要求 平均薪资
一线大厂 React/Vue深入原理、性能优化、架构设计、团队协作、英语阅读 25K-60K
二线互联网 主流框架熟练、工程化能力、组件设计、基础扎实 15K-35K
创业公司 全栈能力、快速迭代、抗压能力、技术广度 12K-30K
外企 英语沟通、技术深度、代码规范、国际化经验 20K-45K
国企/银行 稳定性、沟通能力、业务理解、技术合规 10K-25K