给前端新人推荐的学习资源

发表于 | | 本文总阅读量 次

开始学习前端应该是去年的 10 月份，一晃一年过去了，个人觉得自己才刚刚踏入前端的大门，要学习的还有很多多。

部门里的一些新人以及想学前端的后端开发人员有时候会问我怎么学前端，我觉得学习这件事情主要还是要自身努力，但如果有别人推荐一些学习路径，那么就会事半功倍。就在这里把我这一年里收藏的资源记录下来，也可以给想学前端的人一些借鉴，列在这里的大部分都是我自己看过的。

书籍

  1. JavaScript 高级程序设计： js 经典入门书籍，也叫红宝书。个人觉得里面的知识讲解的都很细致，不管什么水平的人看它都有收获，也可以当做案头工具书。

  2. javascript 权威指南: 同样是非常经典，难度上比红宝书要大些。看完觉得前半部分关于 js 语言的描述很精彩，但如果没有基础的话容易看不懂。后半部分关于 HTML 和 DOM 的部分没有红宝书细致。

  3. JavaScript 语言精粹: 在很早前粗略看过一遍，当时感觉非常吃力看不懂，但有很多人推荐它，之后有时间再仔细阅读一番。

  4. 高性能网站建设指南: 这本书有上下两本，是网站优化方面的经典，业界称作“雅虎军规”。针对每一条优化策略都详细讲解了原由，并描述了具体的优化步骤，还比较了当时的知名网站对此条策略的实施情况。

  5. You Don't Know JS：是一个系列，在github上就能找到开源的书籍。看过一遍，其中《Async & Performance》、《ES6 & Beyond》、《Object》、《Scope & Closures》这 4 本给了很大的启发，书中描述了很多在其他书籍或教学视频中不会讲到的知识，推荐在对 js 有一定了解之后再看这本书。

  6. ECMAScript 6 入门： 阮一峰写的 es6 入门书，很多人学 es6 都会看它，里面对每个 ES6 的特性都讲解的很细致，好像已经出到第三版了，越来越厚。。。

  7. 网络是怎样连接的：一本关于计算机网络的入门书籍，用很多插图来配合讲解，阅读起来不会像国内关于计算机网络的教材那么枯燥。有一个很有名的面试题，大致是说：“从在浏览器中输入 url 到页面显示内容，期间都发生了什么？”。 可以带着这个问题来阅读，会很有收获。当然其中关于计算机网络的知识都是偏入门，如果想要更深入，还是看那些大部头吧。。

  8. 图解 HTTP：很薄的一本书，大概一个周末可以看完，书中用很多有趣的插图来帮助对 HTTP 协议的理解。同样这本书也是偏基础性的，如果只是想对 HTTP 有个大概的了解，会是一本很好的书。

  9. 深入理解 ES6：最近看的一本书，同样是介绍 ES6 的。买这本书是因为看到豆瓣书评中说其中关于每个 ES6 的特性都会讲解为什么要有这个特性，跟阮大的书各有千秋。

  10. 精通正则表达式：看这本书是因为一直对正则表达式停留在记忆的阶段，一段时间不用就忘记了。这本书讲解了正则表达式的底层细节，帮助从原理上了解正则式。其中关于正则表达式回溯的原理让我印象深刻。不过看了前面一半后越来越吃力，后来就看不懂了 😂。。。

网站

因为在公司用的是 Angular 框架，所以推荐的站点会比较侧重这方面。

Angular 相关

  1. ANGULAR 中文官网： 一般来说，学习一个知识，官网总是最权威的资料，其他的视频教学或者书籍很容易过时，而官网会一直保持最新进度。

  2. angular university： 国外的一个学习 Angular 的网站，里面有视频和博客，不过我用的免费 VPN 没多少流量，就一直没看过。博客很棒，每篇博客会关于 Angular 的一个知识点进行详细讲解。

  3. 大漠老师的 angular2 学习视频 ：优酷上的免费视频，配合他在码云上的开源项目Nice Fish来看效果会更好，这个项目之前看大漠老师的朋友圈还得了码云官方的奖。

  4. Angular 组件库： PrimeNG、ng-bootstrap、Ionic、Angular Material，具体网址直接搜对应官网即可

  5. 大漠老师整理的 Angular2 优质学习资源

  6. 简书上的一个很棒的学习教程

  7. thoughtram: 忘记从哪里知道这个网站的了，但里面的 angular 博客很棒，我之前专门花了一段时间把那些的博客都看完了，收获很大。

  8. toddmotto: 一个外国帅哥的个人博客站点，里面基本都是 Angular 的博客。看了他的好几篇文章，都是棒棒哒 😊

Javacript、typescript

  1. typescript 中文官网

  2. ts 英文官网

  3. github 上的 ts 详细指引，不过是英文的

  4. 《ECMAScript 6 入门》这本书的对应网站

  5. Mozilla Developer NetWork，类似 MSDN

工具站点

这种类型的站点可以说是不胜枚举，就随便列举几个，其实每个关注前端的同学肯定都会一堆的好站点。

  1. chrome 开发者工具官网：学习 chrome 控制台使用，可以说只此一个站点就够

  2. Sublime Text 编辑器插件网站

  3. vscode 编辑器插件网站

  4. Can I use: 用于查询某个特性在浏览器上的支持情况，如果查不到我一般会去MDN上查。

  5. jsbin、runkit：可以在上面试验你的html、js以及css，比如想测试一个常见的 js 库怎么用，但又觉得自己专门写一个页面来测试很麻烦，那么这个网站就是一个得力助手。

  6. emmet：提升你的 html、css 编写效率，比 snippets 代码片段更灵活更好用。

  7. regexr: 可以很方便测试写的正则表达式是否正确。

微信公众号

这里只推荐两个我每天都会看的公众号。

  1. 前端大全：每天都会推送各种关于前端的技术文章

  2. 前端早读课：每天早上都会推送一篇前端相关文章