前端开发书籍推荐与学习路线

爱被打了一巴掌 2022-11-19 15:59 210阅读 0赞

我大致算了一下差不多1500块钱…普通人怕是有点消受不起（只是你不肯花钱而已），我手头有这些书的电子版…可以仅供大家学习使用，找个时间公布出来…

HTML 与 CSS书籍系列

看w3cschool或菜鸟教程的内容：https://www.runoob.com这里有关于html、css、html5、css3、bootstrap等内容的教程，你也可以用这个来入门，这也是大多数人入门的一个方式。不过这种入门方式学习的知识非常不系统，推荐两本书深入学习。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70]  
这两本书囊括了html、css以及Web API的完整知识，结合MDN一起学习可以达到比较专业的水平了。  
![在这里插入图片描述][20210105150659279.png]  
CSS权威指南分上下两册，关于CSS你想知道的基本就都在这里了，而且它把内容讲得比较通透，这本书比较侧重于系统阐述每一个知识点，动物书的权威指南是难的是多翻翻的参考书（也就是像词典一样对待，快速撸完，以后常翻）。  
![在这里插入图片描述][2021010515071431.png]  
这本书则侧重于CSS的一些实战的技巧，可以说写的是非常经典了，写书的作者是CSS的专家。

以上四本书，边用VS Code+Chrome浏览器实战，再结合MDN，写一下笔记，做一下思维导图，就可以快速入门网页的开发，内容要快看，快实战，用思维导图快速记忆。

JavaScript书籍系列

JavaScript可以说是前端的大头了，前端开发工程师要把主要的精力放在JavaScript的学习上，尤其是原生JavaScipt基础。

入门最推荐的基本书

尤其是JavaScript高级程序设计第4版，吐血推荐，如果你只想买一本纸质书，那就是这本；一定要把这本书认真的学完。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 1]  
《JavaScript高级程序设计》也就是传说中的红宝书，而《JavaScript权威指南》就是传说中的犀牛书，这两本书都是很多大神推荐的JavaScript入门经典书，学JavaScript可以先看这两本书，还是一样的方法，不要光看，一定要边实战边记笔记。犀牛书非常厚，你一定不要死啃，而是要有方法的快速阅读。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 2]  
《JavaScript语言精粹》也就是动物书系里有名的蝴蝶书，以上两本书可以和红宝书、犀牛书结合一起看，学了之后就应该对JavaScript有了一个扎实的入门基础了。  
![在这里插入图片描述][20210105150813332.png]  
不过要想掌握最新的es6，则需要翻一下阮一峰的es6在线手册（很简单的东西写得比较晦涩难懂，但是免费且在线，前端开发会时不时翻阅）以及推荐这本《深入理解ES6》，还有一个非常不错的现代JavaScript的在线文档推荐

现代JavaScript教程

JavaScript进阶

JavaScript进阶方面的内容适合纯前端开发工程师，如果是做前端可视化、侧重于前端页面之类的，进阶内容可以先只了解的。  
![在这里插入图片描述][20210105150825463.png]  
《你不知道的JavaScript》可以说是JavaScript进阶比较推荐的书了，这三本书在微信读书App里有。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 3]  
MDN技术文档

要系统掌握JavaScript，还有一个重量级的技术词典作为终极参考，这个一定要长期翻阅，所以这里单独拿出来重点强调一下：

MDN 技术文档，必看必查

算法相关

前端开发也需要对数据结构和算法有一个基础的了解。这个方向选了三本比较基础，讲解比较生动的经典好书，平时可以看一下，不作为主力的学习路径，但是值得花点时间了解一下（尤其是计算机专业想从事前端开发的学生）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 4]  
计算机网络与前端性能

前端开发不能不了解计算机网络的相关知识，这里推荐四本书，有两本就是讲Web性能的。HTTP也有一本动物书值得推荐（我对动物书有点偏执，书都是经典好书）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 5]  
学完以上这些，几本就可以去学习Nodejs和Javacript的三大框架了，不过很遗憾的是后面没有什么书可以推荐的，还是看技术文档吧。现在前端开发工程师的门槛越来越高了，不能只会前端，不会后端，而后端这里就比较推荐大家学习Nodejs（还可以是Python、PHP或者Golang）.

可以结合whistle来学习计算机网络方面的知识，它是基于Node实现的跨平台web调试代理工具，参考中文文档：wproxy.org/whistle/

以及需要了解Nginx、Apache等。

Nodejs入门书籍  
![在这里插入图片描述][20210105150912940.png]  
除了Nodejs基础以外，还需要掌握express、koa之类的Web开发框架，这个

