2020 大前端学习路线完全指南

很高兴和大家以图文的形式见面，

众所周知，大前端统一了所有的前端，特点在于一次开发，同时适用于所有平台。大前端是 Web 统一的时代，利用 Web 不仅能开发出网站，更可以开发手机端 Web 应用和移动端应用程序。然而，对于尚在技术门外的小伙伴，网络上鲜有介绍学习路线的指导性资料。本文正是为了弥补这一不足而生的。

前端学习路线思维导图

本次的内容，我们来聊一聊大前端的学习路线。

相信对本篇文章感兴趣的读者都或多或少地对大前端感兴趣，那么在开始学习之前，我们要解决一个问题：

我适合做大前端开发吗?

我适合做大前端开发吗

时至今日，前端开发技术已经历经了多年的发展。它所支持的平台除了传统意义上的 Web 外，还包括了移动端、OTT，甚至是一些新的物联网设备。这也是其名为“大前端”的原因——它是所有前端的统称。

我们都知道，当今社会是个“看脸”的社会，前端开发技术与此息息相关。前端的特点在于一次开发，多端适用。弥补了传统开发过程中，由于各个平台使用的技术栈不同，造成了开发成本的高昂的问题。

可以说，大前端时代是 Web 统一的时代。

说到这，大家可能心里已经有数了：“原来大前端就是和用户打交道啊。”——没错，就是这样。

或许你已经觉得自己做好了准备要开始入门了，但是以下几个问题仍然需要你考虑：

前端虽说好上手，薪资水平很诱人，但是知识很散，略显杂乱(这也是这篇文章诞生的原因);

前端大多和 UI 打交道，某些 UI 实现起来很复杂;

虽说“一次开发，多端适用”，但偶尔还会使用到平台自己的技术栈;

某些情况下，会有很严重的性能问题;

……

但是，如果你：

喜欢和人打交道;

想让自己的产品会说话，希望产品是有“生命力”的;

对漂亮的 UI 以及各式各样的动画效果很感兴趣;

希望看到别人在使用自己的产品，从而感到很自豪;

有足够的耐心，并且能很细致地处理问题，甚至有点吹毛求疵;

……

那就来前端吧，它适合你

我要做哪些准备

学习前端开发，除了需要准备好你自己外，还需要准备好一台电脑，如果涉及的移动端，还需要准备一部手机或平板电脑设备。这些东西将帮助我们学习并开发出优秀的前端产品，因此在选择上，也是有很多讲究的。俗话说：“工欲善其事必先利其器”，也是这个道理。

电脑：推荐使用苹果的 Macbook Pro 13 或 iMac 系列。当然如果经费有限，可以购买一台i5、8G内存、256GSSD的电脑足以。

测试用的手机、平板设备、浏览器等等：这部分根据具体的产品来确定，基本上会选择一台性能较好的和一台性能较差的。在性能较差的设备上运行我们的程序可以帮助我们更快地发现性能问题。

如果你只是学习前端开发技术，或者想节约一点学习成本，那么测试设备暂时可以用电脑上的虚拟设备来模拟测试机。

前端技术学习三部曲

搞定前端技术栈，我给你个妙招： 我把前端技术学习的过程分为了三大部分，用清晰明确的“三步走战略”来攻克前端技术栈。 相信我，当你练就了全部武艺之后，月薪过万不是梦。

读者可自行去招聘网站检索，目前前端开发人才在职场很吃香!你还等什么?

进击前端初级基础

打基础，我们不能有一丝一毫的妥协。万丈高楼平地起，地基打不好，楼就盖不高。

对于前端而言，**基础就是 HTML、CSS、JavaScript 和 jQuery 四大金刚 **。

好了，我知道你可能看到这，就会感叹：“初级居然要学四门，我还是放弃吧……”

别急，对付这四大金刚，我又有妙招。

HTML 和 CSS

对于 HTML 和 CSS，枯燥的讲述会令初学者感到无聊甚至厌烦。我这里推荐 Head First 系列的《Head First HTML 与 CSS》。

怎么样?有没有觉得世界突然变得美丽一点了?

这是完全面向 0 基础的同学。

有些声称面向初学者，但是其实很枯燥的书，真的就是《从入门到放弃》系列中的精品之作。

这里先概括地跟大家讲一下：HTML 就是超文本标记语言，组成网页内容的最基本语言。你可以直接说他是网页的骨架，网页的图片、文字、视频、音频、程序都需要他引入到网页中体现。

当然，光是 HTML 做网页，只是有了内容，是远远不够的。

从 Web 2.0 时代开始，都是盒子模型布局法了，也就是用 Div + CSS 来实现布局了。

CSS 就是层叠样式表。通过样式属性来对标签进行布局规范，在不使用 table 布局的时候，使用 CSS 样式对网页标签进行对应的布局实现才是主流的开发方式。

HTML (div)+CSS 布局，是基础入门的基本步骤，在这个阶段，你需要学习的内容，包括有：

标签语义化，SEO;

