# frontendUnit

**Repository Path**: uuuoop/frontend-unit

## Basic Information

- **Project Name**: frontendUnit
- **Description**: 前端开发面试题目：通用表格组件开发
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-30
- **Last Updated**: 2026-01-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 题目1前端开发工作室面试题目：待办事项（Todo List）应用
![示例2](pict/QQ20250830-150000.png)
## 项目概述

设计并实现一个简单的待办事项（Todo List）应用，候选人可以选择使用 **Vue3** 或 **原生 JavaScript** 实现。应用需要支持基本的待办事项管理功能，并注重代码结构、用户体验和代码质量。

## 功能要求

1. **任务管理**：

   - 用户可以添加新的待办事项（包含标题和描述）。
   - 用户可以编辑或删除现有的待办事项。
   - 用户可以将待办事项标记为已完成或未完成。
2. **任务筛选**：

   - 提供筛选功能，支持查看全部任务、仅未完成任务或仅已完成任务。
3. **本地存储**：

   - 使用浏览器的 `localStorage` 保存任务数据，确保刷新页面后数据不会丢失。
4. **用户体验**：

   - 添加任务时，需对输入进行简单的验证（例如，标题不能为空）。
   - 提供友好的交互反馈（如加载状态、删除确认等）。
   - 界面美观，风格简洁现代。

## 评分标准

1. **功能完整性**（40%）：是否实现所有核心功能，功能是否正常工作。
2. **代码质量**（30%）：代码结构、命名规范、可读性和模块化程度。
3. **用户体验**（20%）：界面美观度、交互流畅性和响应式设计。
4. **加分项**（10%）：性能优化、单元测试或其他创新点。



# 题目2.前端开发面试题目：通用表格组件开发
![示例1](pict/QQ20250830-145723.png)
## 题目要求

请构建一个**可配置、可复用**的Vue3通用表格组件。这个组件需要满足以下功能：

1. **数据展示**：能够接收一个 JSON 数组作为数据源，并将其渲染成表格。
2. **动态列配置**：表格的列（`columns`）应该是可配置的，你可以通过传入一个数组来定义每一列的标题、对应的数据字段和渲染方式。
3. **分页功能**：实现一个客户端分页，可以根据每页条数（`pageSize`）和当前页码（`currentPage`）来展示数据。
4. **排序功能**：点击列标题可以对该列进行升序或降序排序。
5. **筛选功能**：提供一个简单的输入框，可以根据关键词过滤表格数据。
6. **可插拔的扩展功能**：考虑到未来扩展，设计一个机制，让开发者可以在表格的某个单元格中自定义渲染内容（例如，添加一个按钮、一个状态标签等）。

## 评分标准

* **功能完整性**（40%）：是否实现所有核心功能，功能是否正常工作。
* **代码质量**（30%）：代码结构、命名规范、可读性和模块化程度。
* **用户体验**（20%）：界面美观度、交互流畅性和响应式设计。
* **加分项**（10%）：性能优化、单元测试或其他创新点。

# 题目3 前端小任务：图片懒加载 + 骨架屏列表
![示例3](pict/图片懒加载与骨架屏.png)
## 题目要求

请实现一个带有图片懒加载与骨架屏的列表：

1. 使用 **原生 JavaScript** 或 **Vue3** 实现图片列表组件或页面。
2. 使用 `IntersectionObserver` 实现懒加载，合理设置 `rootMargin` 以提前预取。
3. 图片未加载前显示骨架屏，加载完成后淡入显示并移除骨架屏。
4. 保证滚动与重新渲染场景下懒加载逻辑稳定，避免重复加载。
5. 关注性能与体验（例如：预加载窗口、轻量样式与过渡、批量渲染）。

## 评分标准

* **功能完整性**（40%）：懒加载触发、骨架屏过渡是否完整且工作正常。
* **代码质量**（30%）：结构清晰、命名规范、可维护性与复用性。
* **用户体验**（20%）：视觉效果与交互流畅、加载过渡自然。
* **加分项**（10%）：性能优化、可配置化、错误处理与拓展能力。

# 题目4 前端小任务：倒计时组件
![示例4](pict/倒计时.png)
## 题目要求

请实现一个可交互的倒计时组件：

1. 支持输入秒数或选择预设时长（如 1/5/10 分钟）。
2. 提供 **开始**、**暂停**、**重置** 控制，并维护清晰的状态（就绪/进行中/已暂停/已结束）。
3. 使用目标结束时间（如 `endTime = Date.now() + remainingMs`）计算剩余时间，避免定时器漂移。
4. 显示 `HH:MM:SS` 时间与进度条，结束时自动停止并更新状态。
5. 保证暂停后恢复计时准确，输入变更时能正确重置时长。

## 评分标准

* **功能完整性**（40%）：控制功能与显示是否完整且工作正常。
* **代码质量**（30%）：结构与命名规范、可读性、可测试性。
* **用户体验**（20%）：状态文案准确、过渡流畅、交互友好。
* **加分项**（10%）：拓展能力（事件回调、提示音）、类型与测试完善。