成为前端开发人员需要了解的一切
如今，学习编程的热情空前高涨，许多人希望掌握足够的技能找到一份工作。其中相当一部分人希望成为前端开发人员。即使在当前经济形势严峻的情况下，市场前景依然乐观——开发人员技能短缺的局面短期内不会缓解。
话虽如此，由于编程训练营和在线自学资源的激增，初级前端开发人员的市场竞争非常激烈。但这并不会让您气馁；这只是意味着您需要付出更多努力，才能在众多求职者中脱颖而出。
本指南旨在帮助那些正在考虑学习前端开发的人，以及那些已经开始学习的人。我们将定义前端开发人员的工作内容以及所需的技能。了解这些内容将有助于您更有效地规划学习过程，并设定切合实际的目标和预期。
目录
一些背景信息
历史上，前端开发人员主要使用 HTML 和 CSS，偶尔也会用到一些 JavaScript。如今，随着 Web 的发展和成熟，应用程序和网站变得越来越复杂。随着复杂性的增加，现代前端开发人员的职责范围也发生了变化。这导致前端开发人员的类型出现了细微但明显的差异。一方面，有些开发人员的工作重心主要放在 JavaScript 以及基于 JavaScript 构建的各种库和框架上。另一方面，有些开发人员的工作则更侧重于 HTML、CSS、设计和可访问性。这类前端开发人员通常被称为“UX”或“UI”开发人员。而那些主要从事 JavaScript 开发的前端开发人员，则越来越多地被称为前端“应用程序开发人员”或“前端工程师”。
值得注意的是，情况并非总是如此。前端和后端之间的界限并不像前端和后端那样泾渭分明——招聘广告中仍然有很多“前端开发人员”的职位名称。我之所以强调这一趋势，主要是因为它可能有助于你确定想要专注于哪些技术，以及将来申请哪些类型的工作。无论这种区分如何，前端开发人员的工作始终都局限于浏览器层面——这一点我们可以肯定。
我们来谈谈技能。
作为前端开发人员，你的工作和最终目标是确保浏览器内的代码流畅运行，最终为用户提供友好、高效且易于访问的体验。尽管前端开发人员（及其相关职位）的招聘广告中列出了各种各样的技能，但HTML、CSS和JavaScript仍然是浏览器将基本文本内容转换为你在浏览器中看到的网页的基础技术。无论你是否直接使用这些语言（例如，HTML可能作为模板语言，或者CSS可能使用预处理器生成），对它们有扎实的理解对于做好工作都至关重要。
一些前端开发人员职业发展路径图对于更全面地了解现代前端开发人员所需技能非常有帮助。正如您在下面的示例中所看到的，这里涉及相当多的技术和概念，而这并非我推荐的职业发展路径。但是，您通常会在职位描述中看到其中许多技能。
在深入了解每项技术之前，你应该从基础知识入手——前端的基础：HTML、CSS 和 JavaScript。
HTML
HTML 经常被忽视，但它其实值得更多关注。务必确保你对 HTML 有扎实的理解。它是浏览器在构建网站其他部分之前解析的第一个文件，也是赋予网页意义和结构的基础技术。你不应该专注于记忆标记语言中的每一个元素，更重要的是，你应该理解它在前端生态系统中的作用，以及它的语义和结构如何对提升网站和应用程序的易用性起到至关重要的作用。你还会经常使用 JavaScript 来修改浏览器中 HTML 的输出，如果你不了解 HTML，就很难有效地使用 JavaScript 进行修改。
CSS
在尝试使用 Bootstrap、Tailwind 等 CSS 框架以及 Sass 和 Less 等预处理器之前，请确保您精通 CSS 的编写。CSS 乍看之下似乎很简单，但实际上却可能非常复杂。您可以问问任何一位在大型代码库中维护数千行糟糕 CSS 代码的开发者。编写不佳的 CSS 会导致代码库臃肿不堪，难以维护。但是，如果您在新工作中就对 CSS 有扎实的掌握，那么直接投入到一些 bug 修复工作中应该不会太难。一旦您对 CSS 有了深入的理解，我建议您再去研究预处理器（如果您愿意，也可以研究框架）。
JavaScript
过去，jQuery（一个规模虽小但仍然非常流行的库）足以完成 JavaScript 方面的工作。它完全能够胜任任何基本的客户端逻辑——例如，切换元素可见性或实现基本动画。然而，由于 JavaScript 语言的飞速发展和普及，一个庞大的 JavaScript 生态系统已经形成。Angular、React 和 Vue 等前端框架和库的兴起正是这一生态系统的直接结果。以至于现在几乎难以想象没有它们，前端会是什么样子。即使你是一位更注重设计的前端开发人员，你也迟早需要与 JavaScript 交互。
前端框架无疑增加了前端技能的复杂性，最终要求开发人员对高阶函数和函数式编程等编程概念有更深入的理解。框架通常要求开发人员管理和使用更多工具和概念。以下是一些示例：
- 构建工具（通用框架工具）
- 客户端路由
- 组件驱动设计模式
- 国家管理
- 测试（单元测试、集成测试和端到端测试）
这并非意味着这些概念在框架和库之外就不存在。只是我们通常会发现，这些概念和模式已经融入到框架和库的整体编码理念和范式中。有一点是绝对肯定的：如果你想成为一名专注于 JavaScript 的前端开发人员，就必须拥有扎实的 JavaScript 基础和理解。考虑到以上提到的都是 JavaScript 框架和库，这一点似乎不言而喻。但问题在于，在使用 React、Vue 和 Angular 这类框架时，你往往需要遵循相当严格且规范的编码方式（例如，React 非常依赖函数式编程的概念），这主要是因为框架本身就对此有所规定。这并非坏事，我们可能会以“Angular 的方式”或“React 的方式”编写代码，因为从长远来看，这样更容易、更快捷地构建可维护且高性能的应用程序和网站。但需要注意的是，这其中也存在一些问题。这些框架和库通常会在底层对纯 JavaScript 代码进行抽象，这对于初学者来说可能并不理想。因此，最好的方法是在接触框架之前，先对 JavaScript 有扎实的理解。这样做有以下几个好处：
- 你会更快地掌握这个框架。
- 你将能够快速掌握新的 JavaScript 框架和库。
- 您将能够更有效地调试 JavaScript 问题。
不要试图学习所有东西
或许到了现在，你已经感到有些不知所措了。你可能一开始根本不知道从何入手，也不知道该学什么，而现在却面对着一堆乱七八糟的技术清单和复杂的图表，脑子都快炸了。别慌！这些复杂的路线图和路径图的问题在于，要深入了解的技术实在太多了——这对新手程序员来说尤其如此。而且，对许多前端技术有广泛但浅显的了解，真的比深入透彻地掌握核心基础技术更好吗？我认为并非如此。当然，肯定有人会反对我的观点。
我并不是建议你不要学习前端框架。我只是认为你不应该为了学习而学习——尤其是在你对 JavaScript 有相当深入的理解之前。归根结底，作为前端开发者，我们必须应对一个普遍存在的问题，那就是如何跟上瞬息万变的行业格局，以及用于构建网站的技术数量和范围的不断扩大。过去有人称之为“前端疲劳”。我认为，我们学习的方法（以及其他一些不太为人所知的技能）将决定我们前端开发者能否适应变化，并乐于学习那些不可避免会出现的新工具、框架和库。
请记住，你很有可能找到一份工作，却发现自己未必能用到所有最新的热门框架。假设你真的在一家虚构的公司里参与了一个很酷很潮的 React 项目。你工作了六个月，对这个项目越来越得心应手。也许项目已经接近尾声，日趋成熟，你也感到非常满意。突然，你的老板把你叫去开会，告诉你公司需要你下周开始参与另一个项目。这个项目将使用 Web Components（一种原生 Web 组件构建方法）。
如果你对 JavaScript 有深入透彻的理解，并且拥有良好的学习方法和流程，那么这种情况对你来说就会容易得多。因此，使用 Web Components 对你来说不会太难。当然，你需要一些时间来适应环境的变化和新的工作方式，但这完全在你能力范围之内。相反，如果你没有扎实的 JavaScript 基础，而是选择了“追逐框架”的学习路径，把几乎所有时间都花在学习不同的框架上，那么你可能会发现自己陷入了困境。
我并不是说你永远无法理解 Web Components 的工作原理，我相信你肯定能做到。我只是建议你专注于深入学习 JavaScript，这样会更容易理解，因为所有这些框架和库最终都是用 JavaScript 构建的。我确信会有人反对这种说法，尤其是那些只想专注于 React 开发的人。这当然很好，但 React 也会随着时间的推移而发展变化，并不断推出新功能。React 中的组件最初大多使用类（Class）构建，但在Hooks发布之后，现在整个 React 应用都完全使用函数式组件构建。这两种方法都需要扎实的 JavaScript 知识。
那我到底想表达什么呢？
除了精通前端基础技术（HTML、CSS 和 JavaScript）之外，掌握一些不太常被提及的技能也很有用。在我看来，这些技能即便不是更重要，也至少与基础技术同等重要。下面我运用自己一流的绘画技巧，绘制了一张技能图。
我们已经讲解了与代码相关的知识，现在让我们来谈谈其他技能：
1. 学习能力
你的学习方法和能力对于成为一名优秀的开发者至关重要。无论是前端、后端、全栈，还是其他任何技术栈，高效的学习能力都能让你紧跟技术发展的步伐，并让你在工作和求职中都极具价值。我们很多人都认为学习能力是与生俱来的，无法后天提升。事实并非如此！我曾就此撰写过更详细的文章，其中包含一些提升学习效率的实用技巧。如果你善于学习，你就会乐于接受学习新事物的机会，更重要的是，你将拥有极强的适应能力。记住，开发职业生涯意味着持续学习——专业的开发者也深有同感。
2. 调试技能
这一点看似宽泛，但作为一名开发者，你最终会花费大量时间调试自己编写的代码以及多年前其他开发者编写的代码。深入了解代码库和所使用的编程语言显然对这项技能大有裨益。此外，掌握一套系统化的调试方法也十分有用。精通代码调试几乎是必备技能而非可选项，它需要你有足够的耐心去验证你的假设，直到找到 bug 为止。作为一名前端开发者，你应该能够熟练地使用你常用浏览器（我个人更喜欢 Chrome 开发者工具）的开发者工具。充分利用各种调试功能，例如断点、调试语句和单步执行。
3. 阅读源代码的能力
大多数情况下，你将在一个已有的代码库上工作。它可能包含数万行（甚至数十万行）代码，这些代码是由许多开发人员编写的。坦白说，它很可能就是一大堆杂乱无章的意大利面条式代码。
能够阅读并理解源代码将帮助你快速提高项目和代码库的开发效率。在实际项目中，你的大部分时间都将用于阅读代码，而不是编写代码。因此，提高阅读源代码的能力不仅能让你快速掌握当前代码库和项目，还能帮助你全面学习和提升自身技能。
4. 提出正确的问题
这一点可能看起来有点傻，但却非常重要——尤其对于初级开发人员而言。提出正确的问题固然重要，但何时提出正确的问题同样重要。在实际项目中，你很可能会与一个开发团队合作。有些开发人员比其他开发人员更容易合作（这适用于与人合作的方方面面），为了确保你的队友支持你，请不要每隔两秒钟就问一个问题。要证明你已经花了一些时间尝试自己解决问题。最好把你采取的方法、哪些方法行不通、你认为问题可能出在哪里以及你是否倾向于某个潜在的解决方案都写下来。这可以向你提问的人展示以下几点：
- 你确实很在意独立解决问题。
- 你已经尽力了。
我刚入行做初级前端开发的时候，（根据我当时的工作内容）经常会用到我所谓的“30分钟法则”。简单来说，我会给自己30分钟的时间尝试解决遇到的难题。如果我毫无进展，遇到了真正的瓶颈，而且自己也查遍了所有资料，我就会向其他开发人员寻求帮助（当然，我也非常幸运，能在Potato和一群才华横溢、乐于助人的开发人员一起工作）。这样一来，我们就能更快地解决问题，从而为公司节省时间和金钱。从长远来看，你的团队会感谢你的，因为你成功地解决了自己的难题，并继续推进工作。
5. 沟通技巧
这项技能与我上面提到的内容密切相关。当你遇到困难（业内称之为“卡壳”）时，能够及时沟通至关重要，这关系到你和你的团队能否按时交付工作成果并达成目标。此外，当你对某个任务或目标不理解时，尽早沟通也有助于提高你的开发效率，并避免你给自己造成过大的压力。
沟通不仅仅是提出问题或障碍。友善亲切，同时能够用浅显易懂的方式有效解释复杂概念，将有助于他人更好地理解你。对于那些希望将来成为导师的人来说，这也是一项至关重要的技能。
最后想说的
学习前端开发不应该是一件压力巨大、令人不知所措的事情。如果试图学习太多技术，最终只会让你对技术一知半解。我认为，最好的方法是深入透彻地掌握 HTML、CSS 和 JavaScript，同时培养一些常被忽视的技能——例如学习能力、调试能力、阅读源代码的能力、提出好问题的能力以及沟通能力。如果你觉得自己准备好学习某个框架，那么只有在你对 JavaScript 有扎实的理解之后才能这样做。如果你一味追逐最新的行业热词，最终会迷失方向，忘记成为一名优秀开发者真正需要具备的素质。
我的建议可能听起来有点矛盾。一方面，我告诉你科技领域瞬息万变，你需要适应这种变化；另一方面，我又建议你专注于学习核心技术。试图学习所有东西很容易让你精疲力竭。如果你能彻底掌握基础知识，并学习一些不太为人所知的技能，那么你将拥有无限可能。你将能够学习并适应任何挑战。
有一点可以肯定，你永远都需要学习新知识；学习永无止境。正如我的好友赫拉克利特很久以前所说，“世间唯一不变的就是变化”。有些雇主可能在寻找精通多种框架和库的候选人。同样，许多优秀的雇主也会寻找拥有扎实基础知识、适应能力强、学习速度快，并且能够迅速上手代码库、快速贡献代码的开发人员。
感谢阅读！
如果你喜欢我的文章并想支持我的创作，请在推特上关注我😊
文章来源：https://dev.to/jrobind/everything-you-need-to-know-to-become-a-front-end-developer-bn1