重拾前端技能为你的职业前程保驾护航

前言

最近自己身边有好几个小伙伴由于各种原因（个人，疫情等都有）离职了，但是今年好像都是行情不太好的一年。许多的小公司都倒闭了，大公司也裁员，所以离职的小伙伴好几个都在家待职 1-3 个月。由于自己身边的小伙伴当前处于这样一种状况，在职（活在舒适区）的我也有了一点危机感。于是自己整理里一份前端清单来巩固自己的前端知识，以便差缺补漏。

基础篇

前端入门必知-结构、表现、行为。

HTML - 结构

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。(摘自维基百科)

HTML常见面试题（比较多列举部分）：

DOCTYPE 的作用是什么？
你是如何理解语义化的？
meta viewport 的作用？
你用过哪些 HTML 5 标签？
行内元素、块级元素以及空元素都有哪些（列举）？
...

CSS - 表现

层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。(摘自维基百科)

CSS相关的面试题（比较多列举部分）：

盒子模型
CSS权重如何计算？
栅栏布局
让一个元素上下左右居中
清除浮动的方式
什么是BFC，如何解决？
CSS3动画系列
...

JavaScript - 行为

JavaScript（通常缩写为JS）是一种高级的、解释型的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象程序设计，命令式编程，以及函数式编程。(摘自维基百科)

JavaScript相关的面试题（比较多列举部分）：

数据类型？
值传递和引用传递？
实现继承的几种方式？（几种继承方式的区别）
类型转换
this 问题
闭包
深浅拷贝
原型
...

基础进阶篇

ES6

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的标准。

ES6相关的知识点：

var、let、const
新增的数组、对象方法
promise
Class
Proxy
async await
Generator
...

TypeScript

JavaScript的严格超集。（简称：TS）

TypeScript相关的知识点：

和 JavaScript 的区别
TS 特性和优点、缺点
数据类型
接口
T类
装饰器
TSD
Declare
泛型
...

Sass/Less/Stylus

CSS 预处理器：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

框架篇

前端三驾马车

React.js

一个用于构建用户界面的 JavaScript 库。

React.js相关的知识点：

生命周期
通信（父子组件，兄弟组件，跨多层）
HOC 和 mixins
Hooks
事件机制
diff 原理
redux
...

Vue.js

渐进式 JavaScript 框架

Vue.js相关的知识点：

生命周期
通信（父子组件，兄弟组件，跨多层）
extend
mixin 和 mixins
computed 和 watch
keep-alive
v-show 与 v-if
响应式原理
NextTick
Vuex
diff
Vue 3
...

Angular

一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

（由于个人学习使用 Angular 的时候还是 1 和 2 版本，如今版本差异太大，此处暂时不做总结举例）

工具篇

打包工具

Webpack
gulp
grunt
rollup
Parcel
...

测试工具

Mocha
Jest
Chai
...

网络协议、数据结构、算法等

网络协议

UDP
TCP
HTTP
HTTP/2

数据结构

堆
栈
队列
链表
树
集合（并、合、差）
...

算法

位运算
排序
链表
树
...