页面加载的流程和原理;

网页结构;

盒子模型(W3C 盒子模型和 IE 盒子模型);

CSS 选择器;

CSS 布局浮动、定位。

关于 HTML 和 CSS，我们要学到什么地步，要怎么学呢?

在开始阶段，熟悉好布局方法，做一个简单的电商网页的基本结构出来，无需考虑特效，也不需要考虑用户交互。

比如，我们可以仿照百度或者谷歌首页，做出来一个搜索引擎首页。当然只是布局和样式，具体的交互和特效不用实现，这是一个比较简单的练习。相对复杂一点的，比如门户网站(新浪、网易等)首页的实现。

当你可以独立徒手完成一个复杂的网页时，这部分内容就掌握的差不多了。推荐用文本编辑器，比如 Notepad++、Sublime 等进行练习。

JavaScript

接下来是 JavaScript，这部分我个人推荐《JavaScript DOM 编程艺术》，虽然没有 Head First 系列生动活泼，但胜在篇幅，这本只有大约 300 页的技术书在浩瀚的技术类图书海洋中算得上是薄的。

正如书中前言所说：本书是“主要是写给 Web 设计师的”，而“不是专门写给程序员的”。因此，它不会把你搞到很头大。而且还有一个足够吸引你的地方：那就是使用 JavaScript 可以给网页加特效，只要对着书中的实例跟练就能看到效果了。如果你真的“对漂亮的 UI 以及各式各样的动画效果很感兴趣”，那么啃下这本书不算难事。

JavaScript 现在可以说是互联网时代使用率最高的脚本语言了，在网页中，几乎所有的数据渲染，特效的交互都需要利用 JavaScript。在学习前端开发的高级阶段，大量使用算法和框架的时候，依旧会大量使用 JavaScript。

在基础阶段，我们学习 JavaScript 主要掌握下面几点：

基本关键字指令;

基本数据类型、数组;

函数;

面向对象编程;

原型链、闭包;

JSON;

Ajax;

DOM(文档对象模型原生 DOM 操作);

事件捕获、冒泡、代理;

常用函数方法;

ES 5、6、7。

JavaScript 是我们学习前端开发中非常重要的一个内容，也是一个大家经常掉坑里的难点。所以这部分我们给四周的时间。 关于 JavaScript，除了上面的理论基础，还需怎样加强练习和巩固呢?

其实很简单，只要跟着书中的示例，自己实践一遍即可。这里需要特别注意的是：有很多同学在跟练时，采用对着书中代码敲代码的方式。这其实是效率非常低的学习方法。我个人的建议是：对于书中的示例，先看懂，理解透。然后学完本节或本章后，把书放在一边，自己独立动手尝试实现那些示例。

jQuery

最后就是 jQuery 了，这块知识我个人推荐《锋利的 jQuery》。

这本书无需通读，我们只要学过前面 9 个章节就可以了(依然是不到 300 页)。实际上，第一章还有一点是 JavaScript 的知识。从某种意义上讲，jQuery 实际上是对 JavaScript 的快捷实现方式。试想，没有 jQuery 时，每次逻辑业务都需要手动写，也就是每开发一次就要造一次轮子，很麻烦。如果能简单一点就好了。借助 JavaScript 的封装特性，jQuery 应运而生。它其实就是用 JavaScript 封装的类库、插件。在这部分的学习中，你可能会体会到这种便利。所以，jQuery 也是你必须要掌握的技能。那么我们要掌握它到何种程度呢?

jQuery 语法和 JavaScript 原生语法的差异;

Dom 对象和 jQuery 对象;

jQuery 的入口函数和 JavaScript 的入口函数的差异;

jQuery 事件的执行逻辑。

学习 jQuery，目的就是能快速的完成网页的特效。但要记住，这本书只是 jQuery 的入门书。我们依旧留四周时间来消化它。 好了，到此，前端入门知识就算结束了，这不到三个月的时间或许你会觉得有些无聊枯燥。但我要告诉你的是，这已经是通往前端大神的快捷之路了。还是那句话，对于基础知识的把握，我们不能有一丝一毫的懈怠。不过也有个好消息，这种无聊、枯燥的感觉或许已经结束了!

好了，到此我们总结一下初级阶段的内容：

学习内容：HTML、CSS、JavaScript、jQuery;

学习方法：理论学习(读书、理解)+ 动手实践(一个静态网站);

学习时间：两周(HTML、CSS)+ 四周(JavaScript)+ 四周(jQuery)，总计两个半月。

进击前端中级技能

其实在完成初级阶段的学习后，我们就可以做出点东西了。完成一个电商网站的布局，有特效的开发要求应该没有问题。但是，移动设备的流行席卷全球。我们的产品不能只面向传统的 PC 用户，更多地，应该偏向移动端。这就要 HTML5+CSS3 的组合来应对了，它可以帮我们完成多端的自适应，也就是我们常听到的 “响应式布局”。

