前端技术全景

前端技术栈的沉淀与总结，涵盖 JavaScript / TypeScript 核心进阶、主流框架源码分析、工程化工具链、可视化开发等领域。

---

React 核心原理

• 直接上手 React — React 开发快速入门
• 前端框架的理解 — 框架存在的意义与解决的问题
• React 和 Vue 描述页面的区别 — JSX vs 模板语法对比
• 前端框架的分类 — 命令式 / 声明式 / 运行时 / 编译时
• 虚拟 DOM — Virtual DOM 设计与性能权衡
• React 整体架构 — React 架构演进与 Scheduler / Reconciler / Renderer
• React 渲染流程 — 从触发更新到屏幕渲染的完整链路
• Fiber 双缓冲 — Fiber 架构与双缓冲机制
• MessageChannel — 宏任务调度与 requestIdleCallback 的关系
• Scheduler 调度普通任务 — 任务调度系统实现分析
• Scheduler 调度延时任务 — 延时任务与超时机制
• 最小堆 — 小顶堆在 Scheduler 中的应用
• React 中的位运算 — 位运算优化与 lane 模型
• beginWork 工作流程 — 从根节点开始的递阶段
• completeWork 工作流程 — 归阶段与 DOM 节点创建
• 图解 diff 算法 — 双端对比与 key 的作用
• commit 工作流程 — mutation / layout / passive 三个阶段
• Lane 模型 — 优先级管理与并发更新
• React 中的事件 — 合成事件系统与事件委托
• Hooks 原理 — useReducer / useState / useEffect 等 hooks 的 mount 与 update
• useState 和 useReducer — 状态管理的实现与对比
• effect 相关 hook — useEffect / useLayoutEffect / useInsertionEffect
• useCallback 和 useMemo — 性能优化 hooks 的缓存机制
• useRef — ref 工作流程与 ref 失控问题
• Update — Update 对象与 UpdateQueue 机制
• hook、UpdateQueue、Update 三者关系 — 状态更新链路深入分析
• 性能优化策略之 eagerState — 主动状态计算优化
• 性能优化策略之 bailout — 组件 bailout 机制与跳过渲染
• bailout 与 ContextAPI — bailout 对 Context 的影响
• 性能优化对日常开发启示 — 从 React 源码学到的性能思路

JavaScript 核心

• 数组循环函数 — forEach / map / filter / reduce 等数组迭代方法详解
• 字符串 API — 常用字符串方法及实用场景
• this 指向 — 箭头函数 / 普通函数 / call-apply-bind 绑定规则
• 数组去重 — 多种数组去重方案及性能对比
• 合并数组对象 — 深浅拷贝与对象合并策略
• 类型判断 — typeof / instanceof / Object.prototype.toString 完整判断方案
• 堆栈 — 调用栈与堆内存理解
• 深/浅克隆 — 结构化克隆 / JSON 序列化 / 递归实现
• 防抖/节流 — 高频事件优化方案及 lodash 实现原理
• 分时函数 — 大数据量渲染的分片策略
• Proxy 代理 — Proxy / Reflect 元编程与响应式原理
• Storage — Cookie / localStorage / sessionStorage 使用与区别
• 前端多线程 WebWorker — Worker 通信与计算密集型任务优化
• 数据实时：轮询技术方案有哪些 — 轮询 / SSE / WebSocket 方案对比

TypeScript

• 基础类型 — 类型系统入门与实用技巧
• 枚举与常量枚举 — 枚举类型的使用与编译差异
• interface 和 type — 类型别名与接口的选择策略
• 断言 — 类型守卫与类型断言最佳实践
• Class 类 — 类、继承、抽象类、修饰器
• 泛型 — 泛型约束与工具类型实战
• namespace 命名空间 — 模块化与命名空间的前世今生
• keyof 和 typeof — 索引类型查询与类型推导
• tsconfig 配置 — 编译器选项详解与工程配置

Vue

• draggable 组件封装 — 可拖拽组件实现
• 无缝滚动可拖动插件 — 跑马灯与拖拽交互
• 日历组件封装 — 日历组件设计与日期计算
• Echarts Map — 地图可视化开发实践
• tabs 组件心得 — 标签页组件设计经验
• 大屏开发心得 — 大屏适配与 WebSocket 实时推送
• 网站无滚动条组件 — 自定义滚动条实现
• 拖拽上传动画组件 — 拖拽上传与动画反馈
• 掘金同款支持复制 Markdown 编辑器 — 富文本编辑器封装
• 图标资产管理 — 前端图标方案对比与最佳实践
• 组件代码提示 Vetur — Vetur 插件配置与 VSCode 集成
• 虚拟滚动 — 静态与动态虚拟滚动的实现区别
• Element 官网代码显隐揭秘 — 代码块展开/收起实现原理

Vue3 系列

• 可拖动弹窗及二次确认弹窗组件 — Dialog + 拖拽 + 二次确认组合组件
• 涟漪动画效果组件 — 水波纹点击反馈动画实现
• Tree 组件 — 树形控件递归实现
• 上传取消与进度条 — 文件上传组件含进度跟踪
• Vue Playground 演练场源码解读 — Vue SFC Playground 源码解析（全四篇）

设计模式

• 发布订阅模式
• 监听者模式
• 工厂模式
• 单例模式
• 代理模式
• 装饰器模式
• 适配器模式
• 亨元模式
• 设计原则 — SOLID 原则与工程实践

D3.js 可视化

• 基础 API — 选择集、数据绑定、比例尺
• 折线图 / 柱形图 — 图表绘制与过渡动画
• 缩放与拖拽 — 交互式数据探索
• 框选与自定义扩展 — 区域选择与高亮联动
• 性能优化：数万节点绘制 — 拓扑图大规模渲染方案

工程化与工具链

• NPM 包管理 — 指令 / Scripts / 版本管理 / 发包
• Webpack 插件开发 — Compiler / Compilation 生命周期
• Babel 编译原理 — AST 操作、Generator、Types、Template
• Babel 实战：try-catch 包裹 — 自动异常处理埋点
• Babel 实战：国际化插桩 — 函数插桩国际化方案
• 自研 VSCode 插件 — 国际化翻译插件开发
• Jest 单元测试 — 测试框架配置与用例编写
• 代码规范 — ESLint / Husky / lint-staged 工程实践
• ESLint 配置 — 规则定制与插件开发
• Git 拦截 — pre-commit / commit-msg 钩子

微前端

• 什么是微应用？ — 微前端概念与适用场景
• qiankun 原理分析 — single-spa — 微前端框架核心架构
• qiankun 原理分析 — import-html-entry — 子应用加载机制
• qiankun 原理分析 — CSS 沙箱 — 样式隔离方案
• qiankun 原理分析 — JS 沙箱 — 全局变量隔离与 Proxy
• qiankun + Vue3 最佳实践 — 生产级配置与踩坑

其他

• Electron 桌面端开发 — 使用 Electron 跨平台桌面应用要点
• GitLab CI/CD — Runner / YML 关键字 / 变量 / 实战
• Nginx 与 Node 转发 — 反向代理与负载均衡
• Shell 自动化脚本 — Git 操作自动化与工作流优化
• Canvas 拾取方案 — Canvas 碰撞检测与事件系统
• MJS 与 JS 的区别 — ESM 模块系统解析

---

持续积累，构建完整的前端知识体系。