前端小白必看学习路线

前端知识变化的太快，东西太多，太杂，你今天学一个框架，明天出来两个，1年前学的东西没怎么用，然后1年后忘的差不多了，是不是有点尴尬？

不过最近，我发现前端新技术、新框架的更新也放缓了。

今天跟大家聊聊小白想要入门前端、深入前端、在前端领域工作，需要学习哪些必备的知识？

前端开发必备全景图

不废话直接上最终的图

前端开发必备全景图

Javascript->让切图变成工程师

没有编程语言怎么能算工程师，因此Javascript简称JS,赋予了前端开发人员灵魂。

编程语言是对操纵计算机的一种高级抽象，我们通过操纵JS来对页面的交互进行封装，最经典的就是输入用户名，密码，然后点击登录，哒哒！。

对于JS语言的深入学习,在熟练掌握JS的各种语法之后，可以尝试通过做项目来达到，以战代练。不过此时，你需要学习基本的HTML和CSS

HTML + CSS

通过浏览w3school(https://www.w3school.com.cn/)我们可以很快速的掌握html、css大概是什么样子，还是推荐大家继续去freeCodeCamp上去学习相关html、css相关知识

Chrome你需要多多使用

使用Chrome,加上一款能让你写JS、HTML、CSS的主流编辑器(比如免费开源的VScode) 练习开发一个百度静态首页，再复杂一点请打开 jd.com。这个练习对初学者其实非常重要，也是你早期的成果，以后甚至可以回来不断优化。

React/Vue 加速开发页面

React 可以非常轻松地创建用户交互界面,设计简洁的状态视图,在数据改变时,高效地更新渲染界面,

https://www.bilibili.com/video/av93927490

详细地来讲,它有以下的优势:

[if !supportLists]1. [endif]使用虚拟DOM的概念,性能好,速度快。

2.虚拟DOM帮助解决了跨浏览器问题,并为我们提供了标准化的API。

3.代码一切皆是组件,更加模块化,重用代码更..

Vue框架也起着同样的作用，笔者认为目前React、Vue不分伯仲，但是在学习成本上，Vue更容易学一些，更规范一些。

vue还有一个优势，因为是中国人开发的框架，中文文档永远是最及时的，但是react推荐看英文，中文文档比较滞后，这也是缺点。

为了能更快的开发页面，很多团队通过react/vue框架进一步封装了组件库, 一是因为原生的太过丑陋无法满足正常人的美感，二是现在的交互越来越沉浸式，可以认为浏览器就是一个操作系统，每一个网站就像一款软件。

Redux/Vuex高级部分

当页面越来越多，越来越复杂的时候，会需要对页面间的数据进行管理，或者组件间的数据，你就需要有管理数据的能力了，Redux等框架正是提供了以上的能力，还是推荐官网学习，不过此时希望大家对React掌握的比较熟悉了。

redux官网(https://redux.js.org/) vuex官网(https://vuex.vuejs.org/zh/)

lodash/underscore 复杂数据处理必学

当js原生的方法map, filter直接使用无法满足你的需求，比如下面的场景

找出两个数组中不一样的数据[3, 2, 1], [4, 2]

我们可以考虑引入lodash这样的库，它提供很多api来操纵我们常见的数据结构，比如array数组，object，类型判断，深copy等等

代码

http与axios 前后端联调必备

既然有前端、有后端，那两者肯定是需要共同完成一件大事的。如何配合，其实就是通过http这个网络传输数据的协议，http的一些知识是你必须要了解的，比如状态码，请求方式，请求参数，返回值等等。axios是目前最推荐的，完成前端给后端发http请求的一个工具库。简单来说前端传给后端需要的数据，后端返回前端需要的展示数据，或者保存前端的数据。

git 多人协作的工具

使用场景：对于程序员来说，代码就是一切，可以作为程序员之间打交道的工具，代码也可以是说明文档，所以很容易出现写的代码有错误，需要还原到正确的代码，或者两个人修改同一个页面代码。

如何做到代码的改动不会丢失

保证两个人改一个文件的代码最终不会冲突

本地代码失误被删除，需要还原

为了解决以上问题，git代码版本管理工具是你必须要学会的。

git官网(https://git-scm.com/) git如何使用(https://git-scm.com/docs)

推荐快速学习可以搜索相关视频学习。

npm和webpack

Npm使用场景：

当你使用react开发，使用redux等数据管理工具

当你为了保证你使用的react版本和其他合作开发者相同时

当你需要把你的代码开源，提供给其他人使用

为了解决以上问题，npm已经成为任何一个项目中必备的一个使用工具。

npm官网(https://www.npmjs.com/)

Webpack使用场景：

在本地与后端开发者进行接口调试

在本地进行页面的快速调试，无刷新调试

项目上线时，代码压缩到最精简状态，一方面安全，一方面节省网络资源

为了解决以上问题，webpack已经成为任何一个项目中必备的一个使用工具。

Jest单测最推荐的框架

随着前端页面越来越复杂，单元测试成为保障前端页面安全的一道必备保障，

这些年Jest 一路崛起，超越曾经最常用的单元测试框架 Mocha，以 61.2% 的使用率成功占据榜首

以上是我总结的入门到精通都要必须学的前端领域, 打好基础才是最重要的。大家加油！！！