做网站的哪里好html5网站建设中模板

做网站的哪里好,html5网站建设中模板,国外网站素材,服务器哪些端口可以做网站关注 霍格沃兹测试学院公众号#xff0c;回复「资料」, 领取人工智能测试开发技术合集 在日常开发中#xff0c;我们经常遇到需要快速实现某个功能但又不愿重复造轮子的情况。最近我发现了一个高效的方法#xff1a;使用Cursor编辑器配合其强大的AI功能#xff0c;可以自动…关注 霍格沃兹测试学院公众号回复「资料」, 领取人工智能测试开发技术合集在日常开发中我们经常遇到需要快速实现某个功能但又不愿重复造轮子的情况。最近我发现了一个高效的方法使用Cursor编辑器配合其强大的AI功能可以自动生成完整的、可直接使用的函数代码。下面我将通过一个实际案例分享整个操作流程。一、从实际问题出发假设我们需要开发一个Markdown文档解析工具其中有一个需求提取文档中所有图片链接并返回包含文件名和URL的对象数组。传统做法是打开搜索引擎查找正则表达式调试边界情况……但今天我们用不同的方式。二、在Cursor中的实际操作步骤1明确描述需求我在Cursor中新建了一个JavaScript文件然后直接以注释的形式描述需求// 需求编写一个函数从markdown文本中提取所有图片链接 // 输入markdown字符串 // 输出数组每个元素包含 filename 和 url // 图片格式为  或  // 需要处理相对路径和绝对路径步骤2生成初始代码将光标放在注释下方按下CmdKMac或CtrlKWindowsCursor会弹出AI对话框。我直接输入“请实现这个函数要求处理标准markdown图片语法并考虑各种边界情况。”生成的第一个版本如下function extractImageLinks(markdown) { const regex /!\[(.*?)\]\((.*?)\)/g; const matches []; let match; while ((match regex.exec(markdown)) ! null) { const altText match[1]; const url match[2]; // 从URL中提取文件名 const filename url.substring(url.lastIndexOf(/) 1) || image_${matches.length 1}; matches.push({ filename: filename, url: url, alt: altText || }); } return matches; }步骤3迭代优化第一版代码基本可用但我发现几个问题文件名提取太简单可能包含查询参数没有处理baseURL没有去重我继续与Cursor对话“优化这个函数1. 清理文件名中的查询参数和哈希 2. 添加baseURL参数处理相对路径 3. 对结果去重”Cursor给出了改进版本function extractImageLinks(markdown, baseURL ) { const regex /!\[(.*?)\]\((.*?)\)/g; const linkMap newMap(); let match; while ((match regex.exec(markdown)) ! null) { let url match[2].trim(); // 处理相对路径 if (baseURL !url.startsWith(http) !url.startsWith(//)) { const base baseURL.endsWith(/) ? baseURL : baseURL /; const relative url.startsWith(/) ? url.slice(1) : url; url base relative; } // 提取干净的文件名 const cleanUrl url.split(?)[0].split(#)[0]; let filename cleanUrl.substring(cleanUrl.lastIndexOf(/) 1); // 如果没有文件名生成一个 if (!filename || filename.includes(.)) { filename filename || image_${linkMap.size 1}; } else { filename .jpg; // 默认扩展名 } const key cleanUrl.toLowerCase(); if (!linkMap.has(key)) { linkMap.set(key, { filename: filename, url: url, cleanUrl: cleanUrl, alt: match[1].trim() || }); } } returnArray.from(linkMap.values()); }步骤4添加测试用例为了确保函数可靠性我让Cursor生成测试用例“为这个函数编写测试用例覆盖正常图片、带alt文本、相对路径、重复图片、空输入等情况”// 测试用例 const testMarkdown # 测试文档    !-- 重复 --  ; const results extractImageLinks(testMarkdown, https://example.com); console.assert(results.length 3, 应该去重); console.assert(results[0].filename image1.jpg, 文件名提取正确); console.assert(results[1].url https://example.com/relative/path/image2.png, 相对路径转换正确);三、高级技巧处理复杂需求当我需要更复杂的功能时比如支持嵌套在代码块中的图片、处理HTML格式的img标签我可以更具体地描述“扩展函数功能1. 忽略代码块内的图片 2. 支持HTML img标签 3. 添加文件类型过滤”Cursor生成了包含完整错误处理和配置选项的生产级代码function extractImageLinksAdvanced(markdown, options {}) { const { baseURL , ignoreCodeBlocks true, includeHTML true, allowedTypes [.jpg, .jpeg, .png, .gif, .webp] } options; // 移除代码块如果启用 let processedText markdown; if (ignoreCodeBlocks) { processedText processedText.replace(/[\s\S]*?/g, ); processedText processedText.replace(/[^]*/g, ); } const results []; const urlSet newSet(); // 处理markdown图片 const mdRegex /!\[(.*?)\]\((.*?)\)/g; let mdMatch; while ((mdMatch mdRegex.exec(processedText)) ! null) { processImage(mdMatch[2], mdMatch[1]); } // 处理HTML图片如果启用 if (includeHTML) { const htmlRegex /img[^]src([^])[^]*alt([^]*)[^]*/gi; let htmlMatch; while ((htmlMatch htmlRegex.exec(processedText)) ! null) { processImage(htmlMatch[1], htmlMatch[2]); } } function processImage(rawUrl, altText) { // ... 详细的处理逻辑 // 此处省略具体实现Cursor生成了约50行代码 } // 类型过滤 return results.filter(img { const ext img.filename.toLowerCase().substring(img.filename.lastIndexOf(.)); return allowedTypes.includes(ext); }); }四、最佳实践总结经过多次实践我总结出以下使用Cursor生成函数的经验分步描述需求先描述核心功能再逐步添加细节要求指定输入输出明确说明参数类型和返回值格式要求错误处理主动要求添加边界情况处理和错误捕获生成测试用例让AI编写测试确保代码可靠性代码风格一致指定与你项目一致的编码风格如ES6、TypeScript等五、注意事项虽然Cursor能极大提升效率但需要注意代码审查必不可少AI可能引入安全漏洞或性能问题复杂业务逻辑仍需人工设计AI擅长实现模式化的代码但业务逻辑需要人类把控版权和许可问题确保生成的代码不侵犯第三方版权