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

前言

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

基础篇

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

HTML - 结构

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

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

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

CSS - 表现

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

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

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

JavaScript - 行为

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

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

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

基础进阶篇

ES6

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

ES6相关的知识点：

1. var、let、const
2. 新增的数组、对象方法
3. promise
4. Class
5. Proxy
6. async await
7. Generator
8. ...

TypeScript

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

TypeScript相关的知识点：

1. 和 JavaScript 的区别
2. TS 特性和优点、缺点
3. 数据类型
4. 接口
5. T类
6. 装饰器
7. TSD
8. Declare
9. 泛型
10. ...

Sass/Less/Stylus

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

框架篇

前端三驾马车

React.js

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

React.js相关的知识点：

1. 生命周期
2. 通信（父子组件，兄弟组件，跨多层）
3. HOC 和 mixins
4. Hooks
5. 事件机制
6. diff 原理
7. redux
8. ...

Vue.js

渐进式 JavaScript 框架

Vue.js相关的知识点：

1. 生命周期
2. 通信（父子组件，兄弟组件，跨多层）
3. extend
4. mixin 和 mixins
5. computed 和 watch
6. keep-alive
7. v-show 与 v-if
8. 响应式原理
9. NextTick
10. Vuex
11. diff
12. Vue 3
13. ...

Angular

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

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

工具篇

打包工具

1. Webpack
2. gulp
3. grunt
4. rollup
5. Parcel
6. ...

测试工具

1. Mocha
2. Jest
3. Chai
4. ...

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

网络协议

1. UDP
2. TCP
3. HTTP
4. HTTP/2

数据结构

1. 堆
2. 栈
3. 队列
4. 链表
5. 树
6. 集合（并、合、差）
7. ...

算法

1. 位运算
2. 排序
3. 链表
4. 树
5. ...

扩展

Nodejs、ReactNative、Flutter、小程序、Git、Svn...

【技术创作101训练营】