最近团队在重构项目，用公司新的组件库来替换掉原来项目的UI，业务、代码和UI都得进行调整，工程量大，由于不同开发者的编码习惯和风格不同，为了规范代码整体的风格和规范，我提出可以写一个前端代码review参考案例文档，用做团队编码的规范，同时也给研发部和实施部的实习生进行编码实践指引。
当然如果自己写代码review案例，那不得花个一、两个星期！！！ 作为一个现代的前端开发工程师，借助AIGC的产物提高效率，通过AI生成案例后，再根据团队实际规范，进行调整！
前端代码review参考案例生成AI助手是我在coze扣子里面配置提示词生成的
coze扣子具体使用，可以查看另一篇博客学习juejin.cn/post/733683… (coze扣子，创建属于你的简历优化AI Bot【提示词工程、AI赋能】)
一个优秀的提示语可以帮助更好地使用 chatGPT，这里分享一下我认为如何配置好的提示词的几点关键：
与AI对话遇到的问题：
所以为了提高本人的体验感，配置了一下限制：
对于工作流程，首先AI会有一段开场白，并引导用户输入开启对话，具体可以在coze里配置
接下来助手，根据用户输入的一些信息，比如从事的职位（例如初级前端开发工程师、实习生等），主要使用的技术栈（如 React、Vue 等），或者关注的是性能优化方面等
用户提问的关键词越具体、详细，AI的回答会更准确
最后根据预设的输出格式输出内容
示例可以让AI知道你要什么样的输出格式，这里我给了两个案例，每个案例都有案例说明，分别有推荐和不推荐写法，然后也要求AI要说明每种推荐写法带来的好处，可以让阅读者更好理解，加深记忆，
以下都为此AI助手生成的参考案例
优化前的问题：var 声明的变量存在变量提升的问题，容易导致一些难以理解和调试的错误。
优化后的好处：let 和 const 提供了更明确的变量作用域和不可重新赋值的特性，增强了代码的可预测性和安全性。
优化前的问题：全局变量容易造成命名冲突，增加代码的耦合度，降低可维护性。
优化后的好处：将变量限制在局部作用域内，减少意外修改和冲突的可能性，提高代码的模块化和可维护性。
优化前的问题：传统函数声明方式在某些情况下代码较为冗长，并且在处理 this 上下文时可能会出现问题。
优化后的好处：箭头函数语法简洁，并且自动绑定了其所在上下文中的 this 值，避免了一些常见的 this 指向错误。
优化前的问题：不处理错误可能导致程序在运行时出现不可预测的行为，并且难以排查问题。
优化后的好处：及时捕获和处理错误，能够提高程序的稳定性和可靠性，方便开发者及时发现和解决问题。
优化前的问题：使用字符串相加的方式拼接字符串不够直观和灵活，尤其在处理复杂的表达式时。
优化后的好处：模板字符串可以更方便地插入变量和表达式，使代码更简洁易读。
优化前的问题：逐个获取对象属性的方式较为繁琐，代码重复。
优化后的好处：解构赋值可以更简洁地从对象或数组中提取值，减少代码量，提高可读性。
优化前的问题：使用传统的 Promise 链方式处理异步操作，代码可读性较差，容易出现回调地狱。
优化后的好处：async/await 使异步代码看起来更像同步代码，提高了代码的可读性和可理解性
优化前的问题：使用 if 语句处理空值不够简洁。
优化后的好处：使用逻辑或操作符可以更简洁地处理空值情况。
优化前的问题：对象的键必须是字符串或符号，而 Map 的键可以是任何类型的值
优化后的好处：Map 提供了更灵活的键类型，并且在迭代和操作上具有一些优势。
优化前的问题：注释不够规范和详细，不利于他人理解代码的功能和参数。
优化后的好处：规范的注释提供了更清晰的函数说明，包括参数和返回值的描述，提高代码的可维护性。
优化前的问题：同步加载的 Javascript 脚本可能会阻塞页面的渲染。
优化后的好处：使用 defer 属性可以让脚本在页面解析完成后执行，避免阻塞渲染。
优化前的问题：频繁修改元素的样式可能导致多次重绘和回流，影响性能。
优化后的好处：通过暂时隐藏元素进行修改，然后再显示，可以减少重绘和回流的次数。
优化前的问题：多个文件请求增加了 HTTP 请求次数，影响页面加载性能。
优化后的好处：压缩和合并文件减少了文件大小和请求数量，加快页面加载速度。
优化前的问题：直接加载所有图片可能会在页面加载时造成较大的网络请求负担，影响页面加载速度。
优化后的好处：图片懒加载可以在用户滚动到图片可见区域时再加载图片，减少初始页面加载的请求数量，加快页面加载速度
优化前的问题：过于复杂和高特异性的选择器会增加浏览器解析 CSS 的时间和计算量。
优化后的好处：使用更简洁和具体的选择器可以提高 CSS 解析效率，减少样式冲突的可能性。
优化前的问题：一次性加载所有组件可能导致初始加载时间过长，包含了用户可能不会立即使用的组件代码。
优化后的好处：按需加载组件可以根据用户的操作动态加载所需的组件，减少初始加载的代码量，提高页面加载速度。
优化前的问题：在代码中直接使用固定的值或复杂的计算表达式可能导致代码的复用性和可维护性降低。
优化后的好处：通过定义 Sass 函数和混合器，可以将常用的计算和样式封装起来，提高代码的复用性和可维护性。
优化前的问题：在代码中直接使用固定的颜色值或其他样式属性可能导致代码的灵活性和可维护性降低。
优化后的好处：通过使用 Sass 变量，可以方便地在不同的地方引用和修改这些值，提高代码的灵活性和可维护性。
优化前的问题：未清理的资源会一直占用内存，可能导致内存泄漏。
优化后的好处：及时清理不再使用的资源，避免内存泄漏，提高系统稳定性。
优化前的问题：为每个元素单独添加事件处理函数会增加内存占用和性能开销。
优化后的好处：使用事件委托可以减少事件处理函数的数量，提高性能。
在AI的冲击下，就业形势越来越难，那作为一名前端工程师要如何应对才能不会被市场淘汰？以下为笔者的一些思考
现在的前端工程师，应该要善于利用工具，AI是来辅助你的，不是替代你的
AI 用到平时的开发中能够极大地提高效率，但AIGC的产物，存在一些缺陷和问题，AI 辅助完成了重复性劳动工作，对于不完美的AI产物，应该进行改进和修正，根据实际和现实进行修改，以确保正确性。
AI 只是辅助我们完成工作的工具，掌握好专业领域知识，才能更好地利用 AI 工具，提高工作效率。我们可以利用AI，但不要过于依赖AI。