职位列表页应使用flex布局并设置flex-wrap: wrap防止溢出，卡片宽度用flex: 1 1 calc(33.333% - 1rem)配合min-width: 280px，移动端优先设flex-direction: column，图片统一object-fit: cover+固定高，筛选避免includes()误判、改用词边界匹配或token比对，多条件筛选单次遍历，大数据量加防抖，下拉多选建议自建控件或用choices.js，IntersectionObserver需显式设rootMargin和threshold，加载中禁用按钮，空数据明确置hasMore=false，排序后重置分页，必须支持键盘导航与ARIA属性。
职位列表页用 flex 布局比 float 更稳，但别忘了加 flex-wrap: wrap
很多初学者一上来就给职位卡片容器设 display: flex，结果卡片超出屏幕宽度后直接横向溢出、滚动条消失——根本原因是没处理换行。实际项目里，职位数量不确定，屏幕尺寸多变，flex-wrap: wrap 是刚需。
更关键的是：别在卡片上写死 width: 300px 这类固定值。用 flex: 1 1 calc(33.333% - 1rem) 配合 min-width: 280px，才能兼顾小屏折叠和大屏三列。
- 移动端优先时，建议先设
flex-direction: column，再用@media (min-width: 768px)切回横排 - 卡片内图片高度不一致？统一用
object-fit: cover+ 固定容器高，避免 DOM 高度抖动影响筛选动画 - 如果用 Vue/React 渲染列表，别把整个
flex容器做成响应式依赖项，只让职位项自己响应数据变化
filter() 做前端筛选时，别直接用 includes() 匹配岗位名称
用户搜“Java”，结果把“JavaScript”“C++ Java 后端”全刷出来了，这是典型字符串包含误判。真实场景中，“Java 开发工程师”要匹配，“高级 Java 架构师（偏 Go）”也应保留，但“前端（熟悉 Java）”不该出现。
更稳妥的做法是提取关键词后做词边界匹配：new RegExp(`\b${keyword}\b`, 'i')，或者用 split(/s+/).some(token => token.toLowerCase() === keyword.toLowerCase())。
立即学习“前端免费学习笔记（深入）”；
- 搜索框输入为空或只含空格时，记得 return 原始数组，别让
filter()返回空数组造成“数据消失”假象 - 多个筛选条件（如城市 + 职能 + 经验）叠加时，不要嵌套多个
filter()，改用一次遍历 + 逻辑与判断，性能差 3–5 倍 - 如果职位数据超 200 条，建议加防抖（
setTimeout），否则用户连打 “JavaS” 的过程中会触发 4 次重渲染
下拉筛选用 <select multiple></select> 时，Chrome 和 Safari 的样式行为不一致
<select multiple size="3"></select> 在 Chrome 中默认显示滚动条并允许点选多项，在 Safari 中却可能只响应第一次点击、后续点击无反馈——这不是 bug，是 Safari 对 multiple 的交互策略更保守。
生产环境建议绕过原生控件：用 <div role="listbox"> + <code>aria-multiselectable 自建，或直接引入轻量库如 choices.js。若坚持用原生，至少加 onchange 监听并手动同步 selectedOptions。
- 别用
value存中文（如value="后端开发"），改用业务 ID（value="backend-001"），避免 URL 编码或后端解析歧义 - 多选状态需要视觉反馈？别只靠
:checked，iOS 上<option></option>不支持伪类，得用 JS 动态加 class - 筛选项超过 10 个时，原生
<select></select>会失去可访问性（无法键盘搜索），必须换方案
加载更多按钮卡住不动？检查是否漏了 IntersectionObserver 的 rootMargin
常见写法：new IntersectionObserver(cb, { root: null })，在部分安卓 WebView 或 iOS 15 下，目标元素始终触发不了回调——因为默认 rootMargin 是 "0px"，而滚动容器有 border 或 transform 时，观测区域会偏移。
实战中一律显式设置：rootMargin: "0px 0px 100px 0px"（底部预留 100px 提前触发），再配合 threshold: 0.1 防止临界抖动。
- 加载中状态必须禁用按钮并加
disabled属性，否则用户狂点会发多次请求 - 接口返回空数组时，要明确置
hasMore = false并隐藏“加载更多”按钮，而不是留着一个不可点的幽灵按钮 - 如果职位列表支持排序（如“最新发布”“薪资从高到低”），切换排序后需重置
page = 1和hasMore，否则用户看到的是旧分页缓存
实际交付时，最常被忽略的是键盘导航支持：职位卡片没加 tabindex="0"，筛选项没配 aria-controls，导致残障用户或键盘党完全无法操作。这不是“锦上添花”，而是上线前必须验证的基础路径。
