随着信息技术的快速发展,在智能终端、45G等信息基础设施的加持下,社会对前端开发的需求越来越大,一个优秀的前端工程师,即使在二线城市,如武汉、成都、南京等地,月薪资从8K35K都会有,相对较高的薪资吸引了越来越多的同学想在校期间学习掌握前端开发,毕业后即投入前端工作。但对于大多数没有相关基础的同学来说,完全靠自学是比较困难的,虽说前端开发算是相对简单一些的。本文是写得较好的一篇,我转载过来,希望对同学们有所帮助。 版权声明:本文为CSDN博主BOM485480的原创文章 作为程序员,肯定是不能容忍重复无味的劳动的,因此我就系统地总结分享一下我的前端学习路线,希望对你能够有所帮助。 前言 前端学习是一个螺旋上升的过程,既要反复地看书,也要抓紧时间进行实战。只看书,看了就会忘,所以必须将看书和写代码相结合。只要你认真学,入门前端的话三个月左右就可以了。之后我还给出了前端进阶路线,帮助你提升前端技能水平。我把前端入门和前端进阶一共分为六个阶段,并对相应阶段所需要的大致的学习时间进行了标注。 前端入门 入门前端开发主要需要学习HTML,CSS和JavaScript三大件。之后学习前端主流框架的使用,并基于已学内容开发一个小项目进行实战。当你把这些学习并理解透彻以后,也就算真正地入门前端了。阶段一:HTMLCSS 前端对于入门者相当友好,因为开始学习的时候你只需要一个浏览器,推荐Chrome。HTML和CSS可以直接运行在浏览器中,浏览器就是它们的运行环境。你也可以使用编辑器,推荐VSCode,这是前端开发使用最多的编辑器。 HTML(HyperTextMarkupLanguage)和CSS(CascadingStyleSheets)其实并不是编程语言。HTML中文名叫做超文本标记语言,其实就是一些标签。CSS中文名为层叠样式表,也就是一些样式的配置。 首先学习HTML,非常简单。HTML有非常多的标签,刚入门的时候不要沉浸在记住这些标签中,你也记不住。你只需要整体浏览一遍,知道有哪些标签,各自的作用是什么,整体有一个印象就行了。 学习css过程中千万不要剥离HTML学习。当你什么时候理解了html的重要性(从页面开发角度而言,它可以视为是后续良好css和js编码得以实施的基础,相当于程序中的数据结构,设计好了可以让你事半功倍),你才可以称得上是一个合格的页面开发对于新人,我建议除了几个关键概念,如布局、盒模型、单位等等,都不应该花大量去扣细节,甚至背书记忆,浏览性学习知道有这个东西就行,在实际应用时再去加深记忆。前端入门 入门前端开发主要需要学习HTML,CSS和JavaScript三大件。之后学习前端主流框架的使用,并基于已学内容开发一个小项目进行实战。当你把这些学习并理解透彻以后,也就算真正地入门前端了。 阶段二:JavaScript 学习了HTML和CSS,可以开始学习JavaScript了。这也是至关重要的阶段。JavaScript主要包括语言基础(ECMAScript)、DOM和BOM三部分,如果你是初学者,会想这到底是啥,咋还三个东西。那就开始学起来,学完你就知道啦,其实没那么难。 JavaScript这几年变化很快,但是对于初学者来说要摒弃浮躁的气氛,静下心来打好基础。记住:自己是初学者,玩的东西就是:JavaScript和jQuery,工具就用一个编辑器和一个浏览器,这些就够了,别的不要碰阶段三:入门前端框架 学完前端三大件,打好了大树的根基,就可以开始扩展技能树了,开始学习前端框架。前端的主流框架目前主要为React,Vue和Angular。选择哪个框架呢?你可以去知乎或者其他网站搜一搜,然后根据你的个人喜好进行选择。一般是在React和Vue中选一个。React的开发体验更类似于写原生的JavaScript,要求你有较好的JavaScript基础。Vue则引入了模版,将很多实现封装成了API,你需要记住并调用API来进行开发,因为很多都是封装好的,所以学习起来较为简单,只是编程的感觉稍微弱了一些。 这两个都是非常优秀的框架,新人不必纠结于选择哪个框架,学了一个,另一个也很容易学。如果你不知道选择哪个,我推荐你先学习React。 前端进阶 成功入门前端开发之后就要开启进阶部分了,主要是加深对各个知识的理解程度,打牢计算机领域基础知识,扩展技能树,提升项目开发和宏观理解及把控能力。前端进阶是需要终生学习的,活到老学到老阶段四:语言基础进阶 这个阶段就是加深对编程语言的理解,多阅读进阶书籍。 进阶必读书籍: 《你不知道的JavaScript上中下卷》:必买书籍,将JavaScript的疑难问题,细节知识一网打尽。原版是GitHub上开源的电子书,英语水平高的可以去读英文原版。 《JavaScript忍者秘籍》:深入讲解JavaScript的核心知识点,必买书籍。 《了不起的JavaScript工程师》:从宏观来看JavaScript语言,以及前端工程师所需要掌握的一些技能,推荐阅读。 《JavaScript函数式编程指南》:学习函数式编程思想 《JavaScript函数式编程》:也是一本函数式编程思想的好书 《JavaScript设计模式》:学习JavaScript设计模式,推荐阅读 《JavaScript设计模式与开发实践》:另一本同等分量的设计模式书籍,推荐阅读 《锋利的jQuery》:jQuery现在已经很少有人用了,除非是很老的项目或者写小东西。不过这本书值得买,学习jQuery的优秀思想,还可以去学习一下它的源码,对你进阶很有帮助。阶段五:框架和学习边界进阶 通过阶段三,你已经掌握了前端框架的基本使用,开发一个完整项目的流程。那么在框架和学习边界进阶阶段,你就可以: 学习框架周边的生态,社区总结出来的优秀组件,以及各种好用的工具库。 造一些自己的轮子,使用框架搭建自己的开源项目 学习Webpack,Gulp,Babel,ESLint等工具的使用、思想和原理 带着问题去阅读框架源码,学习性能优化 养成良好的编程习惯 扩展技术边界,学习Node。js等后端相关技能 推荐阅读书籍: 以下推荐的书籍都是比较出名的书籍,你可以根据自己的技能树,选择所需要的书籍进行阅读。并不是一字不差地整本阅读,而是在每本书中学习自己所需要的部分。很多都是非常著名的好书,有精力尽量买来学习。 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实战:面向下一代的ProgressiveWebAPP》 其他: 《SVG精髓》 《深入理解SVG》 《前端架构设计》 《重构:改善既有代码的设计》 《同构JavaScript应用开发》阶段六:计算机基础知识进阶 编程编程,万变不离其宗,那就是计算机基础知识,算法、数据结构、计算机原理、网络等内容。在这里我只推荐最经典的好书,每一本都是必读书籍。学好这些内容,大厂任你选。 数据结构和算法: 《剑指offer》 《程序员面试金典(第6版)》 《编程之美》 《漫画算法》 《算法图解》 《程序员代码面试指南》 《大话数据结构》 《趣学算法》 《学习JavaScript数据结构与算法》 《数据结构与算法:JavaScript描述》 计算机网络: 《HTTP2基础教程》 《HTTPS权威指南》 《计算机网络:自顶向下方法》 《图解HTTP》 《图解TCPIP》 《TCPIP详解》 《UNIX网络编程》 操作系统: 《深入理解计算机系统》 《现代操作系统》 《UNIX环境高级编程》 《TheLinuxProgrammingInterface》 总结:至此,你已经完成了前端开发从入门到进阶,已然成为了一个巨佬,之后再学什么已经了如指掌。希望我的分享对你有帮助,如果你觉得有用,可以收藏本文,并分享给你有需要的朋友。让我们一起学习,共同进步!(完)