用对象管理筛选状态并每次全量重算，避免class切换累加；事件委托处理多选；range防抖+URLSearchParams同步URL。
怎么用原生 HTML + JavaScript 实现带状态记忆的筛选
纯 HTML 无法动态过滤商品，必须配合 JavaScript；但很多人一上来就写一堆 document.querySelectorAll 却没管 DOM 更新后事件丢失、筛选条件叠加逻辑错乱。核心是：把筛选条件存成对象，每次重新计算全量商品，而不是靠 class 切换“隐藏/显示”来累加状态。
常见错误现象：点击“手机”再点“平板”，结果啥都不显示——因为用了 element.classList.toggle('hidden') 累加隐藏，没做条件合并判断。
- 筛选状态建议用一个对象管理，比如
filters = { category: 'phone', priceRange: [0, 3000] } - 每次触发筛选（哪怕只改一个字段），都调用统一的
applyFilters()函数，遍历所有商品元素，逐个比对是否满足全部条件 - 不要用
display: none后又靠offsetParent === null来判断是否可见——DOM 还在，但逻辑已不可靠 - 商品列表建议用
data-属性预埋筛选字段，比如<div class="product" data-category="phone" data-price="2999">
checkbox 多选筛选时如何避免重复绑定事件
新手常把 addEventListener 写在循环里，每次重筛又绑一次，导致点一次触发多次。根本解法是事件委托 + 单次绑定。
使用场景：分类多选（手机、平板、耳机）、品牌多选（Apple、Xiaomi、Samsung）。
立即学习“前端免费学习笔记（深入）”；
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 给整个筛选区（如
<div id="filter-bar">）绑定一次change事件，监听所有 checkbox - 在事件回调里用
e.target.matches('input[type="checkbox"]')判断是否是目标元素 - 用
Array.from(document.querySelectorAll('input[name="brand"]:checked')).map(cb => cb.value)拿当前所有勾选项，别用forEach遍历再 push - 注意：
change事件在 checkbox 失去焦点时才触发，若要实时响应，改用input事件（兼容性 OK，现代浏览器都支持）
价格区间筛选为什么用 range input 而不是两个 number 输入框
双 number 输入框看似直观，但用户输入顺序随意、边界校验麻烦、移动端体验差；<input type="range"> 天然联动、拖拽顺滑、无需额外防抖。
性能影响：range 拖动会高频触发事件，直接写 oninput 可能卡顿。
- 用
setTimeout+clearTimeout做简单防抖，延迟 150ms 再执行applyFilters() - 两个 range 共享一个
data-min/data-max，避免手动维护最大最小值不一致 - 展示当前范围建议用独立
<span class="price-display">，别塞进 input 的value属性里——range 的 value 是单值，不适合存区间 - 记得初始化时同步设置
min/max和value，否则 Safari 下 range 可能默认为 50
筛选后 URL 不同步，刷新页面就回到初始状态
用户分享链接、返回上一页、刷新页面时筛选消失，本质是没把状态映射到 URL。不用框架也能靠 URLSearchParams + history.pushState 解决。
- 每次筛选后生成新 search 字符串：
const params = new URLSearchParams(); params.set('category', 'phone'); params.set('price_min', '1000'); - 用
history.replaceState(null, '', `?${params}`)替换当前 URL，不触发跳转 - 页面加载时读取 URL：
const urlParams = new URLSearchParams(window.location.search);，然后还原filters对象并调用applyFilters() - 监听
popstate事件处理浏览器前进/后退，否则历史记录切换时状态不会更新
容易被忽略的是：多个筛选项同名（如 brand=apple&brand=xiaomi）需要用 getAll('brand')，不能只用 get()；另外，服务端若依赖 query 参数做 SSR，前端也得确保参数格式和服务端约定一致。
