这是前端局部渲染问题，需用JavaScript动态过滤并替换DOM中评价列表内容，避免iframe或全页跳转；常见错误是用window.location.href导致重载丢失滚动位置和筛选条件；好评对应score>=4（满分为5）。
点击切换时只更新评价列表，不刷新整个页面
这本质上是个前端局部渲染问题，核心是把不同标签对应的数据过滤出来，再用 JavaScript 替换 DOM 内容。别一上来就搞 iframe 或全页跳转，既慢又破坏用户体验。
常见错误是直接用 window.location.href 跳到带参数的 URL（比如 ?tab=good），结果每次点都重载——用户刚拖动的滚动位置、输入的筛选条件全丢了。
- 好评数据通常字段是
score >= 4（假设满分为 5），差评是score ，中评一般不单独设标签 - 后端接口最好一次性返回全部评价，前端按需过滤；如果数据量极大（比如超 500 条），才考虑分标签请求，但要加 loading 状态
- 切换时记得清除上一个标签的
active类，给当前按钮加，否则视觉反馈错乱
DOM 结构要支持动态替换，别写死在 HTML 里
很多新手把评价列表硬编码在 HTML 中，比如写一堆 正确做法是留一个空容器，用模板或框架逻辑生成内容： 然后用 JS 插入真实内容，例如： 标签按钮常被写成多个 推荐用事件委托 + data 属性方式： 然后统一监听： 前端能干净切换，前提是接口返回的数据足够“平”——别让后端按标签拆成三个接口（ 理想返回格式是单个接口，带完整字段： 实际开发中最容易被忽略的是差评加载后的滚动锚点——用户从好评切到差评，列表变短，页面会突然往上跳一下。得在替换内容前记录 scrollTop，渲染后再恢复，不然体验很割裂。innerHTML = '' 清空再拼字符串——容易 XSS，也难维护。<div id="review-list"></div>
document.getElementById('review-list').innerHTML = goodReviews.map(r => `
<div class="review-item">
<span class="score">${r.score}</span>
<p class="content">${r.content}</p>
</div>
`).join('');
r.content 做 HTML 转义（如用 textContent 替代 innerHTML 渲染文本），避免脚本注入review-item 加唯一 key（比如 r.id），不然列表动画或复用会出问题点击事件绑定要防重复和内存泄漏
，看似简单，实则难以调试、无法统一管理状态，且容易因多次初始化绑定导致同一事件触发多次。<div class="tab-bar">
<button data-tab="good">好评</button>
<button data-tab="bad">差评</button>
</div>
document.querySelector('.tab-bar').addEventListener('click', e => {
if (e.target.matches('button[data-tab]')) {
const tab = e.target.dataset.tab;
renderReviewsByTab(tab); // 过滤并渲染
}
});
addEventListener，尤其在 SPA 页面切换时，旧监听器没移除就会累积.off().on() 显式解绑；原生 JS 可保存 handler 引用，后续用 removeEventListener
click 有 300ms 延迟，换成 touchstart 更快，但得处理 PC 兼容服务端返回结构要兼容多标签过滤
/reviews/good、/reviews/bad），那前端逻辑反而更重，缓存和错误处理也分散。{
"data": [
{ "id": 1, "score": 5, "content": "很好", "user": "张三" },
{ "id": 2, "score": 1, "content": "太差", "user": "李四" }
]
}
score 数值范围判断标签归属，比依赖后端返回的 type: "good" 字段更稳定（避免字段名变更或漏传）page 参数
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
