应使用addEventListener替代内联事件、requestAnimationFrame替代定时器、classList控制样式、insertAdjacentHTML安全插入DOM，并重视动画时机与边界处理。

用 addEventListener 替代内联事件，避免 HTML 和逻辑耦合

直接写 onclick="doSomething()" 看似简单，但后期维护难、无法批量绑定、调试不便。真实项目中应把行为和结构分离。

实操建议：

• HTML 里只留语义化结构，比如 切换
• JS 中用 document.getElementById('toggle').addEventListener('click', handler) 绑定
• 若需绑定多个同类元素（如一排卡片），优先用事件委托：container.addEventListener('click', e => { if (e.target.matches('.card-btn')) { ... } })

用 requestAnimationFrame 做平滑动画，别用 setTimeout 或 setInterval

滚动、缩放、淡入淡出等视觉变化，如果靠定时器驱动，容易卡顿、掉帧、不同步屏幕刷新率。

实操建议：

• 动画逻辑写在函数里，用 requestAnimationFrame(animate) 启动，而不是 setInterval(animate, 16)
• 每次回调中计算当前帧状态（如位置、透明度），再更新 style.transform 或 style.opacity
• 记得在动画结束时清除：用 cancelAnimationFrame(id) 防止内存泄漏

用 classList 控制样式切换，少碰 style 属性

直接改 element.style.color = 'red' 会覆盖 CSS 文件里的其他声明，且难以复用、不利于主题切换。

实操建议：

• 把视觉状态映射为 class，例如 .is-loading、.is-expanded
• 用 element.classList.add('is-active')、.toggle

  

  ('is-hidden')、.contains('is-disabled') 操作
• 需要动态生成样式？用 CSSStyleSheet.insertRule()，而非拼接 style 字符串

异步加载内容后，确保 DOM 已就绪再操作节点

fetch 数据回来再 innerHTML += ... 很常见，但若插入的 HTML 含 或依赖子元素初始化（如第三方组件），容易执行失败或错位。

实操建议：

• 用 insertAdjacentHTML('beforeend', htmlStr) 替代 innerHTML +=，更安全、不重绘已有节点
• 若插入后需对新节点绑定事件，不要提前查 DOM；应在插入后立即用 querySelector 定位新元素再 addEventListener
• 避免在 fetch().then() 里直接操作尚未挂载的节点；先确认父容器已存在于 document 中

动态效果真正难的不是“怎么动”，而是“什么时候动、动完之后怎么收尾、动错了怎么退回去”。class 切换是否可逆，动画是否被用户中断，异步内容是否重复渲染——这些边界情况比第一版动效代码多花三倍时间。