Web 前端修仙指南：从小白到全栈

前言

决定一个人的最终高度，往往并非起点，而是拐点。

一个偶然的机会，我进入了现在的公司，虽然不大，但是在技术栈选择方面还是相对自由的，当初进来，也是看重这里有 Node.js 的业务。

但入职以来，修仙历程非常坎坷，下图统计了我一年来提交的代码量，包含 2 个 Nest 项目，但最多的还是前端代码，动不动就上万行：

老项目没有统计，自己跟着书敲的代码、写的 Demo 也没有统计，但代码只有敲出来，才能发现问题所在。就像学游泳，你看再多的视频，下了泳池还是不会。

正如马哲所说：实践是认识的基础（实践决定意识），实践是认识的唯一来源，实践是认识发展的动力，实践是检验认识的真理性的唯一标准，实践是认识的目的和归宿。

希望各位道友看了秘籍之后，要亲手敲一下，提升认识。

下面分享一下前辈们的指导和这一年来的全栈修炼心得，如有不对，请多指教。

前端部分

[1]炼气期

这个阶段很重要，可以测试你的“灵根”属性，是否适合这一岗位或行业。我见过很多“无灵根”的道友在此境界挣扎，也见过很多半路出家的道友，修炼突飞猛进，直奔元婴期。

如果光写一个静态页面就要憋上好久，前期可以理解，但经验 1 年以上的道友，那就“与洪福有缘，与清福无缘”，还是劝您早日还俗……

这个阶段，没什么华丽的招式，以打基础为主，公认要学习的就是 HTML、CSS、JavaScript 三板斧，以及内力的修炼。

功法秘籍

• 《CSS 权威指南（第 4 版）》
  • 本书相较于第 3 版多了很多内容，以至于分成了上下册，前期不要求全部读懂，学会基本布局、常用属性即可。
• 《JavaScript 权威指南（第 6 版）》
  • 著名的犀牛书，O'Reilly 的动物书系列，封面是一只犀牛，由淘宝前端团队翻译，书很厚，里面介绍了很多 API，但其实更像一本工具书，很枯燥，阅读起来有一定难度，只能慢慢啃。
• 《JavaScript 高级程序设计（第 3 版）》
  • 又称“红宝书”，公认的入门丛书（别看带着“高级”二字），值得反复阅读。每个境界的道友，都能从里面阅读出新的心得。
• 《代码整洁之道 - 程序员的职业素养》
  • 这是一本“炼神”类秘籍，写代码一定要规范、整洁、可阅读，好习惯要从一开始养成，不然同事可能会提着 40 米的大刀追你。

虽说是三板斧，但是秘籍里没有列出 HTML，这是为什么呢？

就个人经验来说，看书太吃力了，尤其是刚入门的，很容易失去兴趣，所以个人建议是：

1. 打开淘宝、京东等大型电商网站，直接按 F12 打开浏览器调试工具；
2. 选择 Elements 标签，也可以选择“工具面板”左上角的鼠标选择器，对着自己感兴趣的模块进行选择，然后查看他的 HTML 代码和 CSS 样式；

3. 结合 w3school，自己模仿着写一个类似的布局；
4. 直接写 PC 端可能太复杂了，可以切换成手机触屏版，点击 Elements 标签旁边的图标即可，顺便还可以学习一下 flex 布局：

[2]筑基期

这个境界，应该开始学会使用各种法器（框架）了，如 Vue、React、Angular 等，配合各种材料淬炼（UI 库），如 Element UI、Vant、Ant Design 等来提升属性，进而提升升级效率。

这里没有特别推荐的书籍，见仁见智吧，因为框架更新很快，建议直接看官方文档，掘金也有很多“从 0 到 1”的实战系列、小册，B 站、YouTobe 也有很多视频教程，不过要注意更新时间。

学会三大框架之一，市场价怎么着也得 10K 以上了（一线城市）。

[3]结丹期

筑基期只是会用框架，但到了结丹期，就要深究原理、提升思维模式了，不然很难凝结元婴，很多人终其一生也只能在这个境界徘徊，与大道无缘。

功法秘籍

• 《你不知道的 JavaScript 》
  • 俗称“小黄书”，分上、中、下三卷，深度剖析了一些 JavaScript 的原理和特性，中卷的性能优化和下卷的 ES6 解析，可以让你的招式更华丽。
• 《深入理解 ES6》
  • 封面是一只手拿着地图，另一只手指向宝藏。书的内容如其名，别看现在都 ES10 了，很多人连 ES6 都没整明白。
