消息通知中心的核心是状态同步与语义化结构：必须用<article>包裹每条消息，<h3>标题、<time>时间戳、aria-label声明未读态、<button>操作按钮；分页需手动拉取数据并更新total；未读状态以服务端为准，localStorage仅缓存ID列表；时间必须带时区ISO格式。
消息通知中心页面不是靠堆 div 能撑起来的，核心问题就一个：状态同步一旦脱钩，未读数就不可信，多端、刷新、离线全翻车。
怎么组织消息项的 DOM 结构才不丢状态
结构混乱直接导致点击态丢失、屏幕阅读器无法识别、滚动错位。别用嵌套 div 拼消息，必须用语义化组合：
- 每条消息用
<article>包裹，代表独立可操作单元 - 标题强制用
<h3>，不能降级为<div class="title"> - 时间戳必须用
<time datetime="2026-05-20T17:20:00+08:00">，不能只写“刚刚”或“2小时前” - 未读状态显式声明：
aria-label="未读:系统将于今晚23:00维护"，不能只靠class="unread"+ CSS 变色 - 操作按钮（标记已读、删除）必须是
<button>，且带data-msg-id属性
分页加载时数据和 UI 怎么保持一致
$("#page2").page({}) 这类 jQuery 分页插件只管渲染，不拉数据——这是最常被当真功能踩的坑。
- 必须手动监听
pageClicked和jumpClicked事件，在回调里发 AJAX 请求获取对应页数据 -
total参数必须从接口返回的真实总条数赋值，硬写死会导致第 20 页之后点不动 - 切换页码前，先清空上一页所有
.active类，否则多条消息同时高亮 - 移动端点击区域太小，给
<article>加padding: 12px 16px，别只依赖文字大小
未读状态到底该信谁
前端 localStorage 只能缓存 ID 列表，真实状态必须以后端为准。把 localStorage 当数据库用，等于在多标签页、跨设备、页面刷新时主动放弃一致性。
立即学习“前端免费学习笔记（深入）”；
- 保存时只存关键字段：
{id: 123, time: "2026-05-20T17:20:00+08:00"}，不存正文、图片、HTML 片段 - 读取时加兜底：
JSON.parse(window.localStorage.getItem('unreadMsgs') || '[]') - 用户点击某条消息，先调后端接口标记
msg_id为已读，成功后再更新 DOM 和 localStorage - 页面加载时，优先从接口拉未读数；网络异常时再 fallback 到 localStorage 缓存值
- 多标签页场景下，监听
storage事件，触发局部重载或角标更新
时间显示为什么总是差 8 小时
后端返回 "2026-05-20 17:20:00" 这种无时区格式，前端用 new Date() 解析会按本地时区处理，跨地区用户看到的时间完全对不上。
- 正确做法：后端统一返回带时区的 ISO 格式，例如
"2026-05-20T17:20:00+08:00"或"2026-05-20T09:20:00Z" - 若后端暂不支持，前端补全时区：
new Date(`${isoDate}+08:00`)，但不如后端直出可靠 - 渲染时用
toLocaleString()或Intl.DateTimeFormat，不要拼字符串 - 动态更新“X 分钟前”需绑定唯一 ID 定时器，避免 setInterval 全局刷、内存泄漏、动画中更新已隐藏节点
最容易被忽略的是：时间格式没带时区、未读状态只信 localStorage、分页插件以为配置完就自动加载数据。这三处一错，整个通知中心就失去可信基础。
