开发人员技能树：成为“前端大手子”需要具备哪些素质？

我就是我 2022-12-15 11:09 232阅读 0赞

![format_png][]

全文共**2889**字，预计学习时长**8**分钟

![format_png 1][]

图源：unsplash

前端开发人员目前的需求量很大，但这并不代表公司录用的门槛就变低了，他们优中取优，只选择顶尖人才。

如今的前端开发和十年前大相径庭，一切都在不断演变，JavaScript的三大框架React、Vue和Angular十年前才刚刚诞生。优秀前端开发者应具备的技巧也在与时俱进，前端开发者需要时刻保持最佳状态。

HTML，但不仅是基本的HTML

众所周知，充分理解HTML及其所有可能性是web开发的基础。必须熟悉HTML5，并且能够编写清晰的HTML代码。例如，不要创建不必要的包装元素（wrapping element），也不能在span中使用div。这些都是基础，但笔者经常看到这样的基本问题出错。

另一项有关HTML并日益受欢迎的技能是可访问性。什么是网页可访问性？具备可访问性的无障碍网页是指残疾人也可以充分使用的网页，这里的残疾人包括视力受损、失明或失聪的人群等。

对于想要创建人人可用的优质网页的企业和组织来说，可访问性是必须的。对于这些企业和组织来说，重要的是推出人人可用的产品和服务。可访问性的好处不仅在于改善了残疾人的网络体验，同时还可以提升所有用户的使用体验。

学习使用框架

显然，三大框架任何之一都值得学习。大多数前端开发工作都要求求职者至少曾使用过一种常用JavaScript框架。

学习React、Vue或Angular三者之一是不错的选择，这些都是热门技能。不过，笔者强烈推荐先大家学会JavaScript的基础知识，尝试一些只使用普通的JavaScript的项目。在理解JavaScript的工作方式并且完全清楚基本原理之后，再专注于学习三大JavaScript框架中的一种。

由此你将了解所使用的框架解决了哪些问题，并理解该框架为何采用某种方法。这种学习JavaScript的方法的唯一缺点就是更耗时。然而，从长远来看，这是有回报的，你将远远领先于那些抄近路的人。

不想学习React、Vue或Angular也无妨，因为还有很多其他框架可供学习。不过要记住，其他的框架远没有那么高的需求。

![format_png 2][]

图源：unsplash

样式风格

与十年前相比，网站的风格已经截然不同。过去，我们会用表单来创建一个网站。现在我们使用更先进的技术，例如flexboxes和网格布局（grids）。

对于前端开发人员来说，了解CSS的使用方法是一项基本技能。在每个浏览器中，样式表（stylesheets）的效果都应当保持一致——这可并非易事。

设计样式时并非只需要掌握CSS，Sass如今也很常见。Sass是一个CSS预处理器，它允许使用变量、数学运算、混合（mixin）、循环、函数、导入功能等等，这使得编写CSS变得简便，而且功能更加强大。此外，和CSS无甚亮点的语法相比，Sass的语法更为简洁而优雅。

有时只需要使用一个框架就能完成所有重任。这意味着你不再需要从零开始编写全部CSS。有了这些现成的功能，你可以用这些框架来创建一整个样式完美的网站。你如果曾接触过类似Bootstrap或Tailwind的框架，就领先其他开发人员更多了。

响应

用台式机浏览网页的日子已经一去不复返了，现在大多数人都在手机上浏览网页，确保应用程序支持所有尺寸的屏幕需要一些技巧。在用手机浏览网站时，没有谁希望看到页面上的关键部分消失在屏幕外的区域。无论如何，网站上都不该出现横向滚动条。

响应式网站能在各种用户设备上都提供最好的体验。除此之外，响应式网站的外观更统一。构造响应式网站需要使用媒体查询（media queries）。媒体查询不难掌握，你能很快适应。

创造力

前端工作者需要洞悉事务应有的运作机制。在开发某一功能时，有时会发现这个功能缺少某一处设计，或者不知道如何将其呈现在小尺寸屏幕上，此时就需要你发挥创造力。

