本文原创：zhangjunnan
写在前面
所有前端开发工程师共有的一个特性，那就是焦虑，而且也像“得到”一样，容易向其他前端工程师贩卖焦虑。焦虑的来源大家都懂，就是前端知识变化的太快，东西太多，太杂，你今天学一个框架，明天出来两个，1年前学的东西没怎么用，然后1年后忘的差不多了，尴尬! 不过随着18年、19年过去了，我发现前端新技术、新框架的更新也放缓了。今天主要聊聊2020年想要入门前端、深入前端、在前端领域工作，你需要学习哪些必备的知识。
前端开发必备全景图
不废话直接上最终的图
Javascript->让切图变成工程师
没有编程语言怎么能算工程师，因此Javascript简称JS,赋予了前端开发人员灵魂。编程语言是对操纵计算机的一种高级抽象，我们通过操纵JS来对页面的交互进行封装，最经典的就是输入用户名，密码，然后点击登录，哒哒！。
对于JS入门，推荐下面几种方式 笔者认为互联网时代完全可以不用买书就是能学习前端的知识。
对于JS语言的深入学习,在熟练掌握JS的各种语法之后，可以尝试通过做项目来达到，以战代练。不过此时，你需要学习基本的HTML和CSS
HTML + CSS
通过浏览 w3school 我们可以很快速的掌握html、css大概是什么样子，还是推荐大家继续去freeCodeCamp上去学习相关html、css相关知识
Chrome你最好的朋友
作为一个前端开发者，问谁是他最好的朋友，相信肯定是Chrome, Chrome给前端开发带来无比的便利，以后只用Chrome吧😝， 但是朋友，别光用Chrome看网页啊。。。 你需要的是Chrome的debug调试能力，通过调试你才能精确的还原UI同学给你的设计稿。
这个时候，你可以使用Chrome,加上一款能让你写JS、HTML、CSS的主流编辑器(比如免费开源的VScode) 练习开发一个百度静态首页，再复杂一点请打开 jd.com。这个练习对初学者其实非常重要， 你是你早期的成果，以后甚至可以回来不断优化。
React/Vue 加速开发页面
现代前端工程师，可能一天就要开发一个复杂的页面，这在10年前，搞不好要开发10天，这多亏了React等ui框架带来的变革。
React 可以非常轻松地创建用户交互界面,设计简洁的状态视图,在数据改变时,高效地更新渲染界面,详细地来讲,它有以下的优势: 1.使用虚拟DOM的概念,性能好,速度快。 2.虚拟DOM帮助解决了跨浏览器问题,并为我们提供了标准化的API。 3.代码一切皆是组件,更加模块化,重用代码更..
Vue框架也起着同样的作用，笔者认为目前React、Vue不分伯仲，但是在学习成本上，Vue更容易学一些，更规范一些。
对于框架，最好的学习方式就是去创作者的官网去学习。
vue还有一个优势，因为是中国人开发的框架，中文文档永远是最及时的，但是react推荐看英文，中文文档比较滞后，这也是缺点。
为了能更快的开发页面，很多团队通过react/vue框架进一步封装了组件库,一是因为原生的太过丑陋无法满足正常人的美感，二是现在的交互越来越沉浸式，可以认为浏览器就是一个操作系统，每一个网站就像一款软件。
不了解组件库的同学，可以搜索antd、elementui打开看一看
Redux/Vuex高级部分
当页面越来越多，越来越复杂的时候，会需要对页面间的数据进行管理，或者组件间的数据，你就需要有管理数据的能力了，Redux等框架正是提供了以上的能力，还是推荐官网学习，不过此时希望大家对React掌握的比较熟悉了。
lodash/underscore 复杂数据处理必学
当js原生的方法map, filter直接使用无法满足你的需求， 比如下面的场景
找出两个数组中不一样的数据[3, 2, 1], [4, 2]
我们可以考虑引入lodash这样的库，它提供很多api来操纵我们常见的数据结构，比如array数组，object，类型判断，深copy等等
_.difference([3, 2, 1], [4, 2]);
// => [3, 1]
http与axios 前后端联调必备
既然有前端、有后端，那两者肯定是需要共同完成一件大事的。 如何配合，其实就是通过http这个网络传输数据的协议，http的一些知识是你必须要了解的，比如状态码，请求方式，请求参数，返回值等等。 axios是目前最推荐的，完成前端给后端发http请求的一个工具库。 简单来说 前端传给后端需要的数据， 后端返回前端需要的展示数据，或者保存前端的数据。
git 多人协作的工具
使用场景：对于程序员来说，代码就是一切，可以作为程序员之间打交道的工具，代码也可以是说明文档，所以很容易出现写的代码有错误，需要还原到正确的代码，或者两个人修改同一个页面代码。
- 如何做到代码的改动不会丢失
- 保证两个人改一个文件的代码 最终不会冲突
- 本地代码失误被删除，需要还原
为了解决以上问题，git代码版本管理工具是你必须要学会的。
推荐快速学习可以搜索相关视频学习。
npm和webpack
Npm使用场景：
- 当你使用react开发，使用redux等数据管理工具
- 当你为了保证你使用的react版本和其他合作开发者相同时
- 当你需要把你的代码开源，提供给其他人使用
为了解决以上问题，npm已经成为任何一个项目中必备的一个使用工具。
Webpack使用场景：
- 在本地与后端开发者进行接口调试
- 在本地进行页面的快速调试，无刷新调试
- 项目上线时，代码压缩到最精简状态，一方面安全，一方面节省网络资源
为了解决以上问题，webpack已经成为任何一个项目中必备的一个使用工具。 webpack官网
官网是最权威的学习地址。
Jest单测最推荐的框架
随着前端页面越来越复杂，单元测试成为保障前端页面安全的一道必备保障
这些年Jest 一路崛起，超越曾经最常用的单元测试框架 Mocha，以 61.2% 的使用率成功占据榜首
来自JS 2019趋势报告 2019.stateofjs.com/
总结
以上是我总结的入门到精通都要必须学的前端领域, 打好基础才是最重要的。大家加油！！！
欢迎计算机前端相关领域小伙伴加入我们，具体的招聘信息可进入公众号查看，欢迎关注。
本文由博客一文多发平台 OpenWrite 发布！
