你好，我是朱德龙，网名“亚里士朱德”，一直深耕在前端领域。

我于 2011 年毕业后进入了中兴旗下子公司成为 JSP 全栈工程师，负责开发 B/S 架构的软件系统，参与过亿级数据量的复杂系统开发；后又加入创业公司作为核心骨干开发网上预约平台，作为资深前端工程师从 0 到 1 搭建并开发过云服务平台的前端项目。现在，我作为一家创业公司的前端负责人，带领团队完成大数据、重型计算、深度学习等业务场景的项目前端开发工作。

前端工程师的困惑与挑战

工作期间我发现，前端工程师自身容易形成一些误解，常见的有两个：

工作年限 = 级别（能力）

框架/工具使用得越多越好

持有第一种误解的前端工程师认为，只要在前端这个领域工作的年限久了，就自然而然成为了高级工程师。具体表现是被动工作、被动学习，沉浸在自己的舒适区，直到工作数年后突然发现日子不好混了，自身学习能力又不够，遭遇所谓的中年危机。

要避免工作年限成为劣势，我的建议是每年定期回顾自己所做的工作，以此来判断你是在舒适圈内做熟悉、重复的事情，还是在不断地挑战提升自己。

第二种误解比较可怕，一般持有这种误解的工程师表现为使用过多种技术，但都只停留在表面，会调用 API 而已，杂而不精。一方面这种工程师所掌握的知识太浅，任何一个初级工程师，给予一定的时间和练习机会都能达到他的水平；另一方面也暴露了他没有深入学习的能力和精神，而这也是成为高级工程师的重要阻力。

时间对于软件工程师来说是一把双刃剑，如果利用好时间进行有效的知识积累，那么时间会是朋友，否则时间终将成为敌人。

举个例子，下面是某人的工作经验简述：

使用 zepto.js 和 CSS3 动效开发过一些移动端活动页面；

使用 React 和 Ant Design 开发过一个医药商城 Web App 的核心模块及后台管理页面；

熟悉 Git 工具和代码管理流程；

熟悉 webpack、Gulp.js 等工具的使用；

自学了 Node.js、Docker、MongoDB，能编写一些小项目。

如果他是工作 1 年的工程师，那么会让面试官有些小惊喜；如果工作了 3 年，应该也还算不错。但如果已经工作 5 年了，面试官可能要好好考察他一下了。

因为对于工作 5 年的工程师，面试官最看重的是工作能力，而这里面并没有很好地体现出来。虽然简历中表明他使用过主流框架和工具开发过项目，但从描述上看，项目本身并不复杂，且看不出其熟练程度。（这里值得一提的是，“熟练”这种主观性的自我描述建议少用，很容易适得其反，技艺越是精深的工程师对“熟练”、“精通”这种描述越谨慎，因为他们知道的越多，发现未知的也更多，同样也知道“人外有人”的道理。）

另外，前端工程师之间的能力和薪资存在着“贫富分化”的现象，而且随着时间的推进在不断加剧。

这也很好理解，薪资越高的工程师往往学习能力越强，从事着公司的重要岗位和工作，其成长速度也越快；而薪资低的工程师则往往学习能力有限，从事着低价值、重复性高的工作，也更容易困于瓶颈难以突破。

综合来看，前端工程师在职业发展和技能提升上，主要是被下面三个问题所困扰。

1. 前端知识点太多

相对于其他开发岗位而言，前端需要掌握三门语言。

最简单的 HTML 语言有上百个用法各异的标签，每个标签还有属性，还有 DOM 提供的 API；CSS 的知识点也不少，选择器有十几类，属性有上百种，常用的枚举属性 display 都有十几种值；至于 JavaScript 的知识点，看看六七百页的犀牛书就可见一斑了。

2. 前端技术更新速度快

前端框架有好几种，主流就有 2~3 种，这还不算每个框架的版本；

构建工具不断更新，有些框架还封装了自己的命令行工具；

不断出现新技术名词，如 SSR、PWA、Serverless、Flutter 等；

