前端进阶路线分享

本是古典何须时尚 2023-01-18 13:29 40阅读 0赞

> 本文会跟随技术发展和我个人技术水平的提升定期更新。上次更新时间：2021 年 03 月 27 日。在本公众号后台回复「入门」或「进阶」即可获取最新版前端学习路线。

我经常会看到很多同学在学习前端的时候比较迷茫，不知道到底应该以怎样的学习路线来入门和进阶前端领域。每次遇到这种问题我也会分享一下自己的学习经验，但是发现这是一个问得非常多的一个共性问题。

作为程序员，肯定是不能容忍重复无味的劳动的，因此我就系统地总结分享一下我的前端学习路线，本文为「前端进阶」部分，希望对你能够有所帮助。

## 前言 ##

前端学习是一个螺旋上升的过程，既要反复地看书，也要抓紧时间进行实战。只看书，看了就会忘，所以必须将看书和写代码相结合。我把前端入门和前端进阶一共分为六个阶段，本文为「前端进阶」，仅包括后三个阶段。想看前端入门路线的请在 **本公众号后台 **回复关键字「**入门**」。

提前声明，本文只是一个学习路线分享，我本人也正在前端进阶的过程当中，所以只是分享自己的学习方式方法，仅供参考，欢迎加我微信批评指正或者交流学习。

在前端入门中，我分享了 HTML + CSS，JavaScript 和 前端框架三个学习阶段，下面就开始前端进阶的学习吧！

## 前端进阶 ##

在学好 HTML，CSS 和 JavaScript 三大件，并入门了前端框架，能够基于已学内容开发一个小项目进行实战，把这些学习并理解透彻以后，也就算真正地入门前端了，接下来就开始前端进阶之路。

### 阶段四：语言基础进阶 ###

这个阶段就是加深对编程语言的理解，多阅读进阶书籍，有能力的推荐去阅读 ECMAScript 规范：http://ecma-international.org/ecma-262/。在这里我可能就推荐一些我看过或者我买了还没看完的书籍，在进阶阶段，只需要指出方向，具体的学习方法相信大家也都明白了。

**进阶必读书籍：**

*  《你不知道的 JavaScript 上/中/下卷》：必买书籍，将 JavaScript 的疑难问题，细节知识一网打尽。原版是 GitHub 上开源的电子书，英语水平高的可以去读英文原版。
 *  《JavaScript 忍者秘籍》：深入讲解 JavaScript 的核心知识点，必买书籍。
 *  《了不起的 JavaScript 工程师》：从宏观来看 JavaScript 语言，以及前端工程师所需要掌握的一些技能，推荐阅读。
 *  《JavaScript 函数式编程指南》：学习函数式编程思想
 *  《JavaScript 函数式编程》：也是一本函数式编程思想的好书
 *  《JavaScript 设计模式》：学习 JavaScript 设计模式，推荐阅读
 *  《JavaScript 设计模式与开发实践》：另一本同等分量的设计模式书籍，推荐阅读
 *  《锋利的 jQuery》：jQuery 现在已经很少有人用了，除非是很老的项目或者写小东西。不过这本书值得买，学习 jQuery 的优秀思想，还可以去学习一下它的源码，对你进阶很有帮助。

**进阶选读书籍：**

*  《高性能 JavaScript》
 *  《JavaScript Web 应用开发》
 *  《深入理解 JavaScript》
 *  《JavaScript 经典实例》
 *  《JavaScript 面向对象编程指南》
 *  《JavaScript 编程精粹》

学习 TypeScript。JavaScript 是一门弱类型语言，你声明一个变量，既可以将字符串赋值给它，也可以将数字等复制给它，这在大型项目开发中很容易因为数据类型出 bug。基于此类种种原因，就出现了 TypeScript。你有了 JavaScript 的基础，学习 TypeScript 很容易，它只是一种语法糖，也就是一种另一种写 JavaScript 的方式。推荐以下书籍：

*  《深入理解 TypeScript》
 *  《TypeScript 实战指南》
 *  《TypeScript 实战》

### 阶段五：框架和学习边界进阶 ###

通过阶段三，你已经掌握了前端框架的基本使用，开发一个完整项目的流程。那么在框架和学习边界进阶阶段，你就可以：