但即使有了设计，你仍然需要创造力来将图形设计实现为可用的网页。但这并不是需要创造力的唯一原因。与所有软件一样，代码库中会悄然出现漏洞，修复这些漏洞是你工作的一部分，同样也需要创造力。

![format_png 3][]

图源：unsplash

搞懂如何测试工作成果

如果问一群开发人员他们最讨厌的工作是什么，大多数人的回答可能是测试。不过，尽管测试并不是招人喜欢，但每个开发人员都理解它的重要性。

你可以在这一领域一展拳脚，脱颖而出。会编写自动化测试不仅是锦上添花，所有开发团队都在尽可能地转向自动化，通过自动化测试，你可以快速获得关于代码更改的反馈。手动测试十分耗时，如果没有任何自动化测试，就需要重复进行手动测试。

Cypress是常用的自动化测试工具之一。Cypress是一个端到端测试框架，它有一些很棒的功能，其中一个就是回退（time traveling）。回退功能可以让你准确地看到测试过程中每一步都发生了什么，这使得调试变得更简便且深入。

Cypress可以用来测试应用程序的任务流。同时，你可能希望在工具库内添加更多的测试。另一个流行的测试工具是Jest，Jest允许你为所创建的组件编写单元测试和快照测试。这使你能够测试应用程序的更多独立运作部分，而不是测试应用程序的不同部分如何协同工作。

版本控制

任何项目都必须具备版本控制。版本控制使你能持续管理、追踪并控制文件的变更，它是确保代码库的质量和完整性的必要工具。你应该了解如何将刚完成的新功能推送到另一个分支，并且熟悉基本的版本控制操作，比如push、pull和commit。

解决合并（merge）过程中的冲突（conflicts）问题以及处理拣选（cherry-picking）对你来说应该并非难事，这些是开发人员的基本技能。Git是最常用的版本控制系统，也可选择Mercurial和SVN。

终端（Terminal）

![format_png 4][]

图源：unsplash

精通各种终端的操作并能熟练地键入命令，这的确是一项被低估的技能。每个开发人员都在不断提升自己、提高效率，熟悉各种终端操作有益于提升工作速度。与其用鼠标在图形用户界面（GUI）上点来点去，不如直接在终端内进行操作——效果相同，但更快捷。

掌握mkdir、chmod和chown等基本命令能大大简化前端开发者的工作。如果你在DevOps（软件开发与IT运维）团队工作，那么可能会涉及到一些运维任务，这需要更新SSL证书或安装安全补丁。这些操作都是在终端内完成的。

这些技能你掌握了多少？努力点亮属于“前端大佬”的技能树吧！

![format_png 5][]

**推荐阅读专题**

[![format_png 6][]][format_png 6 1]

[![format_png 7][]][format_png 7 1]

[![format_png 8][]][format_png 8 1]

[![format_png 9][]][format_png 9 1]

![format_png 10][]

**留言点赞发个朋友圈**

**我们一起分享AI学习与发展的干货**

编译组：孙津、郝岩君

相关链接：

https://levelup.gitconnected.com/this-is-what-it-takes-to-be-a-great-front-end-developer-these-days-6df25a9f8511

如转载，请后台留言，遵守转载规范

**推荐文章阅读**

[ACL2018论文集50篇解读][ACL2018_50]

[EMNLP2017论文集28篇论文解读][EMNLP2017_28]

[2018年AI三大顶会中国学术成果全链接][2018_AI]

[ACL2017论文集：34篇解读干货全在这里][ACL2017_34]

[10篇AAAI2017经典论文回顾][10_AAAI2017]

**长按识别二维码可添加关注**

**读芯君爱你**

![format_png 11][]

