all-of-frontend/README.md
2021-09-14 22:37:26 +08:00

19 KiB
Raw Blame History

Fucking Frontend

Commit Stars Forks GitHub visitor badge

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

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

这是什么?

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

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

如何使用

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

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

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

目录

学习路径

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

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

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

前端核心知识点

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

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

JS

数据类型

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

类型判断

类型判断有好几种方式,分别为:

类型转换

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

this

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

务必自己总结规则!

闭包

作用域

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

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 三端跨的框架, uniapptaro 是其中做的比较出彩的两个框架。当然在 taro3.0 之前以下主要是说小程序taro 跟 uniapp 都是使用编译时做更多的事情,编译成小程序能够运行的代码。

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

微前端

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

优势:

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

框架:

推荐文章:

十五万字面试资料

在线阅读

前端工程化文章

React 原理

在线阅读,另外笔者最近也在准备更新这部分内容,有兴趣的读者可以持续关注。

前端进阶文章

更多文章

因为笔者文章实在太多,足足已经写了 150 篇+ 原创,更多文章欢迎大家到【公众号】里阅读。

个人信息

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