应使用 data-category 存储分类标识，用 querySelectorAll("[data-category='laptop']") 精准筛选；显隐控制采用 .hidden 类配合 toggle；多选时用 activeCategories.includes(element.dataset.category) 判断；重置筛选只需移除 .hidden 类，避免重绘 DOM。
用 data-* 属性存分类标识，别用 class 做筛选依据
很多人一上来就给每个产品元素加一堆 class="category-electronics category-new"，想着靠 querySelectorAll(".category-electronics") 拿数据——这会导致 class 名膨胀、语义混乱，且 JS 处理时容易误匹配（比如 category-electronics-old 也会被 .category-electronics 匹中）。正确做法是统一用 data-category 存唯一值：
<div class="product" data-category="laptop">...</div>。筛选时用
document.querySelectorAll('[data-category="laptop"]')，精准、可读、易维护。
点击筛选按钮时，用 toggle 而非 show/hide 控制显隐
直接设 display: none 再恢复，会丢失原有 display 类型（比如原先是 inline-block，强制设成 block 就错位了）。更稳妥的方式是加一个临时类：
.product.hidden { opacity: 0; pointer-events: none; }，然后用 element.classList.toggle("hidden", shouldHide)。这样不干扰原有样式流，动画也容易接上 transition: opacity 0.2s。
多选分类时，别拼字符串查 data-category，改用数组 includes()
当用户能同时勾选「笔记本」和「显示器」，你想显示所有属于其中任一分类的产品，常见错误是写：
if (cat === "laptop" || cat === "monitor")——硬编码、不可扩展。实际应把当前选中的分类存在一个数组里，比如
const activeCategories = ["laptop", "monitor"]，再用：element.dataset.category && activeCategories.includes(element.dataset.category)。这样新增分类不用改逻辑，后端返回新分类名也能直接用。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
首次加载或清空筛选时，注意重置的是「状态」不是「DOM」
点“全部”按钮后，不要用 innerHTML = originalHTML 重绘整个列表——既丢事件监听，又触发重排。应该只清除 .hidden 类：
document.querySelectorAll(".product").forEach(el => el.classList.remove("hidden"))。如果产品是异步加载的，那更要确保原始 DOM 结构始终保留在内存或 template 中，而不是靠字符串拼接来回重建。
立即学习“前端免费学习笔记（深入）”；
分类筛选真正难的不是 DOM 操作，而是状态同步：URL 参数要不要变？浏览器后退键是否响应？选中按钮的视觉反馈有没有延迟？这些细节一旦漏掉，用户就会觉得“点了没反应”或者“返回后筛选丢了”。先稳住 DOM 和 JS 状态的一致性，再考虑其他。
