一、JavaScript：超越语法，深入核心
| 技能领域 | 具体技能点 | 中级要求与深度理解 |
|---|---|---|
| 语言核心 | 作用域与闭包 | 能解释清楚词法作用域，能使用闭包解决实际问题（如模块模式、数据私有化），能避免常见的内存泄漏问题。 |
| 原型与原型链 | 能图示原型链，理解 new、Object.create、instanceof 的原理，能解释 ES6 Class 本质是语法糖。 |
|
this 指向 |
能准确判断不同场景（全局、函数、方法、构造函数、箭头函数）下 this 的指向，并能手动绑定（call, apply, bind）。 |
|
| 异步编程 | 事件循环 | 必须精通。能清晰解释调用栈、微任务队列、宏任务队列的执行顺序。能准确分析复杂异步代码的输出结果。 |
| Promise | 能手写符合 Promises/A+ 规范的 Promise，能使用 Promise.all、Promise.race、Promise.allSettled 等高级并发模式。 |
|
| async/await | 理解它是 Generator 和 Promise 的语法糖，能使用 try...catch 处理错误，能优化异步代码的串行/并行执行。 |
|
| ES6+ | 模块化 | 理解 ESM 的 import/export 与 CommonJS 的 require/module.exports 的区别（静态 vs 动态，值拷贝 vs 值引用）。 |
| 解构、展开、箭头函数 | 熟练运用，并理解箭头函数没有 this 和 arguments 的特性。 |
|
| 代理与反射 | 了解 Proxy 和 Reflect 的基本概念及其在 Vue3 响应式系统中的核心作用。 |
|
| 性能与优化 | 内存管理 | 能识别并解决常见的内存泄漏（如遗忘的定时器、事件监听器、脱离 DOM 的引用）。 |
| 防抖与节流 | 能手写实现，并能根据场景（搜索、滚动、 resize）选择最合适的方案。 |
二、TypeScript：类型系统的赋能
| 技能领域 | 具体技能点 | 中级要求与深度理解 |
|---|---|---|
| 类型系统 | 基础类型与接口 | 能灵活使用接口定义对象形状、函数类型，理解 readonly、optional 等修饰符。 |
| 泛型 | 能编写泛型函数、泛型接口、泛型类，理解它在增强代码复用性和类型安全性的作用。 | |
| 类型别名与联合/交叉类型 | 能使用这些工具创建复杂的类型定义。 | |
| 工程实践 | 类型推断与断言 | 理解 TS 的类型推断机制，知道何时使用类型断言（as 或 < >）。 |
配置 tsconfig.json |
理解常用配置项的含义，如 strict、target、lib、paths 等。 |
|
| 第三方库类型 | 会为没有类型的库编写 .d.ts 声明文件。 |
三、框架与生态：从使用到理解
| 技能领域 | 具体技能点 | 中级要求与深度理解 |
|---|---|---|
| React 核心 | Hooks | 深度掌握： • useState/useEffect：理解闭包陷阱、依赖数组的作用。• useCallback/useMemo：理解其性能优化原理，避免滥用。• useRef：能用于访问 DOM 和保存可变值。• 自定义 Hook：能抽取和复用业务逻辑。 |
| 状态管理 | 理解单向数据流。能根据场景选择合适的状态管理方案： • 本地状态： useState• 组件间状态：Context API + useReducer• 复杂应用状态：熟练使用 Redux Toolkit 或 Zustand，理解其数据流和异步处理。 | |
| 组件设计 | 能设计高内聚、低耦合的组件。掌握受控与非受控组件、组件组合等模式。 | |
| 高级特性 | 性能优化 | 能使用 React.memo、useMemo、useCallback 避免不必要的重渲染，并理解其代价。会使用 React DevTools 分析性能瓶颈。 |
| 渲染原理 | 理解 Virtual DOM、Diffing 算法、Fiber 架构的基本概念。 | |
| Vue 对应 | 组合式 API | 精通 ref, reactive, computed, watch, watchEffect 及其生命周期。 |
| 状态管理 | 精通 Pinia（或 Vuex），能组织模块化、类型安全的状态。 | |
| 组件通信 | 精通 Props/Emits、Provide/Inject、Event Bus 等。 |
四、CSS & 布局：架构与体验
| 技能领域 | 具体技能点 | 中级要求与深度理解 |
|---|---|---|
| 布局系统 | Flexbox & Grid | 能根据复杂设计稿，灵活组合使用 Flexbox 和 Grid 构建布局，理解它们各自的适用场景。 |
| 架构与可维护性 | CSS 方法论 | 了解 BEM 等命名规范，能写出结构清晰、易于协作的 CSS。 |
| CSS-in-JS / CSS 模块 | 至少使用过一种（如 Styled-components, Emotion, CSS Modules），理解其解决样式作用域和动态样式的价值。 | |
| 预处理语言 | 熟练使用 Sass/Scss 的变量、嵌套、Mixin、函数等特性。 | |
| 用户体验 | 动画与过渡 | 能使用 transition 和 keyframes 制作流畅动画，并了解使用 transform 和 opacity 来优化性能（避免重排重绘）。 |
| 响应式设计 | 精通媒体查询，并了解现代响应式方案（如 Container Queries, 相对视口单位 vw/vh）。 |
五、工程化与工具链：协作的基石
| 技能领域 | 具体技能点 | 中级要求与深度理解 |
|---|---|---|
| 构建工具 | Webpack / Vite | 理解其核心概念（入口、输出、loader、插件）。能看懂和修改基础配置（如配置别名、代理、环境变量）。理解 Vite 基于 ESM 的热更新优势。 |
| 包管理 | npm / yarn / pnpm | 理解 package.json 关键字段，理解版本管理（^, ~），理解 lock 文件的作用。了解 pnpm 的优势。 |
| 版本控制 | Git | 熟练的团队协作流程： • 特性分支工作流 • 清晰的 Commit Message • 代码合并与冲突解决 • Rebase 与 Merge 的选择 |
| 代码质量 | ESLint / Prettier | 能为项目配置规则，并集成到 IDE 和 CI/CD 流程中。 |
| 单元测试 | 会编写单元测试（使用 Jest / Vitest），并理解测试的价值（保证代码质量、便于重构）。 |
六、软技能与综合能力
| 技能领域 | 中级要求与深度理解 |
|---|---|
| 问题解决能力 | 能独立分析和解决复杂的技术难题，善于使用搜索引擎、官方文档、源码调试来寻找答案。 |
| 架构与设计能力 | 能负责一个模块或中小型项目的技术选型和架构设计，考虑可扩展性、可维护性和性能。 |
| 沟通与协作 | 能清晰地与后端、产品、测试、UI/UX 设计师沟通。能进行有效的代码审查，给出建设性意见。 |
| 学习与成长 | 对新技术有强烈的好奇心和学习能力，能主动推动团队技术栈的更新和优化。 |
| 性能意识 | 具备全面的性能优化意识，包括但不限于： • 打包体积：代码分割、Tree Shaking。 • 运行时性能：虚拟列表、图片懒加载。 • 网络：HTTP 缓存策略、CDN。 |