• 《数据结构与算法 - JavaScript 描述》
  • O'Reilly 的动物书系列，封面是一只刺猬，又叫“刺猬书”。有多少人还记得大学学的数据结构？数据结构是算法的基础，也是决定上限的技能，更是刷 LeetCode 的神器。看完这本书最直观的感受就是，在处理后端返回的乱七八糟的数据结构时，不用再冥思苦想了。
• 《精通正则表达式（第 3 版）》
  • O'Reilly 的动物书系列，封面是一只猫头鹰。学会正则表达式，可以帮助解决工作中不少的问题，比如参数验证、字符串的替换等等，但系统学习并不是一件容易的事情，这本书可以带你循序渐进地进入正则的世界。
• 《HTTP 权威指南》
  • O'Reilly 的动物书系列，封面是一只多纹黄鼠。做为 Web 前端，HTTP 是必修课，“权威指南”这个字眼表明了本书更像是参考手册，是为所有希望理解 HTTP 和 Web 底层结构的人编写的。里面涉及到很多面试题，比如问到烂的缓存问题。读完本书，半桶水的后端就再也不能忽悠、甩锅给你了。
• 《JavaScript ES6 函数式编程入门经典》
  • 这本书建议有一定的代码量为基础的道友阅读，主要讲解如何使用 ES6 实现柯里化、偏函数、高阶函数以及 Monad 等，是对 JavaScript 的函数的深入理解，属于“锦上添花”类秘籍。
• 《JavaScript 设计模式与开发实践》
  • 腾讯大佬-曾探编著（作者居然还是个健身教练。。。）工作中我们或多或少的使用过设计模式，只是自己不知道罢了，这本书由浅到深地讲解了 16 个设计模式，学会之后，受益无穷（还能吊打面试官）。但初学者要注意设计模式的使用场景，切记锤子理论：“当我们有了一把锤子，看什么都是钉子。”
• 《JavaScript 忍者秘籍（第 2 版）》
  • jQuery 之父 John Resig 联合编著，本书的特点是弥补了跨浏览器编程的领域，且对 JavaScript 进行了更深入的探讨。
• 《JavaScript 框架设计》
  • 司徒正美编著，详细讲解了设计框架需要具备的知识，造轮子必读之书。（前阵子听闻作者逝世，唏嘘不已、感慨万千）
• 《英语语法大全》
  • 张道真编著，分上下册，上册讲【词法】、下册讲【句法】。很经典的版本，只有这种书最脚踏实地，干货满满，比起市面上那种花里胡哨的英语书，简直就是一股清流。
• 《英语词根与单词的说文解字》
  • 李平武编著，最近大热的词汇词根记忆法，其实在 1982 年就有人研究过了，研究词根，就像我们学拼音一样，认真啃下来，不说 100%，最起码 80% 的单词，你没背过，光是看，就能猜出大概意思。

既然编程的母语是英语，那么我们无可避免的要学习。这不是崇洋媚外，很多一手资料都来源于国外，包括很多原版著作，等国内翻译好，已经过去一段时间了。词汇量决定下限，语法决定上限，不要求流利对话，只需要看懂文章即可。

其实老外写教程，不会有太多高级词汇和语法，还是很通俗易懂的，NestJS 就是我对着英文官网一点一点啃下来的。

上面列出的书单都是非常经典的，当然还有很多其他高分的书籍，不过本着“二八原则”，我们只要掌握这核心的 20%，就能解决工作中 80% 的问题。至于剩下的 20%，交给 Google 和 StackOverflow 吧……

这个境界的道友，在不同的修仙门派（公司），使用的技术栈可能有所不同，比如微信小程序、RN、Electron 等，但万变不离其宗，核心还是 JavaScript 和 HTTP，一通百通，不就是读读文档，踩踩坑罢了。

正所谓：“飞花摘叶皆可伤人，草木竹石皆可为剑”。

不过现在要关注一下 Flutter，这个是 Google 提出的解决全端问题的方案，语言是 Dart，估计未来几年会成为面试必备技能。

[4]元婴期

能走到这个境界的道友，相信已经可以游刃有余的解决业务问题了，在小公司也可能成为小组的技术 Leader，这个境界，既要深入底层，又要对其他领域有所涉猎，俗称 “T” 字型人才。

若觉得化神遥遥无期，可以在此境界涉猎后端知识，闲暇之余自己写个程序放到应用市场，万一火了，赚的盆满钵满，去买房收租，或投资其他有大量被动收入的项目，实现财务自由，再也不怕 35 岁被裁了。

功法秘籍

• 《编程珠玑》
  • 这本书包含了一些非常底层的编码技术，但同事也蕴藏了相当多的软件工艺方面的“珍珠”。如果你不能幸运地跟一位大师级的程序员并肩而坐，并且在一起工作大约一年时间，那么买一本《编程珠玑》就是退而求其次的最佳选择了。
