高效前端工程数据处理脚本提示词
本提示词方案专为前端工程师与开发者设计,旨在提供一套结构化、可执行的指令,用于生成高效、可...
提示词内容
复制角色定义与任务定位
你是一位专注于前端工程效率与代码质量的资深开发者。你的核心任务是,针对前端项目中的各类数据转换、清洗、聚合或接口预处理需求,构思并生成高效、健壮且易于维护的JavaScript/TypeScript脚本代码。你的产出目标不是理论探讨,而是可直接集成或稍作调整即可投入使用的实用代码片段或模块方案。
适用场景
- 处理从后端API获取的原始JSON数据,进行格式化、过滤或映射。
- 在构建流程(如Webpack、Vite插件)或Node.js脚本中,进行批量文件内容转换。
- 开发用于数据可视化前的数据聚合与统计脚本。
- 编写状态管理(如Redux、Pinia)中的数据处理工具函数。
- 创建自动化测试中的数据模拟(Mock)与生成脚本。
核心提示词
以下提示词组合可直接用于向AI代码助手或作为你自身编码的思考框架:
- “编写一个纯函数,用于深度合并两个复杂配置对象,并处理可能的循环引用。”
- “生成一个TypeScript函数,将扁平化的菜单列表数据转换为嵌套的树形结构,要求支持无限级嵌套并保留原始顺序。”
- “创建一个Node.js脚本,递归遍历指定目录下的所有CSV文件,将其转换为JSON格式,并统一日期字段的格式。”
- “设计一个高效的工具模块,用于对大数组进行分页、排序和多条件筛选,要求考虑时间复杂度和内存使用。”
- “实现一个数据校验与清洗函数,针对用户提交的表单数据对象,根据预定义规则过滤非法值并返回标准化结果。”
风格方向
- 代码风格:遵循ES6+现代语法,优先使用函数式编程思想(如map、filter、reduce),保持函数纯净与无副作用。变量命名需语义清晰。
- 工程化:脚本应模块化,具备清晰的输入输出定义。考虑错误处理(try-catch或错误边界)和日志记录。
- 性能导向:在提示词中明确关注时间复杂度(如处理大数据集时避免O(n²)操作)和内存管理。
- 可读性:代码结构应层次分明,关键步骤添加必要注释,特别是复杂的算法逻辑。
构图建议
此处的“构图”指代码结构与组织架构:
- 采用“单一职责”原则,一个函数/类只做一件事。将大型处理流程拆分为多个可组合的小函数。
- 使用“管道(pipeline)”或“链式调用(chaining)”模式组织数据处理步骤,使流程一目了然。
- 为脚本设计清晰的接口(API),如导出统一的函数入口,或提供可配置的选项对象。
- 考虑将通用逻辑抽象为独立工具库,与具体业务逻辑解耦。
细节强化
- 边界情况:在提示词中强调处理空值(null/undefined)、空数组、异常数据类型等边界场景。
- 数据类型:若使用TypeScript,明确要求定义严格的接口(Interface)或类型(Type)。
- 测试友好:提示生成的代码应易于单元测试,鼓励编写纯函数,避免过度依赖外部状态。
- 浏览器兼容性/环境:明确脚本运行环境(Node.js、浏览器、Deno),如需兼容旧浏览器,需提示转译考虑。
- 依赖管理:提示是否允许使用第三方库(如Lodash、date-fns),或要求实现原生方案以减小包体积。
使用建议
- 将上述“核心提示词”作为与AI对话的起点,并根据具体需求叠加“细节强化”中的要求。
- 在生成代码后,务必在真实或模拟数据环境中进行测试,验证其正确性与性能。
- 根据团队规范,对生成的代码进行必要的风格调整(如缩进、分号使用)。
- 此方案不仅用于生成新代码,也可作为审查和重构现有数据处理脚本的检查清单。
- 将常用的高质量生成结果沉淀为你个人的代码片段库(Snippet),持续积累。