从初学者进步到中级开发人员

所以，您不再是一个完全的初学者了：您已经建立了一些网页，学习了 HTML、CSS 和 JS 的基础知识，也许您已经找到了一份初级开发人员的工作。

现在怎么办？

网上有很多关于初学者入门指南的信息，但一旦你掌握了基础知识，路线图就变得不那么清晰了。这并不是因为缺乏内容：市面上有很多适合各种技能水平的指南。而是，大量的信息、教程、观点和技术让人不知该选择哪条路。

建立坚实的基础

你的进步路径通常取决于你想做什么。话虽如此，仅仅提高基础技能总是没错的。假设你最终想成为一名 React 开发者：是的，现在学习 React 无疑能让你更快地融入生态系统，但忽略 React 所基于的语言——普通的 JavaScript——可能会限制你未来的发展。如果你想提升自身的潜在技能水平，学习基础语言的来龙去脉才是关键。最终，你会写出更简洁、更清晰、更清晰的代码，并且你能够完全理解，从而减少花在找出代码无法立即运行的原因上的时间。不要觉得你不能尝试不同的技术：例如，学习 SASS 与 CSS 并无太大区别，它既能教会你基础知识，又能让你获得预处理器的优势。React 仍然只是 JavaScript 的底层实现。你会通过推动自己走出舒适区来获得最好的结果，以确保你以稳定的速度学习，同时也确保你有足够的时间来吸收所有的信息。

如果你想成为代理机构的前端工程师，请掌握基本的 CSS 代码，并充分理解每一行 CSS 代码的功能。如果你是后端开发者，请在学习框架之前，先理解关键概念，并尽可能多地自己动手构建代码。如果你以后想开发前端应用，请先掌握原生 JavaScript——暂时忽略 jQuery 和任何炫酷的框架。当然，你也可以尝试一下——但请记住，学习编程是一门终身事业，基础不好就往上爬会影响你的工作质量。

请记住，我是一名前端开发人员，而这些建议通常适用于其他前端开发人员。我不认为每个人都应该以成为全栈开发人员为目标；但是，我认为每个人都应该对整个生态系统有所了解，因为即使是一点点经验，也能让团队合作变得更加轻松。

不要把这份清单当作改进的全部：如何改进取决于你想做什么。然而，以下这些领域是大多数开发人员可以在某种程度上学习的。

1. CSS组织

虽然这并不性感，但是糟糕的 CSS 组织是导致 Web 开发中最令人头痛的原因。

你有多少次尝试修改某个类，却发现它影响了整个网站的元素？或者只是稍微修改了几个 HTML，就导致整个组件崩溃？

方法论的存在是为了系统地避免这类问题。通过在编写 CSS 类时遵循特定的语法和一套规则，我们可以过滤掉大多数常见问题，让自己专注于构建内容。

奇怪的是，这些方法论大多旨在让你少用 CSS 中的某些功能。虽然 CSS 是一门不错的语言，但大多数开发者都知道，CSS 可能是一种混乱的语言。即使在不同的方法论之间，每种方法论都有各自的规则和最佳适用场景。

了解各种方法论不仅能让你轻松融入任何团队，还能为进一步完善 CSS 开发提供灵感。最重要的是，你会少些烦恼！没有完美的方法论，所以有时你需要根据具体项目调整方法。CSS 的组织远非一个“已解决”的问题，因为语言的灵活性为新方法的出现提供了充足的空间。

实用优先的框架最近非常流行，尤其是在 React 和 Vue 开发者中。我写过不少关于Tailwind CSS 的文章，它只是实用优先理念的一种体现。但我不建议任何初学者在深入了解原生 CSS 和 SCSS 之前，贸然尝试 Tailwind、Bootstrap 或任何打包了 CSS 类的框架。如果你想尝试一下，不妨思考一下如何使用这些技术来保持 CSS 的 DRY 原则。

2. 只使用 CSS

这里有一个有趣的练习：构建一个功能齐全的导航栏，带有汉堡按钮和多级滑动移动菜单，无需一行 JavaScript。它的外观并不重要，重要的是它能够像你期望的移动导航一样运行。令人惊讶的是，你可以从简单的 CSS 中榨出如此多的用处，例如切换“类”。你可以使用同级选择器~或+并排选择器checkbox:checked来创建切换按钮，并使用 触发它们<label>。

