前端学习架构

1,482次阅读
没有评论

一、总体蓝图（系统架构图）

flowchart LR
  subgraph Sources[ 资源源头 ]
    A[ 官方文档 \nMDN, web.dev, W3C] 
    B[ 社区博客 / 媒体 \nSmashing, dev.to]
    C[ 课程平台 \nfreeCodeCamp, Frontend Masters]
    D[ 工具 / 速查 \nCan I use, DevDocs]
    E[ 视频 / 播客 \nYouTube, Pod]
  end

  subgraph Ingestion[ 采集层 ]
    F[RSS/Atom 拉取 ]
    G[API 抓取 ]
    H[ 手动提交 / 表单 ]
  end

  subgraph Processing[ 处理层 ]
    I[ 内容规范化 \n(标题 / 摘要 / 格式)]
    J[ 去重与聚合 \n(URL 指纹 / 相似度)]
    K[ 质量评估 \n(规则 + 打分)]
    L[ 分类与标签 \n(NLP/ 关键词 / 人工)]
  end

  subgraph Storage[ 存储层 ]
    M[(Postgres/SQLite)]
    N[(向量库 \n( 可选，用于语义搜索))]
    O[(对象存储 \n 封面 / 截图)]
  end

  subgraph API[ 服务层 ]
    P[GraphQL/REST]
    Q[ 全文 / 向量搜索 ]
    R[Webhook/ 订阅 ]
  end

  subgraph UI[ 前端展示 ]
    S[ 目录页 / 筛选器 ]
    T[ 资源详情 ]
    U[ 榜单与精选 ]
    V[ 提交入口 / 纠错 ]
    W[ 后台 CMS]
  end

  Sources --> Ingestion --> Processing --> Storage --> API --> UI

二、信息架构（站点地图）

graph TD
  Home[ 首页：精选、最新、排行榜 ]
  Cat[ 分类：HTML/CSS/JS/ 框架 / 工程化 / 性能 / 可访问性 / 测试 / 面试 ]
  Tags[ 标签：React, TypeScript, 性能优化...]
  Guides[ 学习路径 / 路线图 ]
  Resource[ 资源详情页 ]
  Submit[ 提交资源 / 纠错 ]
  About[ 关于 / 贡献指南 ]
  Home --> Cat --> Resource
  Home --> Tags --> Resource
  Home --> Guides --> Resource
  Home --> Submit
  Home --> About

三、核心数据模型（ER 图 + 字段建议）

