高级前端进阶指南

前言

    与其说是写初中级前端的进阶指南, 不如说是对个人经历的一些总结.并希望能给前行路上的你带来一些启发,或者思考。

    首先简单的介绍下我自己,非科班出身,16 年毕业,大学的时候自己只是简单的写过一些网页,也都是自己写着玩儿练手的,水平可想而知.可以说找到一份工作都很艰难。

    办法总比困难多,这时可以说我做了一个对我来说最正确的决定,辞掉销售的工作之后,回到家后大门不出二门不迈,专心学习,半年之后,凭借自己的努力,南下深圳找到了一份满意的工作,就此踏入前端开发这个行业。

前期面对工作任务还是有很大压力的,因为毕竟只有理论基础,缺乏实践经验,可想而知,等待我的是加不完的班,有的时候甚至加班到凌晨 4 点,第二天照常工作.很感谢那段经历带给我的成长,不光是技术,还有思想层面上的进步,真正体会到自律给我带来的蜕变。

    经过两年持续的努力.有幸被任命为前端开发负责人.随之而来的是更大的责任,对当时的我来说确实是不小的挑战,单纯的做开发和带团队还是有区别的,包括但不限于,掌握一些简单的沟通技巧以及如何招聘,如何带领团队按时交付需求,并让身边的小伙伴都能有所成长.当然还要保持深刻的自我认知.可以说这段工作经历带给了我的成长的还是很大的.

之后便进入了现在的公司,也就是传说中的大厂,担任高级前端工程师.可以说这个世界一切都是有可能的,只要对自己有足够的信心,并保持足够自律就没什么问题.当然这些经历和大多数人基本相似,并没什么特别的地方.同样我也迷茫过主要的问题是前端体系的知识比较琐碎,不知如何下手缺乏整体的规划.

    在职场中也遇到过一些人和一些事,有频繁跳槽的.也有拼命努力的.世界本就如此,每个人的家庭及成长环境不同,也就存在了这些差异.只是个人不是很建议频繁跳槽.而是更应该关注自身的成长,充分知道自己的短板和优势,接下来分享一些个人的心得和体会.希望能对大家有所帮助,思考,或者启发.或者有不当的地方也欢迎大家吐槽.

本篇文面对1到3年的初中级前端工程师。

我的 blog 地址， 将在这里更新最新动态 ，欢迎收藏，保持联系✨

技能图

进阶指南

这张全景图每块都是比较重要的知识点，且都必不可少，那么作为初中级的前端工程师究竟该如何上手呢？学习是该有个顺序的，网上的资料大多是像上图这样，给出了全景图，但却没有完整的学习路线知道，就好像一个景区里面只有图纸，但却找不到入口，或者说从这个入口进去。但却找不到出口，于是迷失在了其中的一个景点里走不出来了。基于这个现状分享一下个人的经历，希望可以帮助到前行路上的你。

如何学？

首先这个话题相信不同的人眼里有不同的看法，在此我分享下我的一些观点。

(前三年建议踏踏实实学技术涨知识)

前端整个知识体系是比较琐碎的，拿一个简单的后台管理系统来说，可以实现的技术栈有很多，比如 react ， ng ，vue。这其中可能还需要做一些可视化的展示，这就需要了解 Echarts，antv之类的图形化框架。涉及到前后端数据交互的话，那就需要了解axios 之类的第三方工具或则库。所以我是这么走的，首先具备基本的业务开发能力，前期不去过多了解原理，当发现基本可以搞定所有的业务的时候（努力的情况下大概半年时间）来时按步就班的升级打怪。

基础篇

基础是重中之中，万丈高楼平地起，良好的根基基本能决定你后期能走多远，这里必不可少的两本书。一定要搞明白《javascript高级程序设计》《ES6标准入门》

框架篇

入门：

react官方文档
vue官方文档

选一个即可，react和vue 目前在国内的整体行情不错ng市场占有率很低。基本可以忽略，不要谈什么技术情怀，解决实际问题的同时又能填饱肚子才是关键

状态管理：

首选 react-redux 或者 vuex，reactjs小书,不可多得学习资料。学习完之后找个demo自己实现一遍，缕清楚整体的实现流程，不要偷懒，这是一个刻意练习的过程，redux版todomvc仔细研究其。带注释版本

到此react框架基本可以说使用起来没什么太大问题了，如果要继续深入的话可以搜一下jsx的实现原理，以及redux-thunk的源码可以翻一番。只有仅仅十几行代码。

yck大佬的原理解析也很不错。

构建工具

首选webpack，首先把他的官方文档整个通读一遍，搞清楚什么是loader，plugin，以及常用的插件，可以从零到一的配置一个完整的项目，这点很重要。个人亲身经历，发现还是有很多小伙伴只是停留在业务开发阶段，没有深入理解过其原理。这点一定要平时多加注意提升自身的技术水平。

学完这些，你基本上可以从技术角度整体把控住一个完整的小型项目了。

设计模式

为什么到这开始学习设计模式？因为这个东西跟数据结构算法似的，你会了就是会了，而且它可以说是一尘不变的，关键还不会贬值，而且对于你学习其他知识也很有帮助。这里推荐《JavaScript设计模式与开发实践》一遍看不懂就看两遍，自认为没那么聪明，所以我是老老实实的看了两遍，代码也都敲了。

数据结构算法

谈到这个话题，可能很多小伙伴就要问了。对一个前端来说，学这玩意儿有啥乱用，平时也基本用不到，刚开始其实我也有同样的疑惑，这就得看给自己的定位了。如果想在开发这条路上走，首先你不能仅仅把自己定位成一个前端，这样你会发现，你的路会越走越窄。数据结构算法可以说是高级前端的必修课程。这里送你一本 《学习JavaScript数据结构与算法》，啃完这本书应对一般工作或者面试基本没有任何问题了。

网络协议

网络协议可以说也是一个实力保本的技能，常见的协议基本也就那些，不会三天两头的更新。而且很多人还不会，这就体现出你的价值了。这里推荐极客时间的课程趣谈网络协议

性能优化篇

性能优化是个老生长谈的话题。可以说无论平时业务开发，还是面试都是必不可少的技能，这部分我没有可以练习。都是平时工作中积累的一些技能。

浏览器原理

作为一个前端工程师，只知其然而不知其所以然是很定不行的，一定要有打破砂锅问到底的精神。当然这也不是说一定要让你老老实实的去翻浏览器的源码。如果是这样的话，那得学到猴年马月去了。这里推荐《webkit技术内幕》老规矩。老老实实啃两边。这些基本都是性价比最高的知识。

工程化能力

这里可以去读一读create-react-app的源码。捡重点逻辑理解即可

全栈能力

到这你就要来时学习一些后端的技术了。建议Node.js入门。降低学习成本，和时间成本。一本《深入浅出Node.js》送给你，作为入门的不二之选。

结语

到此，如果你基本可以融会贯通的话，那么恭喜你，基本可以进阶到高级工程师段位了，年薪30左右，相信你的努力一定也是希望过上好的生活。再者一定要一步一个脚印踏踏实实的学习。最后附我的博客