Fucking Frontend

干爆前端。一网打尽前端学习、进阶、面试等各类内容，帮助大家一年内拿到期望的 offer！大家可以关注【公众号】获取最新内容或者加我【微信】提意见（别忘了点个 Star 咯）。

本仓库欢迎各位读者提交你认为不错的内容，直接开 PR 或者 Issue 都可。

这是什么？

这是一份笔者从自学前端逐步成长为大厂基架组资深前端开发所沉淀下来的资料，其中包含了前端体系化学习、进阶、面试等内容。

此资料适用于初中级进阶、高级查漏补缺。

如何使用

前端学习路径笔者会以计划的方式呈现，从基础到进阶内容都会涉及，并且会附带上笔者的一些解释以便读者们将知识连贯起来，从而建立自己的知识体系而不是单独记忆松散的知识点。

推荐大家 Star 并 Fork 本项目（点击仓库顶部右上角按钮），然后 git clone 到本地后从上至下逐步完成学习计划。

当然除了前端学习路径，笔者还提供了热门技术原理解析、工程化体系学习、Github 上的优秀资料等内容供大家自行选择，读者们可以挑选感兴趣的内容自行学习。

目录

• Fucking Frontend
  • 这是什么？
  • 如何使用
  • 目录
  • 学习路径
  • 前端核心知识点
  • JS
    • 数据类型
    • 类型判断
    • 类型转换
    • this
    • 闭包
    • 作用域
    • 原型
    • new
    • 变量提升
    • Class(类)
    • 事件循环
    • 继承
    • 垃圾回收
  • 组件库
  • 跨端框架
  • 微前端
  • 十五万字面试资料
  • 前端工程化文章
  • React 原理
  • 前端进阶文章
  • 更多文章
  • 个人信息

学习路径

前端知识点很多这是公认的事情，但是我们确实没必要把所有知识都去学习，那样只会贪多嚼不烂。我们能把核心知识点、热门技术以及工作中需要用到的知识学好就已经能打败大部分前端工程师了，剩下的大家可以自行选择学习内容。

接下来的内容笔者会按照优先级高低来排布学习路径的目录，大家只需从上到下顺序学习即可。

为了保证大家学到的知识是正确的，下文中的文档资料笔者都使用了英文版本。因为在审核资料的过程中笔者发现不少中文文档都存在翻译错误或者过时的情况。

前端核心知识点

前端核心知识点分为三块，分别为 HTML、CSS、JS，其中最重要的当然是 JS 了。

如果你还是一位初学者，推荐先自行完整阅读一至二本书后再按照该计划学习。关于书籍笔者推荐以下两本：

• JavaScript 高级程序设计（第 4 版）
• JavaScript 忍者秘籍（第 2 版）

JS

数据类型

JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增的 bigint。

• 文档：
  • JavaScript 数据类型和数据结构

类型判断

类型判断有好几种方式，分别为：

• typeof

• instanceof

• Object.prototype.toString

• isXXX，比如 isArray

• 文档

  • typeof
  • instanceof
  • Object.prototype.toString

• 推荐文章，Issue 也挺重要

  • JavaScript 专题之类型判断(上)
  • JavaScript 专题之类型判断(下)

类型转换

类型转换算是 JS 中情况繁杂且容易出错，但是开发中还经常会遇到的知识点。强行全部记忆容易遗忘，推荐记忆及练习开发中的常见情况。

• 文档
  • ES 标准
    • 标准并不好读，如果读者英文水平欠佳，可以只阅读该小节内的表格内容。
  • 双等判断
• 推荐文章
  • You Don't Know JS 书中关于类型转换的一章节
  • 几种基本类型简单的类型转换
  • JavaScript 深入之头疼的类型转换(上)
  • JavaScript 深入之头疼的类型转换(下)

this

this 算是不少初学者容易搞混的一个知识点，但是它很重要，务必掌握。

• 文档
  • this
• 推荐文章
  • You Don't Know JS 书中关于 this 的第一章节
  • You Don't Know JS 书中关于 this 的第二章节
  • 深入理解 js this 绑定 ( 无需死记硬背，尾部有总结和面试题解析 )

务必自己总结规则！

闭包

• 文档
  • 闭包
• 推荐文章
  • You Don't Know JS 第二版中对于闭包的解释，该版本暂无中文翻译，读者可用 DeepL 进行翻译。
  • JavaScript 的静态作用域链与“动态”闭包链
  • 知乎中关于闭包的讨论

作用域

作用域是指程序中定义变量的区域，该位置决定了变量的生命周期，也就是变量和函数的可访问范围。

• 文档
  • 作用域
  • 块作用域
• 推荐文章
  • JavaScript 深入之词法作用域和动态作用域
  • JavaScript 深入之作用域链
  • Variable scope, closure，另有 中文翻译版
  • You Don't Know JS Yet: Scope & Closures
  • The battle between function scope and block scope

原型

• 文档
  • 原型
• 推荐文章
  • You Don't Know JS: this & Object Prototypes
  • 深入理解 JavaScript 原型
  • 深度解析原型中的各个难点
  • Prototypes in JavaScript 需自备梯子

new

new 操作符可以帮助我们构建出一个实例，并且绑定上 this。

• 文档
  • new
• 推荐文章
  • JS 的 new 到底是干什么的？
  • JavaScript 深入之 new 的模拟实现

变量提升