[format_png]: /images/20221123/2e2e982db9ea40c8aba9caccf4ad2ddd.png
[format_png 1]: /images/20221123/478d9751e21445adbf8c3c9a3aa39742.png
[format_png 2]: /images/20221123/6278e79e0ccd4ab388a1d3b4344dba56.png
[format_png 3]: /images/20221123/58494c27aa4f4986ae6379b957e1b62a.png
[format_png 4]: /images/20221123/90aba288f9f94b378efba36a698263e8.png
[format_png 5]: /images/20221123/c91e0247b79b45c18cacca2aa42b3fc8.png
[format_png 6]: /images/20221123/a99cad59767a48b5a0a284b077a58c2e.png
[format_png 6 1]: http://mp.weixin.qq.com/s?__biz=MzI2NjkyNDQ3Mw%3D%3D&chksm=ea841ec4ddf397d2bb194670056d7ed973cf4349656e20d98bd139d8a5d99526a799fb243f8d&idx=1&mid=2247493138&scene=21&sn=d2fa895e71260f2576fa952cf2487522#wechat_redirect
[format_png 7]: /images/20221123/8fe18cc279d24d5dbbafe8421a6691b2.png
[format_png 7 1]: http://mp.weixin.qq.com/s?__biz=MzI2NjkyNDQ3Mw%3D%3D&chksm=ea841ed9ddf397cf9a7136dfb1352cf9fb1127b3061293cf716f8ee95b4560e694fce20a1e24&idx=2&mid=2247493135&scene=21&sn=5711dc1074411b7e45b40eb34fecc648#wechat_redirect
[format_png 8]: /images/20221123/7f09292e2cc44442ad885e0b44324e74.png
[format_png 8 1]: http://mp.weixin.qq.com/s?__biz=MzI2NjkyNDQ3Mw%3D%3D&chksm=ea841ec4ddf397d28ed77a111732be52384c9be414e0aad59c570ada6b29278755d066ae2090&idx=2&mid=2247493138&scene=21&sn=e45fe93b00342ba9eac222f24369d036#wechat_redirect
[format_png 9]: /images/20221123/6db3af904f584923b71583baaafc4cb0.png
[format_png 9 1]: http://mp.weixin.qq.com/s?__biz=MzI2NjkyNDQ3Mw%3D%3D&chksm=ea841ed9ddf397cfbc27f47a160ee926a706f1b3151c53f707c8f221fde0ea51446aabe2148d&idx=1&mid=2247493135&scene=21&sn=cce4cc400933c960a3200fd0dfa4d0a7#wechat_redirect
[format_png 10]: /images/20221123/201c7d6f1f3e43d68dd7a0a1dc039733.png
[ACL2018_50]: https://mp.weixin.qq.com/s?__biz=MzI2NjkyNDQ3Mw%3D%3D&chksm=ea87ee2addf0673cae27c598a097f5addad5d81b2ed766e570f20fc0fb12b77c5cf34098022e&idx=1&lang=zh_CN&mid=2247489276&scene=21&sn=98e22e2b69478303f1f1a0a51e712570&token=192322725#wechat_redirect
[EMNLP2017_28]: https://mp.weixin.qq.com/s?__biz=MzI2NjkyNDQ3Mw%3D%3D&chksm=ea87eaadddf063bb3ab4ec5af616612a45f8d4fe9a5ad558f66278478296060253c1564bd05c&idx=1&lang=zh_CN&mid=2247488123&scene=21&sn=a55185f3a693f7a5d85b1abe3dd36177&token=140500370#wechat_redirect
[2018_AI]: https://mp.weixin.qq.com/s?__biz=MzI2NjkyNDQ3Mw%3D%3D&chksm=ea87f6ebddf07ffd8e84bcc18d7122f894b6cf5dc967daad9c2e122edb22968fd6f589d6852f&idx=1&mid=2247487037&scene=21&sn=37cd38b305aa874c29d764361c88a202#wechat_redirect
[ACL2017_34]: https://mp.weixin.qq.com/s?__biz=MzI2NjkyNDQ3Mw%3D%3D&chksm=ea87f59addf07c8c2480dd46784a431612d099d3d0531449aa8e64f68b3ba340363578d95659&idx=1&mid=2247486796&scene=21&sn=a8ae95efbf16985a259c4cd66bf919f2#wechat_redirect
[10_AAAI2017]: https://mp.weixin.qq.com/s?__biz=MzI2NjkyNDQ3Mw%3D%3D&idx=1&lang=zh_CN&mid=2247487100&scene=21&sn=3bd640ec4f00c5104664687194dd9a51&token=77118319#wechat_redirect
[format_png 11]: /images/20221123/c089861bc4df492c98ecd70f9917c3f4.png