第五天我终于找到了学习AI编程的正确打开方式。前四天里我抱着让AI帮我写代码的念头复制粘贴了一大堆看不懂的代码项目跑起来了但让我自己解释每一行是干什么的我哑口无言。第五天换了个思路不再让AI替我写而是让AI当陪练带着我去拆解别人写好的项目。于是就有了这篇记录——用Drumkit鼓声工具这个小项目完整走了一遍用cc理解陌生项目的路子。这里的cc指的是AI编程中持续对话上下文Continuous Context也就是你与AI助手围绕同一份代码往复追问、让它逐层带你读懂项目的过程。如果你也处于AI写了一堆代码但我全不懂的阶段这篇应该对你有用。1. 第五天为什么选Drumkit从听个响到看门道1.1 一个小而全的项目比大项目更适合练手Drumkit是前端学习社区里非常经典的一个入门项目。它的功能很直观页面上铺开几个架子鼓组件的按钮你按下键盘上的对应按键就会触发对应的鼓声同时这个鼓片会有一个被敲击的视觉动画反馈。整个过程不涉及后端、不涉及数据库、不涉及网络请求纯HTML、CSS、JavaScript就能搞定。我选它的原因很简单第五天的学习目标不是做出一个复杂的应用而是看懂一个完整项目的运转方式。Drumkit项目完美符合这个需求——体量小所有代码加起来不超过200行但五脏俱全里面包含了事件监听、DOM操作、音频播放、CSS动画联动这些前端基础里最核心的机制。一个项目如果超过2000行新手面对它的第一反应大概率是退缩但200行的代码足够你在AI的引导下逐行啃完还能留出精力去思考整体设计。另一个好处是它的完整性。许多初学者练习时写的是单个函数、单个组件但真实项目最大的门槛在于多个文件之间怎么配合。Drumkit虽然简单但index.html、style.css、script.js分得清清楚楚你能直观地看到HTML怎么引用CSS和JS、JS又如何操作HTML和CSS这条链路本身就是未来理解任何大型前端项目的底层框架。1.2 我前四天踩过的坑复制代码不等于学会编程前四天我走的弯路值得先说说。一开始我用AI生成了一段随机颜色背景的代码跑通了很开心。但第二天想改成点击按钮才变色时我连事件监听器该写在哪都不知道只能继续让AI改第三天做一个小工具AI生成完我就提交了代码里有个明显的逻辑漏洞我看不出来结果运行直接报错。那会儿的我本质上是AI的搬运工不是程序员。第五天我强迫自己立一个规矩AI生成或我找到的代码必须能在不看AI解释的情况下自己复述出全部逻辑才算理解完成。这时候才发现光靠搜索引擎式的提问远远不够——搜来的答案是一条条的孤立信息而项目是一个整体。我需要一种能串起整体、随时追问上下文的方式所以开始系统性地用cc持续对话上下文来学习。2. 先别急着读代码用 cc 建立项目的全局认知很多新手拿到项目后的第一反应是打开script.js从第一行开始读读到第50行发现忘了前面的变量又翻回去重读。这是最糟糕的阅读方式。正确的顺序应该是先建立全局认知再深入局部细节。cc在这里的核心价值就是能让你在不动手翻代码的情况下先向AI问出整个项目的地图。2.1 第一轮提问让AI先讲讲这个项目是干什么的拿到Drumkit项目后我做的第一件事不是读代码而是把整个项目丢给AI然后问了一个最朴素的问题请用一段话说明这个项目是做什么的用户会经历什么交互过程。别小看这个问题。让AI概括项目功能相当于让你在走进一栋大楼之前先看楼层索引图。AI给出的回复大致是这样的这是一个模拟架子鼓的交互页面页面展示9个打击垫分别对应键盘上的A、S、D、F、G、H、J、K、L键用户按下对应键页面播放对应鼓声同时打击垫会有高亮和缩放动画动画结束后自动恢复原状。这段话听起来平平无奇但对我来说意义重大——它让我在5秒钟内就知道了这个项目的起点和终点在哪里。紧接着我再追问一个关键问题依次告诉我这三个文件各自负责什么谁引用谁谁影响谁。AI会给出文件职责划分和依赖关系index.html定义页面结构和按键绑定style.css负责视觉呈现与动画script.js负责监听按键并播放声音。由此我对整个项目的结构有了基本认知。2.2 第二轮提问梳理数据流和事件流有了地图之后第二步需要理解的是事情发生的顺序。我会用一个贯穿式的问题引导AI请按时间顺序描述从用户敲击键盘的那一刻开始到声音播放、动画结束后代码里具体发生了什么。这种提问方式得来的回答是一个完整的事件链条。比如说用户按下键盘上的某个键浏览器触发keydown事件。script.js中监听keydown的事件处理函数接收到事件对象取出event.keyCode或event.code。通过querySelector找到页面中对应>function playSound(e) { const audio document.querySelector(audio[data-key${e.keyCode}]); const key document.querySelector(.key[data-key${e.keyCode}]); if (!audio) return; audio.currentTime 0; audio.play(); key.classList.add(playing); }我直接把这段代码贴给AI问请逐行解释这段函数的逻辑特别是currentTime 0这句为什么要存在。如果去掉它会有什么后果AI的回答让我真正理解了快速连击场景下的设计细节如果不重置currentTime第二次按下键盘时音频标签会尝试从上一次播放结束的位置继续播如果上一次还没播完play()调用甚至会被忽略导致鼓声不连续。加上currentTime 0相当于强制把播放进度拨回开头再调用play()就能实现连续敲击时的快速重播。这是真实交互体验中必不可少的细节但如果不问我可能永远只会机械地复制。我再追问一句那为什么不直接audio.play()而要先判断if (!audio)这一问让我理解了防御性编程的基本思想万一按下的按键没有对应音频元素比如按了空格键querySelector会返回null而null.currentTime会直接抛错。增加判断相当于设了一道安全网这在任何真实的项目中都比比皆是。3.2 面对CSS动画和类名切换我这样问代码里另一个让我困惑的地方是transitionend事件的监听。为什么不在动画播完后直接延时移除类名而是要用这个事件于是我问AI这里为什么监听transitionend而不是用setTimeout两者有什么区别AI给出的解释包含一个很关键的原则setTimeout是拍脑袋定时你在定时器里写500ms但动画实际时长可能因为浏览器性能、系统负载而不同要是动画被慢动作调试工具放慢了定时器早就触发移除类名动画却还在播。而transitionend是浏览器在过渡真正结束的那一刻自动触发的事件它是确凿的证据保证代码的行为永远与视觉状态同步。然后我又问了一个细节如果我用多个CSS属性做过渡transitionend会触发几次AI告诉我它会为每个过渡属性触发一次。真实项目里处理这个问题的常见方式是判断e.propertyName只响应特定属性。Drumkit代码虽然没有处理这个细节但这个追问让我学会了从简单示例推演到健壮写法的思维路径。这是cc学习中很重要的做法不要满足于读懂当前代码要让AI帮你推演这段代码在什么场景下会出现什么隐患。3.3 面对怎么改的需求我这样问理解现有代码只是第一步真正检验理解程度的是改造。我会试着向AI提出一个需求如果我想把鼓键从9个扩展到12个比如增加一个贝斯鼓按键我需要改哪些地方这个问题的妙处在于AI的回答会逼着我去回忆前面建立的知识框架要在HTML中新增一个包含>