前端面试练习仓库

🚀 帮助前端开发者提升编码能力和面试通过率的代码片段和面试题练习仓库

✨ 特性

• 📚 丰富的代码片段库 - 涵盖DOM操作、异步编程、算法实现等8大分类
• 🎯 高频面试题库 - 收录100+道前端面试常考题目，按难度分级
• 🔥 在线Playground - 基于Monaco Editor的在线代码编辑和运行环境
• 💪 TypeScript优先 - 所有代码使用TypeScript编写，确保类型安全
• 🔍 智能搜索 - 支持按分类、难度、标签等多维度搜索和过滤
• 📱 响应式设计 - 完美适配桌面端和移动端设备

🚀 快速开始

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0

一键启动（推荐）

# 克隆仓库
git clone https://github.com/your-username/frontend-interview-practice.git
cd frontend-interview-practice

# 一键启动（安装依赖 + 生成索引 + 启动服务器）
npm run start

分步启动

# 1. 安装依赖
npm install

# 2. 生成内容索引
npm run generate-index

# 3. 启动开发服务器
npm run dev

其他命令

npm run build        # 构建生产版本
npm run test         # 运行测试
npm run lint         # 代码检查
npm run format       # 代码格式化
npm run setup        # 项目初始化设置

📖 详细启动指南: STARTUP_GUIDE.md

📁 项目结构

frontend-interview-practice/
├── 📚 code-snippets/          # 代码片段库
│   ├── dom-manipulation/      # DOM操作
│   ├── async-programming/     # 异步编程
│   ├── algorithms/            # 算法实现
│   ├── design-patterns/       # 设计模式
│   └── ...                    # 更多分类
├── 🎯 interview-questions/    # 面试题库
│   ├── basic/                 # 基础题目
│   ├── intermediate/          # 中级题目
│   ├── advanced/              # 高级题目
│   └── company-specific/      # 公司特定题目
├── 🔥 playground/             # 在线运行环境
├── 📖 docs/                   # 文档
├── 🧪 tests/                  # 测试文件
└── 🛠️ scripts/               # 构建脚本

📚 内容分类

代码片段分类

分类	描述	数量
🎨 DOM操作	元素选择、事件处理、样式操作	待添加
⚡ 异步编程	Promise、async/await、并发控制	待添加
📊 数据结构	数组、对象、Map、Set操作	待添加
🧮 算法实现	排序、搜索、动态规划	待添加
🏗️ 设计模式	单例、观察者、工厂模式	待添加
🚀 性能优化	防抖节流、懒加载、缓存策略	待添加
⚛️ 框架相关	React、Vue、Angular	待添加
🔧 工具函数	类型判断、格式化、验证	待添加

面试题分类

难度	描述	适合人群
🟢 基础	JavaScript基础、HTML/CSS	初级开发者、应届生
🟡 中级	框架原理、性能优化	1-3年经验开发者
🔴 高级	架构设计、源码理解	高级开发者、技术专家

🎮 使用指南

浏览代码片段

1. 访问 code-snippets/ 目录
2. 选择感兴趣的分类
3. 查看代码实现和使用示例
4. 在Playground中运行和测试

练习面试题

1. 访问 interview-questions/ 目录
2. 根据难度选择合适的题目
3. 查看题目描述和解题思路
4. 对比多种解法和复杂度分析

使用Playground

1. 启动开发服务器：npm run dev
2. 在浏览器中打开 http://localhost:3000
3. 选择代码片段或面试题
4. 在线编辑和运行代码

🛠️ 开发指南

添加代码片段

1. 在对应分类目录下创建 .ts 文件
2. 使用JSDoc格式添加详细注释
3. 包含使用示例和复杂度分析
4. 编写对应的测试文件

添加面试题

1. 在对应难度目录下创建 .md 文件
2. 包含题目描述、解题思路、标准答案
3. 标注时间复杂度和空间复杂度
4. 提供多种解法对比

代码规范

• 使用TypeScript严格模式
• 遵循ESLint和Prettier配置
• 编写完整的类型定义
• 添加详细的注释和文档

🧪 测试

# 运行所有测试
npm run test

# 监听模式运行测试
npm run test:watch

# 生成覆盖率报告
npm run test:coverage

# 代码质量检查
npm run lint

# 自动修复代码格式
npm run lint:fix

📈 贡献指南

我们欢迎所有形式的贡献！请查看 贡献指南 了解详细信息。

贡献方式

• 🐛 报告Bug
• 💡 提出新功能建议
• 📝 改进文档
• 🔧 提交代码片段
• 📚 添加面试题
• 🧪 编写测试用例

📄 许可证

本项目采用 MIT 许可证。

🙏 致谢

感谢所有为这个项目做出贡献的开发者们！

---

⭐ 如果这个项目对你有帮助，请给我们一个星标！

📧 有问题或建议？欢迎提交 Issue

🔗 更多资源：文档 | 代码规范 | 浏览器兼容性