程序员世界观 · The Programmer's Worldview

一份写给未来程序员的知识手册 —— 30 章完整正文、150+ 核心概念、4 大主题篇章， 按「认识世界 → 编程内功 → 系统进阶 → 行业收官」的学习路径编排。

在线体验：https://yangrainmorning.github.io/programmer-worldview/

---

项目简介

把「一名合格程序员需要知道的东西」系统性地整理成 30 个章节：程序本质、网络、数据库、 安全、架构、操作系统、硬件、AI 原理、产品、职场、开源、编程思想、数据结构、调试、 Git、字符编码、数字与时间、设计模式与网络进阶。每个概念都配有通俗的比喻与完整的故事化正文， 既是知识地图，也是可读的手册。

内容上覆盖计算机专业面试「八股文」的核心考区；形式上对标大厂官网的设计水准， 是一个内容驱动 + 设计驱动的前端项目。

功能特性

• 知识地图：30 张章节卡片，按「基础 / 内功 / 进阶 / 行业」四篇组织，章节顺序遵循学习路径而非堆砌
• 阅读室：点击卡片进入全屏沉浸式文章页，30 篇完整正文（约三万字），支持上一章 / 下一章翻页
• 全文搜索：导航栏实时搜索，索引覆盖全部正文，支持 / 快捷键聚焦、Esc 清空；搜索态自动切换为干净的结果布局
• 阅读进度：章节阅读过半自动标记已读，localStorage 持久化，首屏实时显示已读统计
• 章节深链接：打开章节自动更新 URL（#ch-09），链接可直接分享定位到具体章节
• PWA 离线访问：Service Worker 全站缓存，可安装到手机 / 电脑桌面，断网也能完整阅读
• PDF 导出：阅读室支持打印单章，页脚支持一键导出整本手册（独立打印样式，章节自动分页）
• 双主题：暗夜 / 浅色美术馆两套手工调色主题，localStorage 记忆偏好，支持 ?theme= URL 参数
• 交互细节：滚动入场动画（IntersectionObserver + stagger）、阅读进度条、光晕鼠标视差、回到顶部
• 分享就绪：Open Graph / Twitter Card 元数据，社交分享自动生成预览卡片

界面预览

浅色主题	知识地图

技术栈与设计决策

零依赖、零框架、零构建工具 —— 原生 HTML / CSS / JavaScript 单文件交付（82 KB）， 双击即可运行。这是一个刻意的工程决策：

决策	理由
单文件架构	内容型站点无需模块化拆包；单文件使部署、分享、离线阅读成本为零
不引框架	功能边界清晰（卡片 + 弹层 + 搜索），原生 DOM API 足够；保持首屏零阻塞
CSS 变量设计系统	双主题通过切换 :root 变量实现，全站颜色一处定义、级联联动
手绘 SVG 线性图标	26 枚图标全部内联手写，矢量无损、随主题变色，替代 emoji / 图标库
content-visibility 之外的性能手段	无网络请求、无字体加载、无第三方脚本，天然高性能
prefers-reduced-motion 友好	动画均基于 CSS 过渡，可随系统设置降级

关键技术点：IntersectionObserver 懒加载动画、localStorage 主题持久化、 URLSearchParams 主题参数、全文索引预构建（标题 + 正文拼接小写化）、 事件委托渲染文章页、overscroll-behavior 滚动锁定。

项目结构

programmer-worldview/
├── index.html            # 全部结构、样式与逻辑（单文件应用）
├── sw.js                 # Service Worker（离线缓存）
├── manifest.json         # PWA 安装清单
├── icon.svg / icon-*.png # 应用图标
├── shot-*.png            # 界面预览图
├── README.md
└── LICENSE

本地运行

无需任何环境：

# 方式一：直接双击 index.html

# 方式二：本地起一个静态服务（可选）
npx serve .

部署

静态文件托管在 GitHub Pages，推送 main 分支后自动构建发布：

git add .
git commit -m "feat: 你的修改"
git push origin main

路线图

• 章节阅读完成标记（localStorage 持久化）
• 打印 / PDF 导出样式
• 自定义域名

开源协议

MIT © 2026 YangRainmorning