AI助力前端编程

焲
88 阅读4分钟

了解ai

ai的痛点

  • 受限于上下token，很难跨组件生成代码
  • 复杂需求难以理解，简单需求复杂化
  • 容易发散，产生偏差

ai的强项

  • 逻辑性强
  • 代码注释完整
  • 可重复性强

ai助力定位

针对ai的优势和劣质，在ai代码生成时应尽量聚焦局部，尽量只考虑单组件，单函数。减少耦合。

助力可重复性代码生成

根据二八法则，工作中80%的工作都是重复性工作，在中后台项目中基本都是crud。 ai可以助力我们处理这些重复性很高的任务，提升开发效率。开发可以更聚焦20%有难度有挑战的任务。

助力复杂函数解决思路

基于ai的强大推理能力，针对复杂函数，可定义入参出参，让ai进行逻辑推理，辅助思考。

助力疑难问题的排查

现在的ai具备强大的检索能力，在问题排查时，可作为首选的搜索引擎。

对前端开发人员的挑战

从写代码到描述需求

  • 需求拆分：复杂需求需要进行先任务分解，保证每个子需求的独立性
  • 需求定位：分析哪些需求是简单的，可重复的，交给ai。复杂的，特殊的还是需要自己开发。
  • 写好提示词： 给ai写提示语的过程，其实就是技术设计的过程，需要清晰定义好一个需求的前置条件，实现过程，预期结果。ai才能够更好的理解需求。

从面向交互到面向对象编程

  • 面向交互：边开发边调试，父子组件交互，跨组件交互
  • 面向对象：先定义后开发，高内聚低耦合

ai编码流程

  1. 工具和模型选择 工欲善其事，必先利其器。建议使用主流的ide和模型。
  2. 角色设定和规则约束 对ai进行角色设定，可以让ai更加聚焦和专业化。 通过设置规则，让ai的编码风格符合团队的规范。
你作为一名资深的前端开发工程师，拥有数十年的一线编码经验，特别是在前端组件化方面有很深的理解，熟练掌握编码原则，如功能职责单一原则、开放—封闭原则，对于设计模式也有很深刻的理解。
你熟练掌握react框架，对组件封装和性能优化有很深的见解。
你精通es6语法，ts类型定义。
  1. 描述需求
# 使用结构化的提示语进行需求描述

# 参考代码
请参考xx文件书写代码

# 类型定义
从xx引入类型定义 Axx Bxx

# 接口定义
从xxx引入 create， delete，接口

# 内容
....
  1. 持续迭代

过于复杂的提示词并不能提高效率，相当于把写代码的精力转为写提示语了。 基于敏捷迭代小步快走开发模式，更能提高效率。

ai案例实操

实现一个表格的增删改查

  1. 根据前后端接口申明api和类型定义
  2. 拆分页面组件为list组件和create组件
  3. ai生成create组件和list组件
  4. 代码验证和迭代优化

生成create组件

# 参考代码
请参考src/pages/config/label-manage/create/index.tsx文件，在src/pages/config/access-control/create/index.tsx下生成弹窗代码

# 类型定义
从@/common/constants/access-control引入类型定义 E_ACCESS_CONTROL_KIND;

# 接口定义
从@/services/config引入postAccessControl, putAccessControl接口

# 内容
1.  该页面为门禁规则 创建页面
2.  表单数据类型为IAccessControlRuleItem
3.  表单内容如下
    规则名称 Input 必填
    检查对象 Radio 必填 默认值 E_ACCESS_CONTROL_KIND.RESOURCE_PROPERTY；单选项为E_ACCESS_CONTROL_KIND_LABEL
    规则描述 Textarea 非必填
    规则详情 组件todo即可 非必填

生成list组件

# 参考代码
请参考src/pages/config/label-manage/list/index.tsx文件，在src/pages/config/access-control/list/index.tsx下生成列表代码

# 类型定义
从@/common/constants/access-control引入类型定义 E_ACCESS_CONTROL_KIND_LABEL, E_ACCESS_CONTROL_TYPE, E_ACCESS_CONTROL_TYPE_LABEL;

# 接口定义
从@/services/config引入delAccessControl, getAccessControlDetail, getAccessControls, putAccessControl接口

# 内容
1.  该页面为门禁规则增删改查页面
2.  表格数据类型为IAccessControlRuleItem
3.  过滤条件：关键词过滤，创建人，更新人，规则类型，检查对象
4.  表格列：规则名称， 规则类型， 规则描述， 检查对象，启用状态，豁免规则，创建信息，更新信息，操作
5.  列操作：详情，编辑，删除
6.  表格操作：新建规则
7.  页面描述：支持自定义门禁规则，满足变更资源的自定义校验和变更策略按规灰度强校验等诉求
8.  新建弹窗显示为todo即可
avatar
文章
阅读
粉丝