19 KiB
Fucking Frontend
干爆前端。一网打尽前端学习、进阶、面试等各类内容，帮助大家一年内拿到期望的 offer！大家可以关注【公众号】获取最新内容或者加我【微信】提意见（别忘了点个 Star 咯）。
本仓库欢迎各位读者提交你认为不错的内容，直接开 PR 或者 Issue 都可。
这是什么？
这是一份笔者从自学前端逐步成长为大厂基架组资深前端开发所沉淀下来的资料，其中包含了前端体系化学习、进阶、面试等内容。
此资料适用于初中级进阶、高级查漏补缺。
如何使用
前端学习路径笔者会以计划的方式呈现，从基础到进阶内容都会涉及，并且会附带上笔者的一些解释以便读者们将知识连贯起来，从而建立自己的知识体系而不是单独记忆松散的知识点。
推荐大家 Star 并 Fork 本项目（点击仓库顶部右上角按钮），然后 git clone 到本地后从上至下逐步完成学习计划。
当然除了前端学习路径，笔者还提供了热门技术原理解析、工程化体系学习、Github 上的优秀资料等内容供大家自行选择，读者们可以挑选感兴趣的内容自行学习。
目录
学习路径
前端知识点很多这是公认的事情，但是我们确实没必要把所有知识都去学习，那样只会贪多嚼不烂。我们能把核心知识点、热门技术以及工作中需要用到的知识学好就已经能打败大部分前端工程师了，剩下的大家可以自行选择学习内容。
接下来的内容笔者会按照优先级高低来排布学习路径的目录，大家只需从上到下顺序学习即可。
为了保证大家学到的知识是正确的，下文中的文档资料笔者都使用了英文版本。因为在审核资料的过程中笔者发现不少中文文档都存在翻译错误或者过时的情况。
前端核心知识点
前端核心知识点分为三块，分别为 HTML、CSS、JS，其中最重要的当然是 JS 了。
如果你还是一位初学者，推荐先自行完整阅读一至二本书后再按照该计划学习。关于书籍笔者推荐以下两本：
JS
数据类型
JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增的 bigint。
类型判断
类型判断有好几种方式，分别为：
-
typeof -
instanceof -
Object.prototype.toString -
isXXX，比如isArray -
文档
-
推荐文章，Issue 也挺重要
类型转换
类型转换算是 JS 中情况繁杂且容易出错，但是开发中还经常会遇到的知识点。强行全部记忆容易遗忘，推荐记忆及练习开发中的常见情况。
- 文档
- 推荐文章
this
this 算是不少初学者容易搞混的一个知识点，但是它很重要，务必掌握。
- 文档
- 推荐文章
务必自己总结规则！
闭包
- 文档
- 推荐文章
- You Don't Know JS 第二版中对于闭包的解释，该版本暂无中文翻译，读者可用 DeepL 进行翻译。
- JavaScript 的静态作用域链与“动态”闭包链
- 知乎中关于闭包的讨论
作用域
作用域是指程序中定义变量的区域，该位置决定了变量的生命周期，也就是变量和函数的可访问范围。
- 文档
- 推荐文章
new
new 操作符可以帮助我们构建出一个实例，并且绑定上 this。
变量提升&函数提升
变量提升（Hoisting）被认为是， Javascript 中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。
为什么会出现变量提升？ 因为 JavaScript 在运行的时候会有 编译和和执行两个过程，在它编译的时候，会对全局进行搜索，所有的变量和函数声明会被移至其作用域的顶部，而其它的语句不会改变它们的顺序，所以在编译阶段，先执行了变量的声明。
我们声明一个函数的时候如果在声明函数的前面调用这个函数也是可以执行的，因为这个函数在解析的时候函数声明会被移至其作用域的顶部 。函数提升只提升函数声明，不会提升函数表达式。
// 普通函数声明
console.log(Gangster("yck")); // yck undefined
function Gangster(name) {
console.log(name);
}
// 声明式函数
console.log(Gangster("yck")); // Gangster is not a function
var Gangster = function (name) {
console.log(name);
};
在变量赋值前，函数声明依旧是函数声明,当变量赋值后，函数声明被会被相同名字的变量覆盖，所以说函数提升的优先级大于变量提升
function Gangster() {
console.log("大佬");
}
console.log(Gangster); // Function: Gangster
Gangster(); // 大佬
var Gangster = "我是变量的值";
console.log(Gangster); // 我是变量的值
用 var 声明变量时会将声明提升到函数或全局作用域的顶部。但是 let 或者 const，会将声明放进 TemporalDeadZone，简称 TDZ(暂时性死区)，只有 JavaScript 执行到当前变量声明这句语句时，才能使用这个变量。
console.log(yck); // undefined
var yck = "大佬";
console.log(typeof yck); //ReferenceError
let yck = "大佬";
Class(类)
class 只是原型链的语法糖，与其它语言中的类不是同一样东西。
- 文档
- 推荐文章
事件循环
大家都知道 JS 是一门单线程的非阻塞的脚本语言。这也就意味着，代码在执行的任何时候只有一个主线程来处理所有的任务。所以弄懂事件循环机制对我们学习 JS 至关重要。
- 文档
- 推荐文章
- 事件循环可视化
继承
继承是面向对象语言（Object-Oriented Language）三大特征之一，在 JS 中也占有非常重要的地位。而想要实现继承有多种方式，它们都有各自的优缺点。
- 文档
- 推荐文章
跨端框架
跨端的最主要的含义就是一套代码多端运行，减少重复劳动
目前看来，国内比较流行的是小程序, H5, App 三端跨的框架， uniapp 及 taro 是其中做的比较出彩的两个框架。当然在 taro3.0 之前（以下主要是说小程序），taro 跟 uniapp 都是使用编译时做更多的事情，编译成小程序能够运行的代码。
而在 taro3.0 之后变成了与 remax 相同的思想，在运行时做更多的事情，保证了原框架代码能够完全使用，而不需要为了转换成其他小程序时做兼容。
微前端
是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。
优势：
- 代码库更小，更内聚、可维护性更高
- 松耦合、自治的团队可扩展性更好
- 渐进地升级、更新甚至重写部分前端功能成为了可能
- 独立开发部署，缩小变更范围，进而降低相关风险
框架：
推荐文章：
- 从零到一实现企业级微前端框架，保姆级教学
- What Are Micro Frontends?
- Bifrost 微前端框架及其在美团闪购中的实践
- 每日优鲜供应链前端团队微前端改造
- 微前端在美团外卖的实践
- How We Build Micro Frontends
- Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit
十五万字面试资料
前端工程化文章
- 这才是你需要了解的性能优化呀！
- 绝了，没想到一个 source map 居然涉及到那么多知识盲区
- 揭秘自动化部署系统的核心原理
- 你知道 monorepo 居然有那么多坑么？
- 从零打造性能检测库
- 还在看那些老掉牙的性能优化文章么？这些最新性能指标了解下
React 原理
在线阅读，另外笔者最近也在准备更新这部分内容，有兴趣的读者可以持续关注。
前端进阶文章
- 这些 JS 新语法有点东西啊！
- 这个 React 小细节居然很多人都写错了？
- 反直觉！大部分人并不知道浏览器到底是如何下载资源的
- 好家伙，这些写 CSS 的新姿势你还不知道？
- 这个异步问题你肯定遇到过，但是会解决的并不多
- 前端前沿观察，Cookie 居然可以这样整了
- Promise 你可能真的还没用明白（续集进阶版）
更多文章
因为笔者文章实在太多，足足已经写了 150 篇+ 原创，更多文章欢迎大家到【公众号】里阅读。
个人信息
| 微信扫码关注公众号，订阅更多精彩内容 | 加笔者微信进群与大厂大佬讨论技术 |
|---|---|
 |
 |