代码规范 | 前端代码review参考案例生成AI助手【提示词工程赋能、AIGC】

前言

最近团队在重构项目，用公司新的组件库来替换掉原来项目的UI，业务、代码和UI都得进行调整，工程量大，由于不同开发者的编码习惯和风格不同，为了规范代码整体的风格和规范，我提出可以写一个前端代码review参考案例文档，用做团队编码的规范，同时也给研发部和实施部的实习生进行编码实践指引。

当然如果自己写代码review案例，那不得花个一、两个星期！！！作为一个现代的前端开发工程师，借助AIGC的产物提高效率，通过AI生成案例后，再根据团队实际规范，进行调整！

前端代码review参考案例生成AI助手是我在coze扣子里面配置提示词生成的

coze扣子具体使用，可以查看另一篇博客学习juejin.cn/post/733683… (coze扣子，创建属于你的简历优化AI Bot【提示词工程、AI赋能】)

实现效果如下

完整的提示词内容如下：

## Role: 前端代码review参考案例生成AI助手 ## Profile: - writer：小希 - version：1.0 - language：中文 - description: 此助手是一个专门用于辅助前端开发者进行前端代码review参考案例生成的AI助手。其目标在于通过智能分析和建议，提高代码质量，促进团队协作，并帮助开发者学习最佳实践。 ## Background：由于公司不同的前端开发者编码习惯不同，导致编码规范不够严谨，特别是新来的实习生，为了提高代码质量和规范性，制作review案例参考文档，用做实习新人编码实践指引。 ## Goal: - 生成高质量的前端代码审查案例，以帮助开发者提高代码质量、规范性和可读性。 - 通过持续接收用户反馈和实际代码审查结果，不断优化生成的审查案例，确保其适应不同场景和需求。 - 根据用户的输入，按照下方提供的Example，生成多个代码优化的案例，并详细说明优化前的问题，优化后带来的好处 ## Skill: - 理解和分析前端技术栈（如React, Vue, CSS, JavaScript等）。 - 识别和理解前端代码的最佳实践、性能优化、可访问性、安全性等方面的知识。 - 引用和解释相关前端框架、库或工具的官方文档和社区最佳实践。 - 对代码的可读性，可维护性，可复用性，可扩展性有深入理解 - 具备丰富的代码review经验，积累大量的review案例 - 对前端开发的标准化，规范化有深入实践 ## Constrains - 优化建议应具体可行，应避免生成可能导致代码质量和可维护性下降的建议。 - review参考案例生成后，按照下方提供的Example格式，并严格按照【Outputer】来输出。 - 每次提供的代码review参考案例不少于10个。 - 对话开始时要先引导用户输入职位、技术栈或性能优化等 ## Workflow: - 引导用户输入职位、技术栈或性能优化等 - AI助手分析用户输入，确定代码review的焦点和难度 - AI助手根据用户输入调整参考案例，生成定制化的代码review指导 -根据用户要求，输出相应数量的review参考案例 - AI助手将生成的指导内容根据【Outputer】格式呈现给用户 ## Example ### 案例一：常量是用驼峰式命名。 ``` // 推荐 const maxValue = 100; // 不推荐 const max-value = 100 ``` ### 案例二：使用模板字符串。 // 推荐 let name = 'John'; let greeting = `Hello, ${name}!`;  // 不推荐 let name = 'John'; let greeting = 'Hello, ' name + '!'; ## Outputer - 已为您生成的前端代码review参考案例： ### 一：【Example】 ### 二：【Example】 【提供的每个案例都要说明优化前的问题，优化后带来的好处！】 ## Initialization: - 为更好地服务用户，严格按照【Workflow】的过程来执行

一个优秀的提示语可以帮助更好地使用 chatGPT，这里分享一下我认为如何配置好的提示词的几点关键：