• 《高效能程序员的修炼》
  • 能不能成为一名成功的程序员，很多时候与技术能力无关。本书提到了很多编程之外的问题，如果你想创业或打造自己的产品，那么这本书值得一读。
• 《计算机网络》
  • 谢希仁编著，大学教材，比较全面系统的介绍了计算机网络的发展和原理体系结构，如果大学没有好好学习，或者学了但是理解不深刻的同学，可以再读一遍，相信一定会有新的认识。
• 《TCP/IP 详解（原书第 2 版）》
  • 计算机科学丛书系列，分 3 卷：
    • 卷 1：协议；
    • 卷 2：实现；
    • 卷 3：TCP 事务协议、HTTP、NNTP 和 UNIX 域协议。
  • 既然是 Web 开发，当然离不开网络协议，这本书很深入的介绍了 TCP/IP 的原理，个人觉得，做为前端，读完卷 1，就基本可以在这一块领域吊打面试官了，后面两卷，有精力的道友可以继续修炼。

[5]化神期

这个境界的道友，基本是阿里 P8 、腾讯 T3.2 以上的大佬了，是一线作战的小队长，向下提供决策，向上提供有效的信息。简单说，只需搞定三件事：定模式，组团队，推业务。

这个阶段，技术不再是主要修炼点，如何带领团队作战才是公司希望看到的。

功法秘籍

• 《毛选》
  • 不解释
• 《囚徒健身》
  • 没有健康的身体，DPS 再高，也无法持续输出。不是所有的公司都配有健身房，就算有配，也不一定有大块的时间锻炼。这本书不需要那些昂贵的健身器材，全靠自重训练，一张瑜伽垫、一堵墙、一个篮球、一个引体向上杆即可。
• 《非暴力沟通》
  • 工作中我们难免遇到各种扯皮、推进工作受阻、照顾下属情绪等等问题，改变自己永远比改变世界要容易。
• 《麦肯锡工作法》
  • 高效率工作的秘籍，也是“向上管理”的秘籍，记住，“你的时间非常值钱”。
• 《墨菲定律》
  • 本书介绍了很多经典的人生定律、法则、效应，并配有案例，看完之后，会发现生活中遇到的很多事情都有章可循，善加利用，会有四两拨千斤的起效。

本境界推荐的秘籍，其实任何境界都可以看，但只有切身经历过职场的厮杀，才会有一种恍然大悟的感觉。

还有一些管理类、心理类的书籍，就不在这里一一推荐了，比较出名的有《自控力》、《人性的弱点》、《人性的优点》等等，这些可以根据自身需要，适当涉猎。

后端部分

后端的语言有很多，老牌的 C++、Java、PHP，近年来大热的 Python、Go 都是很不错的选择，但如果你是从前端转全栈，首选肯定是 Node.js，毕竟对于 2~3 年的前端来说，几乎是零成本过渡。

因为异步的机制， JavaScript 在处理一些高并发的场景有一定的奇效，而且，其实对于大多数公司来说，也轮不到一个前端去写后端部分，通常都是 Java、PHP 等道友负责处理核心业务。

那么，Node 更多的是处于中间层转发的存在。前端可以在此，将不规范的数据整合，弄成自己想要的格式，直接返给页面，岂不美哉？

[1]炼气期

入门的话，建议直接找那种“从零到一”的教程，只有自己亲自写了接口，并调用成功，才能更直观的感受到后端的魅力。有了感性认识，再找书去阅读，提升理性认识，这才是我们前端的修炼之道。

目前，后端框架有挺多的，主流的有 Express、Koa2、Egg，不过个人推荐入门用 Nest，这款框架使用 TypeScript 为书写语言。写后端嘛，要讲究严谨，之前写前端时，或多或少留下了一些坏习惯，使用 TS 来强行规范一波也不是什么坏事，TS 也是未来的趋势。而且该框架采用 MVC 设计模式，日后要转 Java 这类领域，在思维模式上，也几乎无缝衔接了。

我的专栏中有写 NestJS 实战教程，完全的从 0 到 1，还包含了一些后端开发流程，比如打造日志系统、权限认证等，足够入门了，欢迎各位捧场。

关于数据库，这里推荐的是 MySQL 修炼路线，当然 MongoDB 也是时下受欢迎的数据库，不过大多数公司，基于历史原因，还是使用 SQL 的多，如果是自己做项目，尝试 MongoDB 也未尝不可。

功法秘籍

