应使用 data-category 存储分类标识而非 class，避免语义混乱与误匹配；显隐控制用 .hidden 类而非直接操作 display；多选分类用数组 includes() 判断；重置筛选仅移除 .hidden 类；需同步 url、浏览器历史及 ui 状态。
用 data-category 而不是 class 存分类标识
很多人一上来就给每篇文章加 class="tag-react tag-css"，然后用 document.querySelectorAll(".tag-react") 筛——这会导致 class 名膨胀、语义混乱，还容易误匹配（比如 tag-reactive 也会被选中）。正确做法是统一用 data-category 存唯一值：<article data-category="react"></article>。筛选时写 document.querySelectorAll('[data-category="react"]')，精准、可读、不干扰样式逻辑。
显隐控制别直接改 display，用 .hidden 类切换
直接设 element.style.display = "none" 再恢复，会丢失原始 display 类型（比如原先是 inline-block，强制设成 block 就错位了）。更稳妥的是定义一个 CSS 类：.article.hidden { opacity: 0; pointer-events: none; transition: opacity 0.2s; }，再用 el.classList.toggle("hidden", shouldHide) 控制。这样不破坏文档流，动画也自然，移动端点击反馈不会卡顿。
多选分类时，用数组 includes() 判断，别硬编码条件
用户勾选「React」和「TypeScript」时，常见错误是写死：if (cat === "react" || cat === "typescript")。实际应维护一个动态数组：const activeCategories = ["react", "typescript"]，再判断：el.dataset.category && activeCategories.includes(el.dataset.category)。这样新增分类不用改 JS 逻辑，后端返回新分类名也能直接生效，也不怕拼错字符串或大小写问题。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
重置筛选别清空再重建 DOM，只移除 .hidden
点“全部”按钮时，不要用 list.innerHTML = originalHTML ——既丢掉事件监听器，又触发无谓重排。应该保留原始 DOM 结构，只批量执行：articles.forEach(el => el.classList.remove("hidden"))。如果文章是异步加载的，更要确保原始节点始终在内存里（比如缓存在 const originalArticles = [...document.querySelectorAll("article")]），而不是靠字符串拼接来回重建。
真正难的不是筛选本身，而是状态同步：URL 参数要不要同步？浏览器后退是否还原筛选？按钮的 .active 类有没有及时更新？漏掉其中任何一个，用户就会觉得“点了没反应”或者“刷新后筛选丢了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