CSS 的性能远高于 JavaScript，所以虽然你不应该过度使用这些技巧，但最好还是了解一下类似的性能捷径。一般来说，即使 JavaScript 不可避免，一个好的规则是在不影响功能的情况下尽可能地精简它。通常情况下，越简单的东西，出错的可能性就越小。一个常见的例子是悬停状态：你可以使用mouseover事件添加一个类来使下拉菜单可见，但大多数情况下没有必要，因为你可以使用嵌套的悬停状态，这对用户的硬件来说更容易。

没有图片怎么样？这个background属性出奇地强大：它可以用于创建类似 SVG 的复杂形状。Alvaro Montoro甚至只用一个元素就创作出了荷马·辛普森 (Homer Simpson)。

3. 单一事实来源

在所有编程中，你都应该力求为所有内容提供单一的可靠来源。这就是 DRY（不要重复自己）编程的核心思想。为了避免重复，你需要只定义一次所有内容。根据具体情况，这一点会以不同的方式体现。

在 CSS 中，您需要将所有反复出现的值存储在变量中。颜色、字体、最大宽度，甚至间距（例如内边距或外边距）都是在整个项目中趋于一致的属性。如果您有权限，通常可以根据品牌指南为样式表定义变量。否则，最好在开始之前先仔细检查网站设计并定义变量。

在 JavaScript 中，你编写的每个函数都应该只出现一次。如果你需要在其他地方复用它，请将其放入单独的文件中，与你当前工作的上下文隔离开来。你通常会util在 JavaScript 文件结构中看到一个文件夹——通常，你会在这里找到应用中使用的更多通用函数。

变量也可以作为事实来源。将全局常量（即在整个应用中使用的、永远不会改变的变量）放入单独的文件中进行组织是一个好主意。有些开发者会使用 来命名全局常量，以CAPITALISED_SNAKE_CASE区别于常规变量。

同样，要习惯使用环境变量。这些是全局常量，会根据环境变化：假设你有一个用于测试的“开发”API 和一个用于生产的“实时”API——你可以在单独的文件中定义这两个 API，当构建应用时，你可以让它在“开发”或“生产”环境中构建。这意味着你在发布应用时无需更改大量变量——超级有用！

3. 选择香草

忘掉 jQuery 或其他你通常会用到的库吧。尝试不使用任何外部包，只用原生 JS 来构建你的网站。如果需要，你可以随意编译你的 ES6/7，但仅此而已。

一开始你可能会觉得有点难，但避开第三方代码会迫使你学习应用程序的每个部分是如何运作的。专注于创建可复用的实用程序，例如选择元素、操作 DOM 和处理请求。

开发将会很缓慢，但目标不是快速构建事物：相反，您应该花大量时间进行研究，以了解这些东西，从而了解您的工艺的基石。

