2019前端学习方法浅谈

这是一篇前端自学路线指导文，也是饥人谷前端系统班课程规划的思路和实施方式。饥人谷从创立的这几年里在课程内容做了三次大改版，在课程形式上也做了三次大改版。改版的内因一方面源自于前端行业的迅猛发展，另一方面源自我和方方随着在授课方面经验的积累(超过5000小时授课经验、几万小时从0开始带数千学生的经验)对一颗种子如何科学快速长成大树不断有新的认识。什么时候该浇水、什么时候该施肥、什么时候该驱虫、什么时候该从温室移植到荒野让其经历风吹雨打。有些人可能不屑地说我就是一颗孤独的种子，在戈壁滩历经风吹日晒长成大树，现在我比任何大树都要强壮。这很可能是事实，但你可能没看见成千上万还没发芽就在戈壁滩枯死的种子。夜深人静的时候你偶尔可能也会回想，当初要是能一年成材谁TM愿意经历数年的踩坑与风吹雨打，如果给我一次重来的机会我会以最短的时间到达现在的段位。

下面聊一聊在种子长成大树方面我的小小心得。

第一、我们需要什么样的大树？身体强健、枝繁叶茂、适应环境又耐操。

我们暂不管如善于沟通、善于推进、做事细致等各种情商素质，单就技术来讲，说一个程序员水平高一般体现在两个方面。

1. 知识水平 。基本功扎实，技术研究深且广（熟读百家兵法，未碰一枪一棒）
2. 工程能力 。遇到各种从未接触的项目一把梭，多复杂未知的问题都能解决（布阵战术通通不管，上去就是砍）

前者侧重知识的深度、广度、科学性，为后者提供科学、高效、规范的指引。后者侧重动手能力、搜索能力、解决问题能力、举一反三能力，最终反映为行业经验、业务能力和学习能力。

我们也经常看到两种极端的反例。我们偶尔会听到或者碰到这么有这么一类程序员，jQuery+jQuery插件一把梭，一个经验用数年并且还真的完成了很多不可思议的需求。在接管项目，翻开他们的代码后你会五味杂陈，感叹他们内功之高工程能力之强竟然能用很多基础的知识和原始的工具构建如此复杂的项目甚至还看到各种主流工具的雏形，但同时你会把所有的代码扔进垃圾桶。我们也会碰到另外一类程序员，聊天时感觉段位极高，看他的博客你会被他的深度折服，但突然哪天跑过来问你这里报错是什么意思怎么调试。两种极端都不可取，而陷入极端的原因归根到底还是自己顽固的思想和对另一方面的轻视。

第二、我们需要怎样的培养过程？在合适的时间做合适的事，时刻痛苦但能正常承受，用最少的时间走完全部的路。

前端学习路上遇到的坑一般分两种。一种是不知道学什么，哪些是重点脉络，哪些是边角附属。另一种是在太早的时间学了超出理解能力的知识，在该提早熟练掌握的时候却在太晚的时间接触。

假设我们知道想要达到一个理想技术水平，在知道前端需要掌握哪些知识后，我们能像数数一样一个知识点接一个知识点、一块知识接着另外一块知识一直到重点吗？未必。

学习知识就像拨洋葱，需要一层一层拨，而不是一块一块拨。不要指望我学完A一次性学透后以后永远不需要学A了。知识拥有关联性，可能学习A需要先理解B，学习B需要提前理解C和D，而C需要A和B。所以第一遍点到为止学习各自独立的部分，第二遍再理解关联加深深度实战锻炼，第三遍系统覆盖并继续加深深度，可能还有第四遍。

比如是否一定要完全学完ES3、再学一遍ES5、之后再学ES6？未必，科学的学习方法是先弄清楚ES3/5/6的概念，一开始学习JS时就同步接触并使用常见ES6语法。从一开始项目基础练习阶段就开始使用最新的语法，同时保证能看懂旧的写法。到学习后期再系统过一遍ES6全部语法即可，此时才有能力对这些知识深入理解(深入理解是需要有一定的实践基础)。对于Http也是类似，一开始学习前端时需要有一定Http前置知识，但我们可以等后期在系统深入学习Http。CSS3也类似，我们圆角、阴影、渐变这些和设置字体颜色在难度上没什么区别，我们可以一开始就把这些用到项目中。

以下是饥人谷前端系统班课程规划，新版课程在五一后推出。对于自学者可作为学习路线参考。

学习路径

阶段1，能简单做事。通过学习对HTML、CSS、JavaScript有基本的使用能力，知道前端能干什么，并且能做出简单效果。花最少的时间，用最舒适的方式，学习以后的项目中70\%的常用代码。

阶段2，能做出复杂效果。通过大量各种类型的实战练习，对JavaScript的运用更加娴熟，有一定分析需求解决问题的能力，写代码有一定的套路，对代码的规范性、复用性有一定的认识。能满足中小公司在产品交互上的业务需求。阶段2的部分实战可以在合适的时机穿插到阶段1

阶段3，熟练使用生产环境下的前端工具。真实战场和模拟射击演练毕竟不一样，如何让自己写的原始代码变成发布上线状态，要做什么，用什么工具，有哪些提高生产力的方法？这个阶端就是弄清楚这些，并用这些工具改造之前的实战练习。

阶段4，知识进阶、差缺补漏。为了让学习曲线更平滑，对于同一个知识点我们把容易啃的放到阶段1和阶段2，现在则到了啃硬骨头的阶段。此时需要开始关注先前所学知识的深度，主流社区和各大公司的面试需求是个很好的参考。阶段4可以在阶段3完成后再开始学习，也可以一个个知识点慢慢贯穿整个后半期的学习周期中。

阶段5，框架经验和工程能力。不用框架的公司已屈指可数，没有框架项目经验很难找一份正经的前端工作。所以此刻先选择一个框架作为切入点。先用中低难度项目初体验，再用复杂项目覆盖框架涉及的周边技术栈，同时掌握中小型前端项目的架构能力、动手实操能力、解决问题的能力。你可以把之前做的项目用所学框架做个重构，把ES5全面换成ES6。 有了多个项目经验之后，需要进一步深入到框架底层原理。主流社区和各大公司的面试需求是个很好的参考。对于一个框架学的差不多之后，再去尝试学习另外一个框架。

阶段6，拓展提高。此刻你可能已经找到了前端工作想继续深入，或者你的求职目标是某大公司，那你可以继续深入学习。

饥人谷一直致力于培养有灵魂的编程者，打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实，他们以饥人谷为起点，足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程：加微信 xiedaimala03，官网:https://jirengu.com

本文作者：饥人谷若愚老师