成为更优秀的前端 Web 开发人员的关键

2025-05-24

成为更优秀的前端 Web 开发人员的关键

很多人问我,他们学习 Web 开发的经验很丰富,却被困在几十个 UI 模板和虚拟项目中,这真的让人很沮丧,说真的,他们怎么才能更上一层楼呢?
这篇文章与其说是一篇文章,不如说更像是一份速查表或清单。
我猜这就像我们在友好地聊天,你会记下我的话,做笔记,然后如果对某些术语不了解,就去搜索它们到底是什么意思。
让我们开始吧,没时间浪费了!

1.了解你的编程语言:

这部分会是篇幅最长的,本来可以单独写一篇文章,但最好还是和其他部分一起写。
人们常常把编程语言和他们的母语混淆。
与解决问题相反,使用编程语言并不需要常识,它是一套由人编写的规则,用来帮助你与机器沟通。就我们而言,我们过去用它来与浏览器沟通,而现在,我们到处都在使用它。JavaScript
其规范和规则,我们应该遵守,而不是脱离它,并期望它能像其他语言一样被编写。

以下是我的笔记:

1.类型:

了解 JS 如何进行值类型化,并了解该语言提供的访问和使用内存、存储数据的不同类型,更不用说定义代码部分了。

2. 范围和闭包:

函数中的变量和代码片段如何与外部范围或另一个范围中的其他片段进行通信。

3.吊装:

该语言以非常独特的方式和顺序提供了读取和执行代码的解决方案,您应该了解这一点。

4. JS 中的 OOP:

多年来,JS 如何发展以提供解决方案并使工程师能够使用众所周知的编程范例。

5.异步JS:

如果你是一位致力于构建动态单页应用和实时应用的开发者,你应该逐步学习如何编写等待某个操作后再执行其他操作的代码。首先
学习回调函数,然后学习Promises,尝试一下async-await解决方案,或许还可以学习生成器函数,并将所有这些主题融入到使用 XHR 请求获取数据、等待数据并使用它更新 HTML 内容以及对其进行操作的过程中。

6.数组的高阶函数:

与其创建 for 循环并在其中使用条件来定位或重构数组元素,为什么不向自己介绍“map、find、filter、reduce”呢?这些都是方便的功能,如果你是一名熟练的 JS 开发人员,你将一天都无法使用它们。

7.JS如何与浏览器交互:

使用全局对象(如windowdocument)以及 JS 如何访问 HTML 元素并订阅发生在其上的事件和动作。

8.对象解构和扩展运算符:

非常方便,特别是当您需要访问数据结构或状态中的某个部分,或者在不丢失不变性方法的情况下对其进行更改时。

2. Git 版本控制:

希望你在一家大公司工作,即使它是一家小公司,我们都致力于使用良好且成熟的代码交付系统,你将处理多种环境:生产、暂存等。
因此,你真的需要对 Git 分支命令、 git checkout、 checkout -b 、 git merge及其不同类型“fast-forward、no-ff 和 squash 是什么意思”有信心,你需要挑选一个功能才能发布它,有一个命令可以做到这一点,你可能需要撤销你做过的某件事,重置另一件事,更不用说推送、拉取和其他与同事互动的基本方式,以便为你的代码库添加很棒的功能。
要大胆,不要羞于询问、寻求评论并参与经验分享对话。

3.不要满足于一个框架或库:

比精通一个前端 JS 框架更好的技能是在两个框架之间转换,不会迷失或困惑,而是在转到第二个框架时获得经验并询问它:“我以前在前一个框架中以那种方式做过这件事,你提供什么方法​​来实现它?”,在我看来,这项技能是迄今为止最重要的技能,它将一个害羞且无法从初级职位晋升的人与一个具有处理高级问题的高潜力的人区分开来,即使他正在使用不同的技术和/或以前没有使用过这项技术,他也不会介意与他的一个队友一起解决问题。

4. 不要在后端主题上吝啬自己:

作为 BE 生成的 API 的消费者以及负责将其展示给用户的人,还负责从用户收集数据并将其传递给 BE,您需要了解他们如何设计您所呈现的系统,当然,不是以复杂或详细的方式,只需对ERD “关系图”以及实体和模型“例如:在社交网络应用程序中:帖子、评论、用户”如何在数据库中(尤其是关系数据库)相互交流和关联有一定的了解,学习基本的SQL “结构化查询语言”,尝试 CRUD 操作“创建我们在表中提到的模型,创建记录,从中读取、更新、删除它”,也许创建另一个表并将关系和连接应用于它“使用外键”,去搜索所有这些术语!

5. 使用模块捆绑器:

Webpack、Parcel 和其他使用 node 和 npm 生态系统的工具来承载您的开发体验或支持您选择的框架,深入研究文档并了解它的工作原理,它如何跟踪您的文件并将它们作为导入文件内的导入文件树来处理,直到您到达主 index.js,了解如何使用代码拆分和优化选项来提高您的性能,捆绑器如何将您的代码构建成服务器仅使用 HTML 文件、CSS 文件和 JS 块进行响应所需的经典文件集,就这么简单。

6. 让您的工作工具为您个性化:

你的文本编辑器,也就是你的终端,应该能够帮助你掌控开发进程,监控你的 Git 分支。
例如,在 VSCode 中使用 Gitlens 扩展可以帮助你了解代码的更改者、更改时间。
你的终端不仅可以用来编写命令,还能帮助你了解分支状态:你做了哪些更改,是领先还是落后。在推送之前,使用文本编辑器比较更改的文件,并尽可能减少更改。

我真的希望这是有帮助的,你会发现我以前写的文章对本文的第一部分很有帮助,此外,如果你有任何疑问,请随时联系我。

文章来源:https://dev.to/gurutobe/keys-for-you-to-become-a-better-frontend-web-developer-1ba8
PREV
‼️ 2025 年排名前 5 的开源 LLM 评估框架🎉🔥 TL:DR 1. DeepEval - LLM 评估框架 2. MLFlow LLM Evaluate - LLM 模型评估 3. RAGAs - 检索增强生成 (RAG) 管道的评估框架 4. Deepchecks 5. Arize AI Phoenix
NEXT
掌握这些主题,你就能成为 JavaScript 面试高手 - 第一部分