前端指南 ​

站点

• https://deepjs.cn
• https://deepjs.netlify.app
• https://deepjs.vercel.app

基础知识 ​

1. 计算机基础
   1. 网络通信-HTTP/1.1, HTTP/2, HTTP/3
   2. 数据结构与算法
   3. 设计模式
   4. 安全
2. 前端基础
   1. HTML
   2. CSS
   3. JavaScript
      1. ECMAScript 新特性(ES6~ES2023）
      2. this 与作用域
      3. 继承
      4. 事件机制
      5. 异步编程
      6. 模块化
      7. 函数式编程
   4. TypeScript
      1. 基础
      2. 进阶
3. 浏览器
   1. WebAPI
   2. 多进程架构
   3. 渲染机制

框架原理 ​

• React
• Vue
• 组件库
  • Ant Design Mobile, Ant Design
  • vant, element-ui
• umi

路由 ​

• hash, history
• vue-router
• react-router

状态管理/数据流方案 ​

仅仅有 UI 的组件化还不够，还需要整合状态管理/data-flow 数据流方案，才能完成项目应用。

• vuex, pinia
• redux
  • @reduxjs/toolkit, dva
• valtio
• xState

应用开发 ​

• Hybrid 通信原理
• 移动端常见兼容性问题
• 常见解决方案（响应式, 滚动加载, 虚拟滚动等）

前端工程化 ​

1. 工程搭建（环境配置、脚手架）
2. 版本控制（Git 工作流、版本管理规范、代码提交规范, Gitlab）
3. 代码质量（编码规范、静态代码检查）
4. 通用性（构建工具、脚手架、SDK、基础库、组件库、工具类库等框架设计，构建优化-体积/速度）
5. 测试保障（自动化测试、E2E 测试、单元测试、测试覆盖率、测试报告、质量巡检）
6. CI/CD 流程设计（代码检查、测试、打包、部署，持续集成、持续交付/持续部署、灰度发布，Jenkins, Docker）
7. APM 应用性能管理（性能、异常、白屏、API 和资源的监控, 资源容灾）
8. 用户行为分析（业务埋点、统计上报、坑位跟踪）
9. 前端性能优化（加载链路优化、加载体积优化、感官体验优化）

构建工具 ​

• gulp, webpack, babel, rollup
• esbuild(go), swc(rust)
• vite, bun(zig), rspack(rust), turbopack(rust)
• father

前端微服务 ​

• 基座、路由与生命周期
• 隔离 sandbox
• 应用通信
• qiankun

管理知识 ​

1. 思维模型
   1. 结构化思维
   2. 四象限法-时间管理
   3. PDCA 循环
   4. GROW 法
   5. SMART 原则-目标管理
   6. STAR 分析法-关键事件
   7. 5W2H 分析法
   8. SWOT 分析法-企业战略制定
   9. WBS 任务分解法
2. 团队管理
3. 项目管理

最佳实践 ​

• 请求封装
• 跨域请求
• 浏览器兼容性
• 异步并发控制
• Hybrid 通信及原理
• 上拉刷新/滚动加载下一页
• 虚拟滚动
• 防止双次点击
• HTTP 缓存配置

其他 ​

• 权限管理, 国际化, SSR, 低代码, 动画, Node 框架
• 图形, 容器, K8S, 编辑器, Serverless
• Blog
• 低代码: 通用表单设计、通用布局设计、通用页面设计、JSON Schema 协议设计等