*  学习框架周边的生态，社区总结出来的优秀组件，以及各种好用的工具库。
 *  造一些自己的轮子，使用框架搭建自己的开源项目
 *  学习 Webpack，Gulp，Babel，ESLint 等工具的使用、思想和原理
 *  带着问题去阅读框架源码，学习性能优化
 *  养成良好的编程习惯
 *  扩展技术边界，学习 Node.js 等后端相关技能
 *  ……

对于这里的源码阅读我要强调一点，阅读源码不是说让你去读懂例如 React 框架的每一行代码，而是结合其代码整体逻辑加上部分细节分析，理解其实现和工作原理，以帮助你更好地理解其设计理念，更好地使用它开发项目，并避免错误地使用。而且现在社区有很多源码分析文章，你可以将源码阅读和多篇分析文章结合起来，理解起代码来会事半功倍。

**推荐阅读书籍**：

以下推荐的书籍都是比较出名的书籍，你可以根据自己的技能树，选择所需要的书籍进行阅读。并不是一字不差地整本阅读，而是在每本书中学习自己所需要的部分。很多都是非常著名的好书，有精力尽量买来学习。

**Webpack 相关：**

*  《深入浅出 Webpack》
 *  《Webpack 实战：入门、进阶与调优》

**React 相关：**

*  《深入 React 技术栈》
 *  《深入浅出 React 和 Redux》
 *  《Redux 实战》
 *  《React 学习手册》
 *  《React 快速上手开发》
 *  《React 设计模式与最佳实践》

**Vue 相关：**

*  《Vue.js 实战》
 *  《Vue.js 开发实战》
 *  《深入浅出 Vue.js》
 *  《Vue.js 权威指南》
 *  《Vue.js 从入门到项目实战》
 *  《Vue.js 前端开发基础与项目实战》
 *  《Vue.js 项目开发实战》
 *  《Vue.js 快速入门》
 *  《Vue.js 前端开发》

**Node.js 相关：**

*  《狼书卷1》
 *  《狼书卷2》
 *  《Node 学习指南》
 *  《了不起的 Node.js》
 *  《深入浅出 Node.js》
 *  《Node.js 实战》
 *  《Node.js 开发指南》
 *  《Node 即学即用》
 *  《Node 与 Express 开发》

**样式和布局相关：**

*  《Bootstrap 实战》
 *  《Bootstrap 用户手册》
 *  《响应式 Web 设计：HTML5 与 CSS3 实战》

**性能相关：**

*  《Web 性能权威指南》
 *  《高性能网站建设指南》

**PWA 相关：**

*  《PWA 开发实战》
 *  《PWA 实战：面向下一代的 Progressive Web APP》

**其他：**

*  《SVG 精髓》
 *  《深入理解 SVG》
 *  《前端架构设计》
 *  《重构：改善既有代码的设计》
 *  《同构 JavaScript 应用开发》

### 阶段六：计算机基础知识进阶 ###

编程编程，万变不离其宗，那就是计算机基础知识，算法、数据结构、计算机原理、网络等内容。在这里我只推荐最经典的好书，每一本都是必读书籍。学好这些内容，大厂任你选。

**数据结构和算法：**

*  《剑指offer》
 *  《程序员面试金典（第 6 版）》
 *  《编程之美》
 *  《漫画算法》
 *  《算法图解》
 *  《程序员代码面试指南》
 *  《大话数据结构》
 *  《趣学算法》
 *  《学习 JavaScript 数据结构与算法》
 *  《数据结构与算法：JavaScript 描述》
 *  《算法（第四版）》
 *  《算法导论》
 *  《算法竞赛入门经典（第二版）》
 *  《算法竞赛入门经典 训练指南》

**计算机网络：**

*  《HTTP/2 基础教程》
 *  《HTTPS 权威指南》
 *  《计算机网络：自顶向下方法》
 *  《图解 HTTP》
 *  《图解 TCP/IP》
 *  《TCP/IP 详解》
 *  《UNIX 网络编程》

**操作系统：**

*  《深入理解计算机系统》
 *  《现代操作系统》
 *  《UNIX 环境高级编程》
 *  《The Linux Programming Interface》

**编程思想：**

*  《代码大全》

**编译原理：**

*  《编译原理》

**产品思想：**

*  Web Fundamentals: https://developers.google.com/web/fundamentals/

## 总结 ##

至此，你已经基本完成了前端开发从入门到进阶，相信你对之后再学什么、怎么学已经了如指掌。希望我的分享对你有帮助，如果你觉得有用，可以收藏本文，并分享给你有需要的朋友。让我们一起学习，共同进步！