……

面对前端技术浪潮，有人开始抱怨“别更新了”、“学不动了”……当然，消极抱怨并不能阻止技术的进步，同时对自己的技能提升也起不到任何帮助，不应效仿。但过于积极学习的人，也并不十分可取。

记得有一次参加线下技术分享会，有工程师发言说自己要在两年内成为前端架构师，然后还说出了自己的计划，就是把各种所知的前端技术名词像报菜名一样说了一遍，随后再补充一句“看懂其源码”。

抱着类似想法的初级/中级工程师其实并不少见，以为拿到了一份技能图谱，或者背一背面试题就能一跃成为高级/资深前端工程师。

这种企图通过量变引起质变的方式并不可取，时间精力是一方面，更重要的是，囫囵吞枣的学习方式缺乏对前端知识系统的认知，只是把知识点堆砌在一起而没有形成自己的认知框架。就像沙子、钢筋、水泥堆在一起顶多只是原材料，只有经过建筑师之手，它们才能成为高楼大厦。

3. 前端应用场景越来越复杂

当 Node.js 出现的时候，前端工程师已经可以涉足后端了，甚至独立开发整个 B/S 架构的系统；而当混合应用、小程序等技术出现时，则意味着前端工程师可以开发多个终端系统。

不同开发场景下的实现目标、API 及调试工具又各有差异，比如微信小程序和钉钉小程序就提供了各自独立的开发工具，浏览器环境下为 JavaScript 提供了 BOM 和 DOM，而 Node.js 环境下提供的是 fs、net 等模块。

如何破局？

为了帮助前端工程师解决上述问题，我特意设计了这门课程，来帮助你建立合理的知识结构，并培养可复用的工作能力。

1. 建立合理的知识结构

合理的知识结构既指知识框架的可扩展性，同时也指每个知识点的完备性。

知识框架的可扩展性是指，在尽量少的调整自身已有知识结构的情况下，就可以不断将新的技术知识吸纳进来。就像架构师搭建的项目框架一样，能帮助开发工程师方便快速地完成新功能的开发。而差的知识框架就如糟糕的项目，会随着功能增加而变得复杂臃肿，最终不得不将代码推翻重构。

知识点的完备性是指，每个知识点不应停留在只会调用接口函数的程度，而是深入其实现原理，然后能加以运用，从而构建更复杂更具通用性的项目。

2. 培养可复用的工作能力

除了最基本的能看懂文档、调用接口的编程能力之外，还着重帮助你提升以下 3 方面的能力：

探究能力，深度探究技术背后的原理，并且能结合实践灵活运用；

解构能力，能够分析和分解复杂问题，并一步步解决；

归纳能力，建立知识点之间的联系，并找到其共性，从而达到举一反三的目的。

不管你是大厂螺丝钉，还是小厂顶梁柱，这些能力都将帮助你在晋升的道路上快步前行。

课程设计

本课程划分为 4 个模块，共 33 篇，主要深入讲解前端核心知识点的底层原理以及相关实战经验，希望借此帮助你建立起系统的知识框架，提升综合技术能力。

模块一，前端核心基础知识：带你深入理解前端工程师的必备技能 HTML、CSS、JavaScript 及网络协议，掌握它们的高级用法，比如 DOM 事件应用、CSS 管理、JavaScript 异步处理方案，以及 API 设计。同时深入浏览器内核的工作机制，让你成为一个懂页面样式，更懂浏览器的前端工程师。

模块二，实际应用场景解析：解析热门前端框架，理解其设计原理，让你不再只停留会用框架的程度。深入分析前端工程化中的重要工具 webpack，建立工程化、工具化思维，带你向高级前端工程师迈进。

模块三，综合能力提升：前端知识扩展部分，通过理解 Node.js 核心原理与应用场景，扩大你的开发能力边界，不再只局限于浏览器，同时通过算法与数据结构的学习，建立解决复杂问题的能力，助你构筑一条既深又宽的“护城河”。