变量提升（Hoisting）可以将变量和函数在编译阶段放入内存，从而在执行阶段时在声明前使用。

• 文档
  • JS 变量提升
• 推荐文章
  • JavsScript 变量提升和函数提升
  • 我用了两个月的时间才理解 let
  • JavaScript Scoping and Hoisting

Class(类)

class 只是原型链的语法糖，与其它语言中的类不是同一样东西。

• 文档
  • Class
• 推荐文章
  • 理解 JavaScript 的类
  • Babel 是如何编译 Class 上
  • Babel 是如何编译 Class 下
  • 给 ES6 class 说句公道话
  • 应该在 JavaScript 中使用 Class 吗？

事件循环

大家都知道 JS 是一门单线程的非阻塞的脚本语言。这也就意味着，代码在执行的任何时候只有一个主线程来处理所有的任务。所以弄懂事件循环机制对我们学习 JS 至关重要。

• 文档
  • 事件循环
• 推荐文章
  • 这一次，彻底弄懂 JavaScript 执行机制
  • 一次弄懂 Event Loop
  • JavaScript 的工作原理，需自备梯子，另有 中文翻译版。
• 事件循环可视化
  • Loupe

继承

继承是面向对象语言（Object-Oriented Language）三大特征之一，在 JS 中也占有非常重要的地位。而想要实现继承有多种方式，它们都有各自的优缺点。

• 文档
  • 继承
• 推荐文章
  • JavaScript 深入之继承的多种方式和优缺点
  • JavaScript 中的继承，需自备梯子
  • JS 类继承，另有 中文翻译版

迭代器与生成器

• 文档
  • 迭代器与生成器
• 推荐文章
  • [译] 什么是 JavaScript 生成器？如何使用生成器？
  • Understanding Generators in ES6 JavaScript with Examples，需自备梯子
  • A Simple Guide to ES6 Iterators in JavaScript with Examples，需自备梯子

节流与防抖

节流指连续触发事件的情况下，在某个时间段内，函数只会执行一次。 防抖指在事件被触发后一定时间后再执行回调函数，如果在一定时间内，该事件又被重复触发，则重启计时。

• 推荐文章
  • 函数防抖与函数节流
  • 浅谈 JS 防抖和节流
  • Debounce – How to Delay a Function in JavaScript
  • Debouncing and Throttling in JavaScript

垃圾回收

JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动释放内存，这个过程被称为垃圾回收。另外我们主要学习 V8 引擎下的垃圾回收机制。

• 文档
  • 内存管理 & 垃圾回收
• 推荐文章
  • 深入理解 Chrome V8 垃圾回收机制，该文章的参考文献也可阅读下
  • GC in v8
  • JavaScript 工作原理：内存管理 + 处理常见的 4 种内存泄漏，另有中文版

HTML

CSS

Flex

• 文档
  • flex
• 推荐文章
  • A Complete Guide to Flexbox
  • Flexbox 布局中不为人知的细节

React

合成事件

合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。React 根据 W3C 规范 定义了合成事件。需要注意的是 v16 和 17 版本中的合成事件有差异。

• 文档
  • React 官方文档
• 推荐文章
  • 探索 React 合成事件
  • 大佬，怎么办？升级 React17，Toast 组件不能用了
  • What’s the Difference Between Synthetic React Events and JavaScript Events?，需自备梯子
  • React 17 removes event pooling in the modern browsers

Vue

组件库

组件库顾名思义指的就是将多个公共模块或者可复用的组件提取整合生成的一个仓库

知名度较广的组件库：

• antd
• elementUI

相关文档：

• lerna
• angular commit 规范
• yarn
• css variables

推荐文章：

• 从 0 到 1，搭建一个体系完善的前端 React 组件库
• 如何规范你的 Git commit？
• 基于 lerna 和 yarn workspace 的 monorepo 工作流
• FusionNext 可配置能力从 Sass 体系升级为支持 Css Variable

微前端

是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

优势：

• 代码库更小，更内聚、可维护性更高
• 松耦合、自治的团队可扩展性更好
• 渐进地升级、更新甚至重写部分前端功能成为了可能
• 独立开发部署，缩小变更范围，进而降低相关风险

框架：

• single-spa
• 蚂蚁-乾坤
• 淘系-icestark
• 字节-Garfish
• 京东-micro-app
• Bit

推荐文章：

• 从零到一实现企业级微前端框架，保姆级教学
• What Are Micro Frontends?
• Bifrost 微前端框架及其在美团闪购中的实践
• 每日优鲜供应链前端团队微前端改造
• 微前端在美团外卖的实践
• How We Build Micro Frontends
• Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit

跨端框架

跨端的最主要的含义就是一套代码多端运行，减少重复劳动

目前看来，国内比较流行的是小程序, H5, App 三端跨的框架， uniapp 及 taro 是其中做的比较出彩的两个框架。当然在 taro3.0 之前（以下主要是说小程序），taro 跟 uniapp 都是使用编译时做更多的事情，编译成小程序能够运行的代码。

而在 taro3.0 之后变成了与 remax 相同的思想，在运行时做更多的事情，保证了原框架代码能够完全使用，而不需要为了转换成其他小程序时做兼容。

• awesome-remax
• 美团自研 react 跨端
• 京东 taro

面试

日常充电

Github 优秀学习资料

作者信息

微信扫码关注公众号，订阅更多精彩内容	加笔者微信进群与大厂大佬讨论技术