代码规范 | 前端代码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，这里分享一下我认为如何配置好的提示词的几点关键：

提示词一些设计想法

Constrains(约束)

与AI对话遇到的问题：

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

Workflow(工作流)

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

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

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

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

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', () => {
          // 处理逻辑
        });
      });

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

思考

在AI的冲击下，就业形势越来越难，那作为一名前端工程师要如何应对才能不会被市场淘汰？以下为笔者的一些思考

善于利用工具

现在的前端工程师，应该要善于利用工具，AI是来辅助你的，不是替代你的

利用的同时要懂得批判

AI 用到平时的开发中能够极大地提高效率，但AIGC的产物，存在一些缺陷和问题，AI 辅助完成了重复性劳动工作，对于不完美的AI产物，应该进行改进和修正，根据实际和现实进行修改，以确保正确性。

合理使用

AI 只是辅助我们完成工作的工具，掌握好专业领域知识，才能更好地利用 AI 工具，提高工作效率。我们可以利用AI，但不要过于依赖AI。

结语

一起进步，一起加油，我相信一直努力就会成功的！！！

总结