学习字符串和数组方法、如何使用对象、使用 Promises 等等。使用Exercism等服务进行日常练习是学习每种方法的好方法，但在实际应用中使用它们才能让你从初学者晋升到专家级别。你会发现，条条大路通罗马，而你选择如何解决特定问题将取决于具体情况以及（在一定程度上）你的个人风格。例如，有些人喜欢使用 来处理承诺.then().catch()，但我总是使用，async/await因为我觉得语法更整洁。有人会认为你应该使用 x 而不是 y，但了解每一种可能的做事方式是个好主意，因为你不知道你是否会被派到一个有遗留代码的项目中，或者之前的开发人员是否只是有不同的做事方式。`

想构建自己的响应式框架吗？不妨观看 Tejas Kumar关于如何创建 React 基础克隆版的精彩演讲。你无需亲自构建，只需尝试理解它即可。你会发现，你每天使用的技术虽然无疑很复杂，但并非像乍一看那么难以理解。

4. 管理自己的服务器

虽然 DevOps 和服务器对新手来说可能令人望而生畏，但拥有一台小型服务器来操作，能帮助你轻松上手。循序渐进：你无需立即学习所有内容：接触服务器相关的概念和配置，这些知识会逐渐在你的脑海中扎根。

即使你只是前端工程师，或者对运营自己的网站不感兴趣，了解 htaccess、robots.txt 和部署管道之类的知识也会让你在雇主眼中更具吸引力。你几乎肯定会在某个时候需要部署到服务器上，所以提前学习这些知识会让你在竞争中领先一步。拥有一个展示你想法的平台，能为你带来无限可能，提升你的知识水平，而且这本身就很有趣。

5. 学习正则表达式

学习所选语言的正则表达式将为你带来诸多机遇，包括网页抓取，它允许你将任何网页用作数据源。它还能让你以比使用字符串函数更简洁的方式编写复杂的字符串逻辑，例如验证表单内容。正则表达式通常用于验证字符串的格式，例如确保电话号码的长度正确，或邮政编码的格式正确。

为了帮助您入门，这里简要介绍一下我在 JavaScript 中经常使用的模式（语法可能会根据语言的不同而变化）。

// replace 'tag' with your html tag of choice
/<tag(.*?)>|<\/tag>/gi

您可以使用它(.*?)来创建一个捕获组，以匹配其左侧和右侧字符串之间的任何内容。

() - creates a capture group
.  - matches any single character
*  - matches the previous character infinitely e.g. 'heel'.match(/e*/) = 'ee'
?  - tells * to match the minimum number of times. You might not need this!
|  - 'or' operator

此功能允许您查找特定 HTML 标签的所有实例，无论其属性是什么。这对于在 IDE 中查找和替换非常有用，并且可以根据您的特定需求进行调整。

您可以包含另一个捕获组来匹配整个元素而不仅仅是标签：

'<div class="something">Some content</div>'.match(/<div(.*?)>(.*?)<\/div>/gi) // matches

从这里，您可以进一步找到包含特定类或属性的所有标签，捕获具有特定类的所有标签的 innerHtml，查找并替换特定类的所有实例以将其从链接更改为按钮，您就会明白...您可以使用正则表达式做很多事情。

我推荐 MDN（javascript）的备忘单和 regex101 的Regex Tester来帮助您入门。

6. 不要固执己见

作为一名开发者，要保持竞争力，最重要的是要记住这个行业瞬息万变。每天都有新的想法和技术出现。虽然你不应该被这些新事物分散注意力，因为它们来得快去得也快，但最好还是了解一下你的行业正在使用什么，这样你就不会落后太多。

同样重要的是，要接受这样一个事实：即使你相信某种特定的做事方式，也可能会存在其他更有效的解决方法。拥有自己的观点固然很好，但许多开发人员却陷入了自以为是的陷阱：他们的方法就是最好的。

编程远非一成不变：任何事物都有其优缺点。每个项目都有其自身的需求，相同的技术或方法并不总是适合所有项目。

7. 具备商业意识

我们都热爱编程，但归根结底，大多数人都是为了糊口。我们（除了自由职业者和业余爱好者）都受雇于企业，有客户、有截止日期、有预算，而我们交付项目的表现比代码质量更能体现我们自身的价值——尽管高质量的代码通常会让交付过程更加顺畅。

成为一名中级甚至高级开发人员，不仅取决于你的知识储备，还取决于你能承担的责任，以及你是否致力于在规定时间内交付尽可能优秀的产品。如果你创建了世界上最好的网站，但却晚了一个月才交付，那对你来说可不是什么好事。有时你需要寻找捷径，或者干脆从项目中砍掉一些内容：毕竟，你的公司在开始亏损之前，预算是有限的。

高级开发人员之所以能拿到这么多钱，是因为他们值得信赖。没错，他们解决问题的速度很快，知识渊博，但他们也会竭尽全力按时交付项目。他们了解哪些技术和方法能够满足项目需求，而不会过度使用、耗费时间或需要太多自定义代码。

这不是作为开发人员最令人兴奋或最鼓舞人心的部分，但付钱给你的人会比你编写的函数有多高效更关注这一点。

8. 要有耐心，经常练习

我非常赞同“你不知道你不知道什么”这句话。编程是一场持久战：成为一名真正称职的开发者需要数年时间，而且你了解得越多，就越会意识到自己其实知之甚少。保持谦逊，持续构建。每次都努力让自己更进一步，尝试新事物，精进你的技术。忘记目标，专注于旅程。

最终，你会有了一些想法，或者开始了一个项目，然后发现自己的代码写得多么好，甚至不需要思考。这些知识会深深地印在你的脑海里，解决问题变得轻而易举，你还可以利用这些解放出来的脑力去解决更棘手的问题。坚持不懈，耐心等待，你最终会成为一名优秀的开发者。