CodeGeeX v3.2.0+ 可将 jQuery 代码精准重构为 ES6+：需添加指定注释并触发 Alt+\，AI 自动转事件绑定、fetch 替代 $.ajax、DOM 操作、变量声明，并专项处理链式调用、动态 HTML 和表单序列化。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想把项目里那些年久失修的 jQuery 代码，比如 $('.btn').click(function() { ... }) 这类写法，直接升级成干净、可维护、符合现代前端规范的 ES6+ 语法，而不是手动逐行重写或引入一堆兼容层。
确认 CodeGeeX 插件已就绪
打开 VS Code → 扩展市场搜索 “CodeGeeX” → 点击安装 → 重启编辑器。插件图标出现在侧边栏后，说明基础环境已通。
注意：必须使用 【CodeGeeX v3.2.0 或更高版本】，低版本不支持 jQuery 到 ES6 的语义识别与上下文感知重构。
用自然语言指令触发精准重构
在 jQuery 代码块上方添加一行注释，明确告诉 CodeGeeX 你要什么：
// 将此 jQuery 事件绑定和 DOM 操作重构为纯 ES6：使用 addEventListener、fetch 替代 $.ajax、用 const/let 声明、箭头函数、解构赋值
光标放在该注释正下方 → 按下 Alt+\（Windows/Linux）或 Option+\（Mac）→ 等待 AI 生成建议。
这一步不能跳过注释指令——直接选中代码右键“Refactor Code”只会做通用简化，无法理解 jQuery → 原生 API 的映射逻辑。
分步验证重构结果是否安全可用
第一步：检查事件绑定是否从 $('selector').on('click', fn) 正确转为 document.querySelector('selector').addEventListener('click', () => { ... })，且未遗漏 event.preventDefault() 等关键行为。
第二步：确认 $.ajax({ url, data }) 已替换为 fetch(url, { method: 'POST', body: JSON.stringify(data) })，并包裹了 try/catch 和 await；若原代码含 dataType: 'json'，新代码必须有 response.json() 链式调用。
第三步：逐行比对 DOM 操作——$('#box').html(str) 必须转为 document.getElementById('box').innerHTML = str，而非错误地写成 .textContent（会丢失 HTML 结构）。
第四步：检查变量声明——所有 var $el = $('#input') 类型语句，应拆解为 const inputEl = document.querySelector('#input') + const inputValue = inputEl.value，【禁止保留 $ 前缀或 jQuery 对象引用】，否则后续代码仍依赖 jQuery 运行时。
处理 jQuery 特有模式的专项策略
方法一：链式调用（如 $('.item').show().addClass('active').find('span').text('done')）
不要强行一对一翻译成原生链式调用——浏览器原生 API 不支持跨节点类型链式操作。CodeGeeX 应将其拆解为多步：先获取元素列表 → 分别调用 classList.add、style.display = 'block'、再查子元素并设文本。
方法二：动态生成 HTML 字符串（如 $('<div class="card">...</div>').appendTo('.list')）
必须转为 document.createElement + element.classList.add + parent.appendChild 组合。若字符串复杂，优先改用模板字符串 + insertAdjacentHTML('beforeend', template)，但要确保插入前已做 XSS 过滤。
方法三：表单序列化（$('#form').serialize()）
替换为 new FormData(document.getElementById('form'))，这是唯一能正确处理文件上传、复选框多值的现代等价方案；若需 URLSearchParams 格式，则用 new URLSearchParams(new FormData(form)).toString()。