模块四，彩蛋：谈谈工作之内、技术之外的内容，包括职业规划和面试技巧，帮你直取高薪 Offer。

课程虽然会同时讲到原理和运用，但你不用担心因此而增加了理解难度。事实上，我为你努力设计了合理的学习方式，会尽量先从你熟悉的“表象”开始，然后逐渐深入原理，最后探究一些高级应用场景，带你循序渐进地理解和学会实践。

课程寄语

前端这个职业虽然在软件开发中比较“年轻”，但其前景不可限量：服务端有 Node.js，客户端有 Electron，移动端小程序又以 JavaScript 作为主语言，PWA 更有颠覆原生 App 之志。更妙的是它们都是跨系统或者跨端的，这些技术大大丰富了前端技术的应用场景，使得前端工程师的天花板和薪资不断提高，前端工程师再也不只是“写页面”的了！

前端技术的光明前景也吸引了更多人加入到前端工程师的行列，各种前端新技术、新框架的出现，也在考验前端工程师的能力。

面对“前有险阻、后有追兵”之势，如何提升竞争力，建立自己的“护城河”，是每一位优秀的前端工程师都在思考的问题。而在这个课程中，希望我能够帮你打通基础知识底层原理来甩开追兵，提升学习和架构能力来克服险阻。

你也不妨在课程伊始，给自己设立个小目标，等到课程学完以后，再来回顾复盘。也欢迎你在留言区与我、或与同行的朋友分享你的成长和经验心得，一起学习成长，成为优秀的前端工程师！

-– ### 精选评论 ##### *彬： > 老师讲的很不错，讲出了很多前端开发者在学习与工作中的痛点，摆脱这些痛点，你才会脱颖而出。 ##### Cooper： > 前端技术层出不穷，没有方向就会迷茫，感谢老师的分享~ ##### **娇： > 真的是写出了我的心声,希望能够在老师的带领下,突破这个瓶颈 ##### **生： > 厉害 ##### **德： > 请问课程多久更新 ######     官方客服回复： >     课程每周一、三 更新哦～ ##### **涛： > 写到心底了 ##### **鸣： > 可以说是一针见血的指出了我的规划缺点了。从去年7，8月份，那时候我拿着一份java的知识体系图谱，然后心里默默的给自己定下目标，3年内要熟悉这张图的各种工具，并且熟悉其底层源代码，和实现原理。转眼，一年就过去了。那张图上的知识，所了解的几乎没有增多，更别提底层源码和实现原理了。由于新工作是做前端页面的，本人也一直想好好学习下javascript。一直基于表面的使用。面试问起前端知识，了解的很多，比如，三板斧：HTML、Css、JavaScript。主流框架：Vue.js，前端向后端进阶的Node.js。但真的让我深入的说出个所以然，真的，我发现几乎不能说出什么来。2020/7/13打开。给自己定个小目标。跟着老师学习，演化并形成自己的一套前端知识体系。 ######     编辑回复： >     加油~ ##### **文： > 开始开始，加油加油！！！😀 ##### **晖： > 从零开始学前端。。。 ##### *玮： > “前有险阻，后有追兵”，建立自己的“护城河”。加油！！！ ##### **川： > 对前端的学习不能图技能树大而全，而应该从下而上，深入理解基础知识，构建完整的技术体系 ##### **嘉： > 咿呀呀 ##### **龙： > 希望自己有所突破！！加油！！ ##### **飞： > 我购买了老师的那本-了不起的JavaScript工程师！前端要做的工作好多 ##### **淇： > 老师讲得不错 ##### **你辣条就跑： > 冲冲冲！！！先定一个小目标，学完后再来复盘🥳 ##### *方： > 对于前端知识的深度学习和广度上，养成一个正确的认识很关键 ##### *琴： > 我就是5年工作一年经验的前端，江湖人称"Copy攻城狮"，目标:形成自己的知识体系和框架！ ##### 肖： > 微信下单的怎样在app中用呀 ######     编辑回复： >     可以用微信账号登陆拉勾教育app哈