使用具体的、相关性高的描述性语言配置提示词要有明确的目的和重点要配置较为完整的工作流，大概的步骤可以是引导用户输入—分析用户输入信息-根据用户的具体要求生成内容-根据【Outputer】输出格式和流程输出内容要提供具体的示例给AI分析，这样有助于规范格式和提高要获取的内容的准确性要提供目的性较强的约束(Constrains)配置，"强制"AI做出或不能做出什么行为，比如约束每次返回至少多少条案例等等

提示词一些设计想法

Constrains(约束)

与AI对话遇到的问题：

由于Gpt偶尔会出现问题，没有按照预设的工作流以及输出格式进行返回信息每次想让Gpt返回多一点的参考案例数目，都得手动输入提供的代码review参考案例不少于10个，很麻烦有时输入如何生成前端代码review参考案例，AI都会立马返回参考案例，答非所问，没有按工作流先引导用户

所以为了提高本人的体验感，配置了一下限制：

优化建议应具体可行，应避免生成可能导致代码质量和可维护性下降的建议。 review参考案例生成后，按照下方提供的Example格式，并严格按照【Outputer】来输出。每次提供的代码review参考案例不少于10个。对话开始时要先引导用户输入职位、技术栈或性能优化等提供的每个案例都要说明这种推荐写法带来的好处！

Workflow(工作流)

对于工作流程，首先AI会有一段开场白，并引导用户输入如何生成前端代码review参考案例开启对话，具体可以在coze里配置

接下来助手会引导用户输入职位、技术栈或性能优化等，根据用户输入的一些信息，比如从事的职位（例如初级前端开发工程师、实习生等），主要使用的技术栈（如 React、Vue 等），或者关注的是性能优化方面等

用户提问的关键词越具体、详细，AI的回答会更准确

最后根据预设的输出格式输出内容

引导用户输入职位、技术栈或性能优化等 AI助手分析用户输入，确定代码review的焦点和难度 AI助手根据用户输入调整参考案例，生成定制化的代码review指导根据用户要求，输出相应数量的review参考案例 AI助手将生成的指导内容根据【Outputer】格式呈现给用户

Example(示例)

示例可以让AI知道你要什么样的输出格式，这里我给了两个案例，每个案例都有案例说明，分别有推荐和不推荐写法，然后也要求AI要说明每种推荐写法带来的好处，可以让阅读者更好理解，加深记忆，

## Example ### 案例一：常量是用驼峰式命名。 ``` // 推荐 const maxValue = 100; // 不推荐 const max-value = 100 ``` ### 案例二：使用模板字符串。 // 推荐 let name = 'John'; let greeting = `Hello, ${name}!`;  // 不推荐 let name = 'John'; let greeting = 'Hello, ' name + '!';

部分代码review参考案例

以下都为此AI助手生成的参考案例

使用 let 和 const 替代 var 声明变量

// 推荐 let count = 0; const maxCount = 100;

// 不推荐 var count = 0; var maxCount = 100;

优化前的问题：var 声明的变量存在变量提升的问题，容易导致一些难以理解和调试的错误。
优化后的好处：let 和 const 提供了更明确的变量作用域和不可重新赋值的特性，增强了代码的可预测性和安全性。

避免全局变量。

// 推荐 (function() { let localVar = 10; })();

// 不推荐 globalVar = 10;

优化前的问题：全局变量容易造成命名冲突，增加代码的耦合度，降低可维护性。
优化后的好处：将变量限制在局部作用域内，减少意外修改和冲突的可能性，提高代码的模块化和可维护性。

使用箭头函数。

// 推荐 const double = num => num * 2; //

不推荐 function double(num) { return num * 2; }

优化前的问题：传统函数声明方式在某些情况下代码较为冗长，并且在处理 this 上下文时可能会出现问题。
优化后的好处：箭头函数语法简洁，并且自动绑定了其所在上下文中的 this 值，避免了一些常见的 this 指向错误。

及时处理错误。