所以，前端技术学习的第二阶段会更加有趣，因为在这个阶段里，我们可以真的做出点完整的东西了!

中级阶段我们攻克两大技术点：HTML5 和 CSS3、Node.js。

首先我们来看 HTML5 和 CSS3。

CSS3 为响应式设计奠定了基础。由于我们在之前有了基础，所以这部分学习起来并不费力。这部分我个人推荐大家借助免费的视频教程，实现快速通关。比如某培训机构的免费视频教程，包含整个 HTML5+CSS3 的内容，如下图所示：

这部分** 一周时间足矣**了。

说到 Node.js，它的意义就很大了。Node 让 js 成为服务器语言，可以完成 IO，网络通信，数据库操作等。可以说，掌握了 Node.js，你就可以变身为全栈工程师了!这部分我个人推荐大家借助免费的视频教程，实现快速通关

下面来到动手实践环节!

完成了这两大部分的学习，你就可以自己做点什么东西出来了! 首先一个就是——WebApp。

WebApp 实际上就是用户通过浏览器打开的网站。比如我们常见的电商网站，功能性网站，管理网站等等。比如下图所示的自适应布局的网站视图示例：

那么，怎样快速地判断某个网站是 WebApp 呢?很简单，使用 Chrome 浏览器的调试控制台即可，唤起控制台的快捷键是 F12。仔细对照下面两张图(使用 Apple 官方网站为例)：

显而易见地，通常我们使用电脑访问 Apple 官网时，会是上图的模样。

此时，我们点击 Toggle device toolbar 按钮。

然后，整个网站就会变成下图中的模样：

没错!这其实就是模拟用户使用移动设备访问网站时的情况。很明显，这是一个响应式布局的网站该有的模样，它是一个 WebApp。

又因为这些网站上的图片等素材我们都可以轻松获取，因此，理论上我们可以自己实现和 Apple 官网完全一样的 WebApp 网站。

接下来就是三大前端框架：

Vue.js

React

Angular

以上三个前端框架已经趋于平稳化和标准化，形成三足鼎立的局势。下面我们分别介绍它们：

Vue.js 是一套用于构建用户界面的渐进式 JavaScript 框架，技术上，只要你会 HTML、CSS、JavaScript、ES6、Node、webpack，就可以用这个框架了。

React 起源于 Facebook 的内部项目，他也是一个用于构建用户界面的 JavaScript 库。后来，还衍生出了 React Native，用于移动端跨平台开发。

Angular 同样是 JavaScript 框架，已经被用于 Google 的多款产品当中。

除了上述三大前端框架外，还有一些东西是要引起你注意的：比如 PWA、Flutter、TypeScript、Web安防、webgl……

不过，这些东西都是所谓“高层建筑”，随着时间的推移，还会有更多的前端框架出现，也会有一些前端框架消失…… 这其中最重要的还是要掌握初级和中级两大步骤中的知识，它们是“核心”。所谓“万变不离其宗”，说的就是这个道理。

这部分的学习方法主要是在练习，因为我们已经掌握了足够多的知识。

我们可以尝试将之前所做过的 WebApp 使用上述框架来实现，从而达到熟悉这些前端框架的目的。这部分我们给两周到一个月的时间，具体依据我们最终的“产品”实现复杂度而定。

结语

到此，大前端学习路线已经讲完了，我们来计算一下学习上面全部的内容，要花多久时间：

初级阶段：两周(HTML、CSS)+ 四周(JavaScript)+ 四周(jQuery)，总计两个半月;

中级阶段：两周(HTML5、CSS3)+ 两周(Node.js)+ webpack + 两周练习，总计一个半月;

高级阶段：三个月的学习和练习。

总计四个月。

最后，希望各位读者能够从中获益，打消自己的迷茫。 衷心希望以上这些内容能够对你有帮助。

最后送给大前端学习的思维导图：

One More Thing

最后，还要跟各位多唠叨几句，也顺便解惑：初级、中级、高级，它们有什么关系，是怎样的过程呢?

初级相当于基础，中级的进阶和高级的各种前端框架，实际上还是对初级的 JavaScript 知识的考验，所以称其为“基础”，实至名归;

中级是对初级的提升，主要是响应式布局和 Node.js 的知识;

高级则是各种前端框架了，可能有同学会有疑问说：既然我已经掌握了这么多，也能写出来很多特效，也能做到移动端桌面端自适应，那还要前端框架干什么呢?

这种困惑实际上这是对前端框架的意义不清楚造成的，那么我们就来说说前端框架出现的意义。

前端框架的出现，就是提高效率，缩减时间成本，其本质大多还是基础部分的 JavaScript，因此可以说：初级就是地基;中级和高级实际上就是建在地基上的高楼了。具体这座高楼能建多高，还要看地基打得有多牢。

最后送给大家一句话：“独立思考，实事求是，锲而不舍，以勤补拙。”愿各位的前端开发之路能一帆风顺!郑州无痛人流医院http://yyk.39.net/zz3/zonghe/1d426.html