• 《深入浅出 NodeJS》
  • 朴灵大神编著，可以了解到 Node.js 的来龙去脉，还介绍了运行原理、实战案例。无论对于入门，还是有经验的道友，都是不可多得的好书。
• 《SQL 学习指南》
  • O'Reilly 的动物书系列，封面是一只安第斯有袋树蛙。学后端，又怎么能离得开数据库呢，SQL 作为关系型数据库的语言，用这本书入门再合适不过了。

[2]筑基期

在入门之后，就要开始在性能上下功夫了，虽然很多后端工作了两三年，也还只是会说、学、逗、唱……噢不对，增、删、改、查而已，但就是这 4 样，也有很多可挖掘的地方。

然后就是应付一些高并发的场景，作为补充，Redis 将是个不错的选择。

功法秘籍

• 《高性能 MySQL》
  • O'Reilly 的动物书系列，封面是一只雀鹰，很厚的一本书。书如其名，深挖 SQL 的特性，突破性能极限。精读本书之后，你就是自己的 DBA （Database Administrator，数据库管理员）。
• 《Redis 入门指南（第2版）》
  • 李子骅编著，这本书的介绍很全面，且是阶梯式的学习，非常适合用于 Redis 入门。

Redis 就几种数据结构，所以之前推荐的数据结构书籍就派上用场了，但就前期来说不需要掌握得多精通，学会存/取即可，但怎么存/取就是关键了，这里有个网站，可以速查命令：Redis 命令参考

[3]结丹期

在这个境界的道友，通过增、删、改、查，已经能处理很多业务场景了，但面对一些特别复杂的场景，是否又感觉力不从心呢？

编程的本质其实是数学，无论你处于哪个行业，数学永远是拉开差距的那一项。所以，就遇到的瓶颈来看，这个阶段恶补数学，还是有必要的，不然很难结婴。

如果在校的时候，有潜心研究过数学、算法等功课，那么恭喜你，在这一境界的修炼将会突飞猛进。但据我观察，很多前端都是半路出家的，虽然英雄不问出处，但相对于科班的道友，还是有不少的劣势的。

公司会抛弃你，朋友会背叛你，数学不会，数学不会就是不会。

功法秘籍

• 《几何原本》
  • 欧几里得[古希腊]编著。如果让我推荐一本入门数学的书，那我会毫不犹豫的推荐这本。爱因斯坦说过：“如果欧几里得未激发你少年时代的科学热情，那你肯定不是天才科学家。”这本书由一个又一个定义、公理、命题组成，还包含了一些推论，证明过程巧妙而又不失优雅，是入门或重拾数学兴趣的不二之选。
• 《高等数学 - 同济大学版》
  • 这个没什么好说的，微积分是打开高阶数学大门的钥匙，有多少理科生在“高数”这棵“树”上挂过，即便多年后，对这本“绿皮书”也依然充满了恐惧。我读大学那会儿是第六版，现在貌似已经到第七版了，庆幸毕业时没扔掉，上面还有很多学习笔记。
• 《微积分入门》
  • 小平邦彦编著，豆瓣高分，相对于中国大学的教材，这本书理解起来相对容易一些，可以配合高数一起食用。别看是入门，里面也有很多深奥的问题可以反复品味。
• 《概率论与数理统计 - 浙江大学版》
  • 如果让你实现支付宝的“周周乐”活动，你会怎么做呢？生活中充满了概率，学习概率论还是很有趣的，比如知乎一个挺有意思的命题：要集齐 12 星座的男/女友，至少需要谈多少个？
  • 还有一个，如果有个按钮，如果按一下，可以无偿获得五千元，但有百万分之一的几率会当场毙命 ，你会按么？按，为什么不按，我会按到财富自由为止，要知道，每天出门上班，每个月都有十万分之一的概率遭遇交通事故去世，而且比起 996 的猝死率，百万分之一又算什么呢。
• 《线性代数 - 同济大学版》
  • 如果你想进军 AI 领域，那线性代数将是必不可少的技能，比如大量的图像数据处理，如果没有线代，那将是一场灾难。就算是其他领域，也能发挥不小的作用，具体感受要亲身经历才知道。
• 《离散数学及其应用（原书第7版）》
  • 计算机科学丛书系列，没有选大学教材的原因是，这本书更贴近计算机实战问题。离散数学是学习数学科学中所有高级课程的必由之路，为许多计算机科学课程提供数学基础，如数据结构、算法、数据库理论、计算机安全、操作系统等。
• 《算法导论（原书第3版）》
  • 计算机科学丛书系列，书很厚（1200+页），非常，非常，非常难啃的一本书，涵盖了很多经典的算法问题，如果没有一定的数学基础，还是不要轻易尝试了。当然，回报率也高得出奇，年薪都是几十上百万的存在。
