原生 JS 写一个可用的数据管理前端：无框架实践
为了深入理解现代框架背后的原理，我尝试用原生 JS 实现了一个简单的数据管理界面。没有 React、没有 Vue，只用一个 HTML、一段 CSS 和几百行 JS。
1. 为什么选无框架
项目规模不大，引入框架反而增加打包体积和学习成本。用原生 JS 可以更清楚地看到数据如何驱动视图，事件如何流转，也有利于理解虚拟 DOM 到底解决了什么问题。
2. 模板字符串 + innerHTML 渲染列表
我把数据数组用 map 转成 HTML 字符串，再一次性设置到容器里。例如 container.innerHTML = rows.map(r => `<tr>...</tr>`).join('')。虽然性能比不上 diff 算法，但对于百行级别的列表完全够用。同时我把每一行的删除、编辑按钮都带上数据 ID。
3. 事件委托代替逐个绑定
如果给每一行的按钮单独绑定 click 事件，列表重渲染时就要重新绑定，很麻烦。我在 table 容器上统一监听 click，通过 e.target.closest('[data-action]') 找到触发元素，再用 dataset.id 拿到行 ID。这样无论列表如何刷新，事件监听只需要一次。
4. fetch 二次封装
我把 fetch 包了一层，统一处理 token、错误提示和 JSON 解析。封装后的 request(url, options) 会在非 2xx 时抛出带状态码的 Error，外层调用统一 catch。这样业务代码里不再需要重复写 if (!res.ok)。
5. 导出 Excel 的实现选型
我没有用重量级库，而是利用 SheetJS 的轻量版本，或者直接拼接 CSV。对于简单表格，CSV 足够；需要样式时再切到 xlsx。导出按钮的事件同样用事件委托捕获，避免在每次渲染时重复绑定。