在学习Nodejs后端的时候，会经常遇到函数式编程和异步的问题，专门讲这方面的书好像不多，但是这个是很重要的（前期可以不用深入学，只需要了解，会用就可以了）。  
![在这里插入图片描述][20210105150923167.png]  
关于异步、函数式编程，除了零散在几本书里的内容，可以看一下这些技术文档：

JavaScript Promise 迷你书

而关于组件化、工程化的一些工具链、可复用、持续集成、测试等相关的内容还没有很好的书，这方面也是前端开发工程师必须要掌握的基础，所以还是要阅读技术文档才能更加系统的接触到相关的知识。

webpack 中文文档 | webpack 中文网

express技术文档

eslint技术文档

koa技术文档

eggjs技术文档

bootcss、印记中文里面有不少前端的技术文档推荐大家来学习，这个非常值得大家阅读一下。

计算机基础知识

数据库MySQL

前端开发工程师，不能不了解数据库相关的知识，至少要学会关系型数据库Mysql，了解一下NoSQL的MongoDB和Redis。  
![在这里插入图片描述][20210105150944906.png]  
这里推荐MySQL必知必会和SQL必知必会，这两本算是比较基础的知识了，如果需要更加深入，可以阅读一下:  
![在这里插入图片描述][2021010515095696.png]  
MongoDB

而MongoDB相关的，了解一下 腾讯云 · 云开发自带的数据库就可以了，也可以去看一下MongoDB的技术文档，这个目前暂时没有中文

Redis

Redis是内存存储的数据结构服务器，也是学习是最为重要的数据库之一了，除了上面三个数据库，其他的数据库可以根据情况了解。

Linux命令行

除此以外还需要对Linux服务器有一个基础性的了解，自己搭建或者买一台Linux服务器把书里面的一些命令大致跑一遍就可以了。  
![在这里插入图片描述][20210105151006864.png]  
三大框架之二Vue和React

以上内容主要是围绕原生JavaScript基础来展开的，要从事前端开发的工作需要了解一下三大框架，三大框架目前推荐Vue和React，看它们的技术文档就可以，下面也只以Vue和React为例：

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

Vue生态

Vuejs中文文档，Vue是前端开发目前使用最多的框架之一了；

vuex技术文档，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式;

vue-router技术文档，Vue Router 是Vue官方的路由管理器；

还有vue devtools以及vue cli、webpack这些基础的工具链，也是很有必要掌握的。想更全面了解Vue，当然少不了Github 里的awesome Vue了

https://github.com/vuejs/awesome-vue

UI框架

element ui技术文档，应该是目前用的最多的UI框架之一

Ant Design技术文档，一整套的设计体系，支持Vue和React，从这里可以学到很多相关知识，比如https://scaffold.ant.design/\#/ 脚手架等

目前UI框架，就是这两个比较多一些。

React 生态

React中文文档，前端开发大公司都需要了解的框架

next.js技术文档，服务端渲染

React Router技术文档，React路由解决方案

Redux技术文档，React状态管理

相应的也有awesome React https://github.com/enaqx/awesome-react

其实前端开发分的方向也有很多，比如前端可视化，React Native，Electron、甚至可以转Flutter之类的，这些建议在学习的时候了解，在工作的时候根据情况来学，不要啥都学，最重要的还是打好基础。

小程序以及小程序云开发特别适合前端开发工程师作为零基础入门来学，它也是目前前端开发应用的一个比较有钱途的方向。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70]: /images/20221119/78d4e7b5b31e40aca6ebc4a004d011d5.png
[20210105150659279.png]: /images/20221119/58bd48b556a9448abf83a982d523a420.png
[2021010515071431.png]: /images/20221119/bfcd735158ff4c099d7390fc3bb69c07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 1]: /images/20221119/4bb11a775e3241eabef9e4060fc597e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 2]: /images/20221119/56dd927b065b4d4c88152db8877b1c3d.png
[20210105150813332.png]: /images/20221119/33018bf18f9f44ad9b8da17bf1b1e97a.png
[20210105150825463.png]: /images/20221119/129a0884b5f4463fbb895d42c7a6afce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 3]: /images/20221119/45d9074576ac44cba782b393a0bcf825.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 4]: /images/20221119/5e7fab8a0b3541d69b0e07a0a7d847f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 5]: /images/20221119/e2a92cb3de44455da7652de46e736e02.png
[20210105150912940.png]: /images/20221119/d4c52a40b197443db66a0e3283c41c1b.png
[20210105150923167.png]: /images/20221119/bac8fe938a3a445898dbac69b20bdc7e.png
[20210105150944906.png]: /images/20221119/cd940cc7451a496eab2daf969207ae9b.png
[2021010515095696.png]: /images/20221119/a797ed22b8474e3088b9ad1d6f0a8702.png
[20210105151006864.png]: /images/20221119/5d72c49a987c4c72b3df8be8c8b76d49.png