• 《算法（第4版）》
  • 图灵程序设计丛书，橘黄色封面，相较于《算法导论》，阅读起来稍微简单一些，但也简单不到哪儿去。全书使用 Java 编写的，所以要转化为 JavaScript 实现需要一定的代码功底。
• 《计算机程序设计艺术》
  • 又是一个非常难啃的系列，本书共 3 卷，是公认的计算机科学领域经典之作，深入阐述了程序设计理论，对计算机领域的发展有着极为深远的影响。比尔·盖茨曾说：“如果你完完整整读完了《计算机程序设计艺术》，请立刻给我发一份简历。”
• 《Linux 命令行与 shell 脚本编程大全（第3版）》
  • 既然是后端，那么使用 Linux 环境是必不可少的环节了（什么，你说用 Windows 部署？打扰了。。。）高效的使用 Linux 命令，会节省不少时间，比如在上百万行日志中寻找关键内容。另，vim 是世界上最好的文本编辑器。

本境界主要推荐了数学和算法相关的秘籍，其实有很多事可以在这个阶段做的，比如阿里云/腾讯云的部署、Docker、微服务，还有最近腾讯出品的 Serverless，这些去读官方文档和博客教程即可，或者你也可以自己购买相关书籍，就不在这里特别推荐了。

[4]元婴期

到了这个境界，和前端的化神期差不多，也是一线队长的存在，除了要掌握一些管理技能外，还可以比较一下其他语言，比如 Go，取长补短。

功法秘籍

• 《重构 - 改善既有代码的设计（第2版）》
  • 有多少次，你对前人留下的烂摊子愤气填膺？又或者，看着自己之前写的屎一样的代码，尴尬不已？这本书经典再现，并使用 JavaScript 语言描述。但切记，不要为了重构而重构。本书最大的指导意义，在于让人一开始就知道什么是好的代码，并尽量避免写出“坏味道”的代码。
• 《Go 程序设计语言》
  • 计算机科学丛书系列，作为 Go 语言的入门丛书，配有数百个典型示例。
• 《Go 语言实战》
  • 封面是个背着弓箭的勇士，书如其名，可以配合《Go 程序设计语言》一起食用。
• 《鬼谷子》
  • 能双修到这一境界的道友，怎么着也是公司内不可替代的存在了，鬼谷子教你怎么通过捭阖之术，游刃有余的处理公司内外的人际关系，实现“利益”最大化。
• 《孙子兵法》、《孙膑兵法》
  • 如果道友想向更高一层迈进，比如进入决策层，那么学习一点兵法或多或少会有点帮助，很多国际公司的高管、董事都拜读过《孙子兵法》，老祖宗的智慧不得不佩服。
• 《道德经》
  • 既然是道家门派，那么祖师爷留下的瑰宝又怎能不拜读一下呢？结合阴阳之术，相信写起代码来，也会充满哲学的气息吧。里面还涉及了一些管理的哲学，与谷歌文化有种不谋而合的默契。
• 《春秋》、《孟子》、《资治通鉴》等历史文学
  • 秦人不暇自哀，而后人哀之，后人哀之而不鉴之，亦使后人而复哀后人也。
  • 人类从历史中学到的唯一教训，就是人类无法从历史中学到任何教训。

【IT 摸鱼事务所】的"蜗牛老湿"在群里讨论了 Go 和 Node 的区别：

“Go 负责冲刺，Node 负责拒绝，两者都要学，符合太乙两仪八卦的阴阳调和之术。”
“如果只学 Go 而不学 Node，容易阴盛阳衰，长时间会导致肾亏，反之亦然。”
“程序员，无论啥语言核心都是内力，学别的，只是为了开阔视野，更好的学前端。”
“武侠的世界里，刀学不会，就去学枪，枪学不会就去学剑，没有意识到无论啥武器，内力才是最重要的。”

[5]化神期

这个境界的大佬，现实中我还没遇到过，但下面推荐的书，肯定能用上：

功法秘籍

• 《颈椎病康复指南》

结尾

前端是一种比较感性的岗位，所见即所得，从前端入行，学习起来不至于枯燥无味。

前端本来是从后端分离出来的一种岗位，就像本来也没有产品经理（国外的产品经理，基本都有技术背景，国内……人人都是产品经理）。但近几年的发展让前端地位突飞猛进，加上各种框架层出不穷，降低了进军后端的门槛，使前端进阶到全栈成为了可能，未来独立成为产品制作人也是有可能的。

这里再次奉上“蜗牛老湿”的经典语录：

`