generic-static-feature-developer

静态网站功能开发者

指导极简静态网站的功能开发。

扩展自： 通用功能开发者 - 阅读基础技能，了解开发工作流、范围评估以及构建与集成的决策。

静态网站架构

典型结构

project/
├── index.html          # Main page
├── style.css           # All styles
├── script.js           # All interactions
├── assets/             # Images, icons
├── .github/workflows/  # Automation (optional)
└── docs/               # Documentation

无构建工具理念

编辑 → 保存 → 部署（仅此而已）

• 纯 HTML（无模板引擎）
• 纯 CSS（无 Sass/Less/PostCSS）
• 纯 JS（无打包、无转译）
• 生产环境中不包含 node_modules

开发工作流

本地测试

# Start local server (cross-platform options)
python -m http.server 8000   # Windows
python3 -m http.server 8000  # macOS/Linux
npx serve .                  # Node.js (recommended - all platforms)
# Visit http://localhost:8000

提交前

1. 检查标记和 CSS 是否支持 Chrome、Firefox 和 Safari
2. 检查布局在 375px、768px 和 1024px 断点下的表现
3. 仅在用户提出要求时，运行浏览器、Lighthouse 或截图检查

渐进增强

理念

1. 内容优先 - 无 CSS/JS 时也能正常使用
2. 通过 CSS 增强 - 为支持 CSS 的浏览器提供更好的样式
3. 通过 JS 增强 - 为启用 JS 的浏览器提供交互功能

示例模式

<details>
  <summary>Menu</summary>
  <nav>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</details>

// Enhancement: Custom animation when JS available
if ("IntersectionObserver" in window) {
  // Progressive enhancement
}

原生 JavaScript 模式

事件委托

// One listener for many elements
document.body.addEventListener("click", (e) => {
  if (e.target.matches(".menu-toggle")) {
    toggleMenu();
  }
  if (e.target.matches(".close-btn")) {
    closeModal();
  }
});

DOM 就绪

// Modern approach
document.addEventListener("DOMContentLoaded", () => {
  initApp();
});

// Or: script at end of body (no event needed)

切换类

// Toggle visibility
element.classList.toggle("visible");

// Add/remove
element.classList.add("active");
element.classList.remove("active");

自动化（GitHub Actions）

简单部署工作流

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./

图像优化

# Optimize before committing
# PNG
pngquant --quality=65-80 image.png

# JPEG
jpegoptim --max=80 image.jpg

# WebP conversion
cwebp -q 80 image.png -o image.webp

功能检查清单

开始前：

• 阅读 CLAUDE.md，了解项目限制
• 检查并复用现有模式
• 了解性能预算

开发期间：

• 一次只做一项更改
• 在多个浏览器中测试
• 测试响应式布局
• 确保页面大小符合预算

完成前：

• Lighthouse 性能评分达到 95+
• 测试所有断点
• 提供用于对比的截图
• 更新文档

性能目标

指标	目标
总大小	< 50KB
首次内容绘制	< 1s
Lighthouse 性能评分	95+

另请参阅

• 通用功能开发者 - 工作流、决策
• 代码审查标准 - 质量要求
• 设计模式 - UI 模式