代码笔记

工具 / Git

提交前，先看清楚改了什么

一次提交最好围绕一个明确的修改。提交前检查工作区、未暂存差异和已暂存差异，可以减少把临时文件或无关修改一起提交的情况。

git status --short
git diff
git diff --staged

git status --short 给出文件状态概览；git diff 查看工作区相对暂存区的变化；git diff --staged 查看暂存区相对当前提交的变化。真正进入下一次提交的是暂存区里的内容。

只暂存这次需要的文件

git add src/example.js
git diff --staged
git commit -m "Fix empty input handling"

示例路径应替换成实际修改的文件。提交前还要留意密码、令牌、日志和本地配置。.gitignore 不会让已经被 Git 跟踪的文件自动停止跟踪。

参考：Git diff 文档 · gitignore 文档

前端 / JavaScript

Fetch 返回了，不代表请求成功了

使用 fetch() 时，要区分网络错误和 HTTP 错误。网络故障可能让 Promise 拒绝；但收到 404 或 500 响应时，仍然需要主动检查 response.ok。

async function loadJSON(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  return response.json();
}

try {
  const data = await loadJSON("/data.json");
  console.log(data);
} catch (error) {
  console.error("读取数据失败", error);
}

这里的 /data.json 只是示例接口，需要换成真实地址。即使 HTTP 状态成功，响应也不一定是有效 JSON，解析过程仍可能抛出错误，因此调用处也要处理失败。

界面状态也属于错误处理

加载中、成功、空数据和失败应当分开处理。请求失败时保留已经显示的数据，给出可重试的入口，比把整个页面清空更容易理解。不要在错误日志里记录密码或完整的认证令牌。

参考：MDN：使用 Fetch

前端 / CSS

小屏幕布局，从内容宽度开始

响应式布局不只是把字号变小。先限制正文的最大宽度，再让两侧留白随可用空间变化，可以兼顾桌面阅读和手机浏览。

.page {
  width: min(100% - 32px, 960px);
  margin-inline: auto;
}

img {
  max-width: 100%;
  height: auto;
}

pre {
  overflow-x: auto;
}

检查容易溢出的内容

长链接、代码块和网格子项经常把页面撑宽。长链接可以设置 overflow-wrap: anywhere；代码块保留横向滚动；Grid 布局中的正文列可使用 minmax(0, 1fr)，允许它缩到容器可用宽度。

最后用窄屏查看真实内容，而不只是空白框架。确认目录可以换行、链接能点击、代码没有盖住正文，页脚也没有跑到屏幕之外。

参考：MDN：min() · overflow-wrap