我是如何学习前端的

前言

随着前端的大热，越来越多的从业者选择入门前端，进阶，以及后续可能成为大神。但是很多人可能是出于某个发展的瓶颈阶段，不知道下一步应该学些什么，应该如何检验自己的能力。

我从实习工作到今天，对前端从业四年半，也做过java研发，设计，产品的兼职。从事过中小公司的前端技术总监，希望本文给的一些建议能给你一些职业发展的启示。

自我认知

• 自己的薪资水平，能力水平，最好建立下思维导图或者知识拓扑图
• 自己的认知面：典型的认知四象限
• 自己的职业发展目标与规划
• 自己近期的学习与提升计划
• 自己工作效率，性格，执行力等

大前端认识

• ued方向，主要偏向产品、设计、程序结合方向，需要知晓产品以及设计的相关专业知识，做更好的前端成品
• 扎根基础知识，不要觉得css，兼容，js基础，很简单就不去学，不去研究。行内的张鑫旭基于css2能研究十年，其中很多css的解决方案或者原理是很多人的知识漏洞。
• 大热的前端框架：vue,react,ng需要全部知道，但是建议1-2年内只深入学习、使用、研究其中一种，并对其成果做出总结。
• 打包，打包工具gulp,webpack,parcel也是很多人只知道皮毛就生成熟悉，这里我只说先看下自己除了简单的配置外，能针对webpack做出哪些优化配置，是否已经是最优的了，还是只是官网api复制粘贴下来打包好就算结束了。
• 前端工程化：主要指的是规范，工具，开发流程，部署，监控，持续集成角度。
• 深入编程模式，框架原理，代码优化
• 后端方向，主要是以nodejs为核心的后端框架express,koa等。
• 业务逻辑整理，这点是很多人可能会忽略的，当前端涉及越来越多的业务的时候，你可能必要的要懂一些流程图，时序图等。

学习四部曲

学习基础知识

按照官网入门教程写demo，积累一期的学习资源，包括官网、学习教程、学习视频、某些人的专题博客。

项目实践

毫无疑问，大多数公司的大多数项目可能用的都是最常见的技术知识，或者架构师已经搭建好的技术模型，可能更多你只是百度或者复制粘贴的过程。但你也会遇到技术或者逻辑上的问题，那么你需要的就是把它记下来，项目完结后整理成解决方案。

技术进阶

这个阶段你做业务没有任何问题可以说，基础知识也能驾轻就熟，但差的是架构能力、深度、业务技术分析等。那么你就需要从更深入的角度做技术选型的分析、进一步学习。能够对比出某些技术在解决某些问题上对应的方案特点是什么。能够针对某一特定话题提出自己完整、成熟的方案以及解析以及可能的更好的方案。

技术方案

当你完成大量积累之后，可以尝试自己做知识拓扑，自己的知识体系。网络下对自己对公司友好的技术理论，结合具体需求给出高效方案。最好的方式就是：写技术手册，写博客，然后与和自己同等或者稍高level的同行进行沟通讨论优化方案。

职业发展

关注前端行业趋势

• 技术趋势，主流使用的框架，打包工具，优化方案，解耦方式等
• 公司用人趋势，岗位jd核心技术点的要求指数，要求深度，能解决什么问题。

关注技术来源

• github,知乎，cnode,vuejs,google,stackoverflow,react，前端网以及一些知名的公众号
• 大牛的博客以及开源项目
• 书评较高的经典书籍，比如深入浅出nodejs,css揭秘，你不知道的js，js编程，深入理解bootstrap,html与css权威指南，pwa进阶指南等
• 行内的技术交流会，比如d2,h5峰会等

学习与工作的迭代方式

• 选一款好的记录软件，比如印象笔记
• 选一款好的设备以及开发工具，比如mac+chrome+vscode
• 有自己的整理知识的方式，比如电子书，技术博客
• 有自己独立在研究或者学习的项目，放在github进行托管
• 有高效工作与学习的整理方式，比如思维导图
• 有对技术以及其他任何方面拓展延伸分析的执念，并就一个点达到最佳状态

友情链接

最后奉上我个人总结的四本线上技术手册，一直在整理，从未被完结。。。

• 兵哥干货铺
• 前端技术指南
• 前端工程化指南
• 产品规范
• 职场那些事