try { // 可能出错的代码 } catch (error) { console.error(error); }

// 不推荐 // 可能出错的代码，不做错误处理

优化前的问题：不处理错误可能导致程序在运行时出现不可预测的行为，并且难以排查问题。
优化后的好处：及时捕获和处理错误，能够提高程序的稳定性和可靠性，方便开发者及时发现和解决问题。

字符串拼接使用模板字符串。

const name = 'John'; // 推荐 const greeting = `Hello, ${name}`;

// 不推荐 const greeting = 'Hello, ' name;

优化前的问题：使用字符串相加的方式拼接字符串不够直观和灵活，尤其在处理复杂的表达式时。
优化后的好处：模板字符串可以更方便地插入变量和表达式，使代码更简洁易读。

使用解构赋值。

const user = { name: 'John', age: 25 };

// 推荐 const { name, age } = user;

// 不推荐 const name = user.name; const age = user.age;

优化前的问题：逐个获取对象属性的方式较为繁琐，代码重复。
优化后的好处：解构赋值可以更简洁地从对象或数组中提取值，减少代码量，提高可读性。

函数命名使用小驼峰式。

// 推荐 function getUserName() {}

// 不推荐 function GET_USER_NAME() {}

处理异步操作时使用 async/await。

 // 推荐 async function getData() { try { const response = await fetch('https://example.com/data'); const data = await response.json(); return data; } catch (error) { console.error(error); } } // 不推荐 function getData() { return fetch('https://example.com/data') .then(response => response.json()) .catch(error => console.error(error)); }

优化前的问题：使用传统的 Promise 链方式处理异步操作，代码可读性较差，容易出现回调地狱。

优化后的好处：async/await 使异步代码看起来更像同步代码，提高了代码的可读性和可理解性

处理空值。

// 推荐 const value = null; const result = value || 'default';

// 不推荐 const value = null; if (value === null) { const result = 'default'; }

优化前的问题：使用 if 语句处理空值不够简洁。

优化后的好处：使用逻辑或操作符可以更简洁地处理空值情况。

使用 Map 替代对象进行键值对存储。

// 推荐 const myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);

// 不推荐 const myObject = { key1: 'value1', key2: 'value2' };

优化前的问题：对象的键必须是字符串或符号，而 Map 的键可以是任何类型的值

优化后的好处：Map 提供了更灵活的键类型，并且在迭代和操作上具有一些优势。

代码注释规范。

 // 推荐 /** * 这是一个计算两个数之和的函数 * @param {number} num1 第一个数 * @param {number} num2 第二个数 * @return {number} 两数之和 */ function add(num1, num2) { return num1 + num2; } // 不推荐 // 这是一个计算两个数之和的函数 function add(num1, num2) { return num1 + num2; }

优化前的问题：注释不够规范和详细，不利于他人理解代码的功能和参数。

优化后的好处：规范的注释提供了更清晰的函数说明，包括参数和返回值的描述，提高代码的可维护性。

避免阻塞渲染的 JavaScript 脚本。

// 推荐 <script src="https://blog.csdn.net/wyx66666466/article/details/script.js" defer></script>

// 不推荐 <script src="https://blog.csdn.net/wyx66666466/article/details/script.js"></script>

优化前的问题：同步加载的 JavaScript 脚本可能会阻塞页面的渲染。

优化后的好处：使用 defer 属性可以让脚本在页面解析完成后执行，避免阻塞渲染。

避免不必要的重绘和回流。

 // 推荐 const element = document.getElementById('myElement'); element.style.display = 'none'; // 进行其他修改 element.style.display = 'block'; // 不推荐 const element = document.getElementById('myElement'); element.style.width = '500px'; element.style.height = '500px'; // 进行其他修改

优化前的问题：频繁修改元素的样式可能导致多次重绘和回流，影响性能。

优化后的好处：通过暂时隐藏元素进行修改，然后再显示，可以减少重绘和回流的次数。

代码压缩和合并。

// 推荐

// 使用 Webpack 或 Gulp 等工具将多个 JavaScript 和 CSS 文件压缩和合并为一个文件

// 例如：main.min.js 和 style.min.css

// 不推荐

<script src="https://blog.csdn.net/wyx66666466/article/details/script1.js"></script> <script src="https://blog.csdn.net/wyx66666466/article/details/script2.js"></script>

<link rel="stylesheet" href="https://blog.csdn.net/wyx66666466/article/details/style1.css">

<link rel="stylesheet" href="https://blog.csdn.net/wyx66666466/article/details/style2.css">

优化前的问题：多个文件请求增加了 HTTP 请求次数，影响页面加载性能。

优化后的好处：压缩和合并文件减少了文件大小和请求数量，加快页面加载速度。

【图片懒加载】

 // 推荐 <img src="https://blog.csdn.net/wyx66666466/article/details/placeholder.jpg" data-src="https://blog.csdn.net/wyx66666466/article/details/actual-image.jpg" /> <script> const lazyImages = document.querySelectorAll('.lazy-load'); const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }); lazyImages.forEach((img) => observer.observe(img)); </script> // 不推荐 <img src="https://blog.csdn.net/wyx66666466/article/details/actual-image.jpg" />

优化前的问题：直接加载所有图片可能会在页面加载时造成较大的网络请求负担，影响页面加载速度。
优化后的好处：图片懒加载可以在用户滚动到图片可见区域时再加载图片，减少初始页面加载的请求数量，加快页面加载速度

【优化 CSS 选择器的特异性】

/* 推荐 */ .my-class { /* 样式声明 */ }

/* 不推荐 */ body div ul li a.my-class { /* 样式声明 */ }

优化前的问题：过于复杂和高特异性的选择器会增加浏览器解析 CSS 的时间和计算量。
优化后的好处：使用更简洁和具体的选择器可以提高 CSS 解析效率，减少样式冲突的可能性。

【按需加载组件】

// 推荐 import('./Component' /* webpackChunkName: "Component" */).then(Component => { // 使用组件 });

// 不推荐 import Component from './Component';

优化前的问题：一次性加载所有组件可能导致初始加载时间过长，包含了用户可能不会立即使用的组件代码。
优化后的好处：按需加载组件可以根据用户的操作动态加载所需的组件，减少初始加载的代码量，提高页面加载速度。

【使用 Sass 函数和混合器】

// 推荐 @function calculate-width($width) { @return $width * 0.8; } .container { width: calculate-width(100%); }

// 不推荐 .container { width: 80%; }

优化前的问题：在代码中直接使用固定的值或复杂的计算表达式可能导致代码的复用性和可维护性降低。
优化后的好处：通过定义 Sass 函数和混合器，可以将常用的计算和样式封装起来，提高代码的复用性和可维护性。

【使用 Sass 变量】

// 推荐 $primary-color: #333; $secondary-color: #666; .container { background-color: $primary-color; color: $secondary-color; }

// 不推荐 .container { background-color: #333; color: #666; }

优化前的问题：在代码中直接使用固定的颜色值或其他样式属性可能导致代码的灵活性和可维护性降低。
优化后的好处：通过使用 Sass 变量，可以方便地在不同的地方引用和修改这些值，提高代码的灵活性和可维护性。

【避免内存泄漏】

// 推荐 componentDidUnmount() { if (this.timer) { clearTimeout(this.timer); this.timer = null; } }

// 不推荐 // 没有在组件卸载时清理定时器等资源

优化前的问题：未清理的资源会一直占用内存，可能导致内存泄漏。
优化后的好处：及时清理不再使用的资源，避免内存泄漏，提高系统稳定性。

【使用事件委托】

 // 推荐 document.addEventListener('click', (event) => { if (event.target.matches('.item')) { // 处理逻辑 } }); // 不推荐 const items = document.querySelectorAll('.item'); items.forEach((item) => { item.addEventListener('click', () => { // 处理逻辑 }); });

优化前的问题：为每个元素单独添加事件处理函数会增加内存占用和性能开销。
优化后的好处：使用事件委托可以减少事件处理函数的数量，提高性能。