erDiagram
  RESOURCE ||--o{ RESOURCE_TAG : has
  RESOURCE }o--|| PROVIDER : from
  RESOURCE }o--o{ CATEGORY : belongs
  RESOURCE ||--o{ RATING : scored_by
  RESOURCE ||--o{ SNAPSHOT : captures

  RESOURCE {
    uuid id
    string title
    string url
    string type  "article|doc|course|tool|video|cheatsheet"
    text   summary
    string level "beginner|intermediate|advanced"
    string language "zh|en|..."
    string format "text|video|interactive"
    string price "free|paid|mixed"
    int    quality_score
    int    popularity_score
    date   published_at
    date   last_seen_at
    boolean is_official
    jsonb  metadata  "时长、作者、章节数、框架版本等"
  }

  PROVIDER {
    uuid id
    string name
    string site
    string region
    string contact
    boolean is_verified
  }

  CATEGORY {
    uuid id
    string name
    string slug
  }

  RESOURCE_TAG {
    uuid id
    string tag
  }

  RATING {
    uuid id
    uuid user_id
    uuid resource_id
    int  upvote
    int  score "1-5"
    text comment
    date created_at
  }

  SNAPSHOT {
    uuid id
    uuid resource_id
    string image_url
    date captured_at
  }

排序权重（可直接实现）

  • final_score = 0.45*quality_score + 0.35*popularity_score + 0.2*recency_boost
  • recency_boost = exp(-days_since_update / 90)（近 3 个月更有权重）
  • 加权白名单：is_official ? +10 : +0
  • 去重：URL 规范化 + simhash(title+summary) 相似度阈值

四、采集与质量评估规则（精简可执行）

采集

  • RSS 优先（速度 + 合法），其次公开 API，最后人工提交（表单）。
  • 规范化：拉取标题、摘要、语言、发布时间、作者、封面、主题词。
  • 截图：首屏截图（可选，用于卡片展示）。

质量评估（示例 Heuristics）

  • 页面可访问性分（Lighthouse a11y ≥ 80 加 2 分）
  • 内容深度：字数 / 章节 / 是否含代码示例 / 是否有演示仓库
  • 可信度：is_official、Provider 是否验证、是否长期维护
  • 新鲜度：最近更新是否 ≤ 180 天
  • 社交信号：Star/ 赞 / 阅读量阈值映射到 0-10

五、前端页面与交互要点

  • 筛选器 ：分类、标签、难度、语言、格式、价格、官方 / 社区、最近更新。
  • 卡片 ：标题、出处徽标、简述、难度 / 时长 / 标签、上次更新、评分。
  • 榜单 ：本周热门、年度最佳、冷门高质。
  • 路线图 ：初级→中级→高级模块化路径，资源自动按分值填充坑位。
  • 可达性 ：键盘可操作、深 / 浅色模式、语义化标签。
  • 搜索 ：关键词 + 语义补全（向量检索可选）。

六、分类清单

以下是高权威的类别与样例资源；

基础与规范

  • HTML/CSS/JS 基础：MDN Web Docs、web.dev（Google）、W3C 规范解读
  • 现代 CSS：Modern CSS、Smol CSS、CSS Tricks（历史文章宝库）
  • 兼容性：Can I use、MDN Compat Data

框架与生态

  • React：官方文档、React.dev Beta Docs、TanStack（Query/Router）
  • Vue：vuejs.org、Vue School（教程集合）
  • Svelte：svelte.dev、Svelte Society
  • Next.js / Nuxt：官方文档、公式示例仓库
  • 构建工具：Vite、Webpack、Rollup、esbuild 官方文档

工程化

  • TypeScript：官方手册、TypeScript Deep Dive
  • 包管理：pnpm、npm、Yarn 文档
  • 代码质量：ESLint、Prettier、Husky、lint-staged

性能与可访问性

  • 性能优化：web.dev/fast、PageSpeed Insights 指南
  • 可访问性：WAI-ARIA、Deque University 笔记、Axe 工具教程

测试

  • 单元 / 端到端：Jest、Vitest、Testing Library、Playwright、Cypress

网络与安全

  • 网络基础：HTTP/HTTP2/HTTP3、Service Worker、Workbox
  • 安全：OWASP Cheat Sheet、CSP 指南

UI/ 设计系统

  • 设计系统：Material Design、Carbon、Ant Design、Radix UI
  • 图形与可视化：D3、ECharts、Chart.js 文档与教程

学习路径与课程

  • freeCodeCamp、Frontend Masters、Egghead、Coursera（精选前端专修）
  • 优质博客 / 媒体：Smashing Magazine、CSS Wizardry、web.dev/blog、dev.to 前端精选

工具与速查

  • DevDocs、TLDR Pages、Regex101、Bundlephobia、unpkg、jsDelivr

小贴士：把“官方文档 / 规范 / 工具速查”设为更高权重，保证列表不被“热点教程”淹没。

七、总结

  1. 建库 ：按上面的 ER 模型创建表；先插入分类 / 标签基础数据。
  2. 导入种子 ：把“分类清单 + 示例站点”导入为 RESOURCE（打 is_official 标记）。
  3. 采集器 ：做一个 RSS 拉取器（cron），写规范化与去重逻辑。
  4. 评分器 ：实现 final_score，并定期重算（新鲜度会衰减）。
  5. API：GraphQL/REST 暴露筛选、搜索、分页、榜单三个核心端点。
  6. 前端 ：先做卡片列表 + 筛选器 + 详情页；随后补路线图与提交通道。
  7. 运营 ：配置“用户提交→审核→发布”的后台工作流（轻量 CMS 即可）。

 0