在前端工程化的深水区能够脱离后端独立构建复杂业务闭环是区分初级与高级开发者的重要分水岭。以下整理的 5 个纯前端开发命题数据完全本地化。这些题目摒弃了常见的 CRUD 套路聚焦于本地文件系统操作、复杂状态同步、Canvas 高性能渲染及算法可视化旨在考察开发者在架构设计、性能优化及逻辑严密性上的真实功底。1. 本地 Markdown 知识库管理器核心挑战文件沙箱访问、递归目录树渲染、全文检索算法。技术栈Vue 3, File System Access API, Marked.js, Highlight.js需求描述构建一个单页应用允许用户选择本地文件夹作为“知识库根目录”。应用需递归读取该目录下所有 .md 文件并在左侧生成可折叠的目录树。点击文件时右侧实时渲染 Markdown 内容支持代码高亮、表格、任务列表。关键功能包括1. 双向绑定在右侧编辑器修改内容后直接写入原文件需处理权限请求。2. 全局搜索输入关键词实时过滤目录树并高亮匹配的文件名。3. 最近打开记录最近访问的 5 个文件路径存储于 localStorage刷新后可快速恢复。4. 异常处理当本地文件被外部程序修改时需检测冲突并提示用户重新加载。代码需模块化重点注释文件句柄管理及递归读取逻辑确保在大型目录下的渲染性能。2. 交互式算法可视化平台排序与查找核心挑战动画帧控制、异步流程管理、动态 DOM/Canvas 映射。技术栈React, TypeScript, Canvas API需求描述开发一个用于教学演示的算法可视化工具当前仅实现“冒泡排序”和“二分查找”。界面分为控制区、可视化区和代码区。1. 可视化区使用 Canvas 绘制柱状图代表数组元素。排序过程中正在比较的元素标红已排序的标绿交换过程需有平滑的移动动画非瞬间跳变。2. 控制区提供“开始”、“暂停”、“重置”、“速度调节”滑块。支持自定义数组长度10-100。3. 代码联动执行到哪一行代码右侧代码区对应行高亮显示。4. 性能要求即使在 100 个元素的快速排序下动画也需保持 60FPS避免主线程阻塞。需详细注释动画循环与算法逻辑的解耦设计解释如何通过 async/await 或 Generator 实现可中断的执行流。### 3. 离线优先的个人财务记账本核心挑战复杂表单联动、本地数据聚合、ECharts 动态更新、PWA 基础。技术栈Vanilla JS (ES6), ECharts, IndexedDB (via idb keyval)需求描述实现一个无需后端的记账应用数据持久化于 IndexedDB。1. 记账功能支持收入/支出分类可自定义、金额、日期、备注。表单需具备实时校验如金额不能为负日期不能为未来。2. 报表分析顶部展示本月收支总额。下方使用 ECharts 展示“近 6 个月收支趋势折线图”和“本月支出分类饼图”。3. 筛选联动提供月份选择器切换月份时图表和数据列表无刷新更新禁用图表入场动画以提升响应速度。4. 数据导出支持将当前月份数据导出为 CSV 文件。5. UI 要求深色模式移动端适配良好。代码需清晰分离数据层IndexedDB 操作与视图层关键聚合算法如按月汇总需添加中文注释。4. 基于 Canvas 的图像像素化处理工具核心挑战ImageData 操作、卷积核算法、大图片性能优化。技术栈HTML5 Canvas, Web Workers需求描述开发一个本地图像处理工具用户上传图片后可进行像素化、灰度化、边缘检测等操作。1. 核心处理- 像素化将图像划分为 N*N 的块取平均色值填充。- 边缘检测使用 Sobel 算子进行卷积计算。2. 性能优化由于图像处理计算量大必须将核心算法移至 Web Worker 中执行避免阻塞 UI 线程。主线程仅负责接收结果并绘制到 Canvas。3. 交互提供滑块调节像素化程度或阈值实时预览效果需做防抖处理。4. 导出支持将处理后的图片下载为 PNG。需详细注释 Worker 通信协议及卷积算法实现解释如何处理大图内存溢出风险。5. 拖拽式网页布局构建器核心挑战原生 Drag Drop API、嵌套组件状态管理、JSON Schema 序列化。技术栈Vue 3, SortableJS, TailwindCSS需求描述构建一个简易的低代码布局编辑器。1. 组件库左侧提供基础组件按钮、文本框、图片占位符、容器。2. 画布区中间为可编辑区域支持从左侧拖拽组件进入。容器内可嵌套其他组件。3. 属性配置选中画布中的组件时右侧显示其属性面板如文本内容、背景色、边距修改后实时生效。4. 序列化提供“导出 JSON”按钮将当前布局结构序列化为 JSON 对象提供“导入 JSON”功能还原布局。5. 撤销/重做支持 CtrlZ/CtrlY 撤销和重做操作基于命令模式或快照机制。代码需重点注释拖拽事件的兼容处理及状态树的更新逻辑确保嵌套拖拽的稳定性。---编写说明以上命题均去除了冗余的客套话直接切入技术痛点。每个题目都明确了“核心挑战”迫使开发者思考架构而非仅仅堆砌代码。所有数据流均在本地闭环符合纯前。
