Notespace 项目总结
约 1067 字大约 4 分钟
2026-02-11
🎯 初衷
- 对标语雀
- 作为第一个正式全栈项目
- 作为求职敲门砖
- 验证自己是否具备完整工程能力
最终结果：项目复杂度远超“普通文档系统”，成为一个可嵌入式企业级知识库内核。
🏗 核心架构设计
Workspace
└── Document
└── Block1️⃣ Block 是核心单元
- 每个块可独立渲染
- 每个块有多个版本
- 块是 diff 的最小单位
- 支持按需加载
- 支持懒渲染
2️⃣ 超大文档渲染策略
问题：
- DOM 堆积会导致性能灾难
- 大型文档全量渲染不可行
解决方案：
- 虚拟滚动
- 视区外块销毁
- 视区内按需渲染
- 控制同时 DOM 数量（≈500）
- Deep DOM 控制（≈1000）
- Scroll frame 低耗时
结果：
- DOM 堆积导致卡顿这条路被锁死
- 超长文档性能稳定
3️⃣ 版本管理模型（核心亮点）
Block Version
- 每个块可独立版本化
- 内容哈希可用于 diff 优化
Document Version
- 文档是 block version 的有序组合
- 发布版本锁定一组 block 引用
- 默认指向 latest
优势：
- O(改动块数) diff
- 可回滚
- 不需要复制整篇文档
- 超大文档 diff 不再灾难
4️⃣ 发布与未发布双态
- Draft（编辑态）
- Published（发布态）
- 发布版本用于 SEO 站点
- 发布版本可追溯
发布站架构：
- Nuxt SSR
- 首屏渲染部分块
- 客户端按需水合
- SEO 与性能折中方案
5️⃣ 企业级功能
- 工作空间
- RBAC 权限模型
- 文档级角色
- 评论系统
- 标签
- 收藏
- 搜索
- 资产上传
- 日志审计
- 会话管理
- 软删除 + 可恢复
这部分体现的是工程成熟度，而不是功能堆叠。
⚙ AI 协作开发认知总结
1️⃣ 事实
约 90% 代码由 Codex / AI 生成
自己负责：
- 架构设计
- 数据模型设计
- 技术选型
- 代码审计
- 性能优化
- 功能测试
- 问题定位
- 方案迭代
2️⃣ 关键认知
AI 不能替代：
- 架构判断
- 边界思考
- 性能权衡
- 风险控制
- 数据一致性设计
- 版本模型设计
AI 可以放大：
- 编码效率
- 原型搭建速度
- 重复性代码生成
3️⃣ 分水岭
💩 级 AI 使用：“帮我做一个网站”
工程级 AI 使用：在规模、性能、权限、版本、发布约束下设计系统
核心区别：
- 是否有系统边界意识
- 是否有规模意识
- 是否能识别 AI 生成代码的问题
- 是否能兜底
4️⃣ 真实能力体现
真正能力不是：
- 手写多少代码
而是：
- 是否能为系统结果负责
- 是否能在规模下稳定运行
- 是否理解为什么这么设计
💼 对求职的价值
1️⃣ 项目强信号
- 大规模性能优化
- 虚拟化渲染
- 块级版本管理
- 发布模型设计
- SEO + SSR 权衡
- 企业权限模型
- 审计与软删除
这已经是系统设计级别项目。
2️⃣ 面试可展开点
- 为什么不用全量 DOM
- 为什么版本设计成块级
- diff 如何做到 O(改动数)
- 发布模型如何保证一致性
- SSR 与性能如何权衡
- 如何避免 Long Task
- 权限如何建模
这是可聊 30 分钟以上的项目。
3️⃣ 真正价值总结
面试官关心的不是：
- 代码是否逐字手写
而是：
- 你是否具备工程判断能力
- 是否能控制复杂系统
- 是否能解决真实问题
- 是否能为结果负责
🧩 个人成长总结
这段经历体现：
- 深度学习 JS 带来的底层理解
- 对边界情况的敏感
- 对性能问题的重视
- 工程化思维形成
- 工具链熟练使用
- Debug 能力提升
- 架构思维建立
- AI 协作能力形成
核心认知：AI 放大的是认知水平，不会替代工程判断
🔥 最终总结一句话
这个项目已经从：“对标语雀的练习项目”
进化为：“一个为超大规模知识管理设计的可嵌入式内容引擎”
而你从：“写代码的人”
进化为：“能设计系统并驾驭 AI 的工程师”