Git 工作流#
小步提交，每次提交只表达一个完整变化。提交信息描述“为什么改”或“完成了什么”，不要全写 update。
main：始终保持可发布
feature/search：开发搜索功能
fix/mobile-nav：修复移动导航秘密、依赖目录、构建产物按项目规则排除。删除工作区里的密钥并不代表 Git 历史中的密钥消失，泄露后应立即轮换。
项目结构#
project/
├── index.html
├── src/
│ ├── styles/
│ ├── scripts/
│ └── images/
├── tests/
├── package.json
└── README.md目录以职责命名，避免出现 final、final2、真的最终版。README 写清目标、运行方式、测试方式、环境变量和部署方式。
包管理和构建工具#
npm 管理项目依赖；package.json 描述脚本和依赖；锁文件记录精确版本，应提交到仓库。Vite 等工具可以提供开发服务器、模块处理和生产构建，但先用原生页面理解基础，再引入工具。
你至少应能回答：某个包为什么存在、是生产依赖还是开发依赖、如何更新、删除后会影响什么。
代码质量#
- 格式化工具统一外观；
- Linter 发现可疑代码和团队规则问题；
- HTML/CSS 验证发现结构和语法错误；
- 自动化测试验证关键行为；
- 代码评审检查可读性、安全和需求。
工具通过不等于产品正确，它只能检查自己覆盖的部分。
测试金字塔的直觉#
- 单元测试：一个函数的输入输出；
- 组件/集成测试：几个模块一起工作；
- 端到端测试：像用户一样打开页面并操作。
关键路径至少测试：页面加载、表单成功、表单失败、无数据、网络失败、键盘操作、移动尺寸。
性能基础#
- 图片选择合适尺寸与 WebP/AVIF，非首屏图片延迟加载；
- 给图片写宽高，避免页面跳动；
- 减少阻塞首屏的大文件；
- 字体设置合理回退；
- 不在滚动事件中频繁做昂贵计算；
- 以真实网络和移动设备测试，不只看本机高速环境。
发布检查#
- 页面标题和描述准确；
- 所有内部链接可达，外部链接抽查；
- 404 页面存在；
- HTTPS 生效；
- 控制台无错误；
- 手机、平板、桌面没有布局破坏；
- 键盘可以完成核心任务；
- 表单有成功和失败反馈；
- 不包含测试密码、密钥和调试接口；
- 构建版本可回滚。
常见错误#
- 还没理解 JavaScript 就学习复杂框架；
- 使用全局安装、机器换了就无法运行；
- 依赖版本不固定；
- 只测试“成功提交”；
- 把构建目录手工改出补丁，下次构建又丢失；
- 发布后不看日志和真实用户环境。
动手练习#
为任务清单建立 README、Git 分支和发布清单；为“添加任务”函数写单元测试；在无痕窗口、手机尺寸和模拟慢速网络下各验收一次。
完成标准#
- 新电脑能按 README 启动项目。
- 能解释依赖、开发依赖和锁文件。
- 核心正常与失败路径有测试。
- 构建产物来自可重复的命令。
- 有发布、检查和回滚记录。