中级前端工程师详细技能清单

　　一、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。