只要学会这五步!就可以成为万中无一的前端工程师

2024-02-17 05:50

本文主要是介绍只要学会这五步!就可以成为万中无一的前端工程师,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  1. 无所不知

还记得前端疲劳里的这张图吗?
在这里插入图片描述
没错,优秀的前端工程师掌握了这张图上的几乎一切。他们不受前端疲劳的困扰,他们可以跟上每一次技术更新迭代的脚步,将最新的工具和技术轻松收入囊中。大多数情况下,他们不需要查看技术文档和手册,因为那些东西好像就存在他们的脑子里。无论是写正则表达式,还是调用API,抑或处理复杂的JS代码,他们都能信手拈来。

  1. 完美代码

每次code review,我的内心都很忐忑,因为自己丑陋且性能低下的代码即将曝光在同事的眼前。优秀的前端工程师从来没有这些烦恼,相反,他们的代码往往是被作为模板来接受众人膜拜的。简洁,优雅,高效。有句话怎么说来着,漂亮的不像实力派。偏偏漂亮还不够,连注释都恰到好处。总之就一句话,给你一个无法拒绝赞美它的理由。
在这里插入图片描述
3. 极度专注

在这样一个时间被互联网不断撕裂的时代,专注早就成为了一种奢侈的品质。而优秀的前端便享有这份奢侈。他们似乎感觉不到疲惫,不是在写代码,就是在去写代码的路上。当大多数人都沉迷于吃鸡农药等游戏中时,他们却始终让自己沦陷在代码的世界里。请你给我一个他们不优秀的理由。

传说很难照进现实

不知道你的身边有没有做到以上三点的前端工程师。这种人当然存在,但作为普通前端的我们可能根本接触不到他们。因为能做到三点中的一点都已经远远不止优秀这个词可以形容了。 做到两点或者以上的人应该已经不会是单纯的工程师了,至少已经是leader或者是CTO了吧。我们可以把这些传说中的特质视为自己的奋斗目标,但我们不应该把“优秀”定义的如此高不可攀,不近人情,让大多数勤奋的前端工程师们与优秀“绝缘”。
在这里插入图片描述
#五步,让优秀触手可及

  1. 承认自己不知道

是的,你没看错,承认自己不知道绝对是一种优秀的表现。前端技术的爆炸式发展带来了很多创新的理念和极致的体验,它早已无处不在。但同时,它也让前端开发者们处在需要时刻跟上前端发展步伐的迷茫和痛苦中。若不加判断的追逐这种日新月异的技术进步,就会走入什么都学了一点,但什么都没学会的境地。

不知道所有的技术没有关系,你也不可能都知道。大胆的承认自己不知道,比打肿脸充胖子假装自己知道的人要优秀的多。

“React好复杂啊,要加上ReactRouter和Flux才能写大型应用”

“嗯嗯,我也这样觉得(内心:React是什么。。。)”

“那你平常用React做什么?“

“。。。(卒)。。。”

  1. 新技术 != 合适的技术

你可能不止一次的听到过这样的嘲讽:“什么?你还在用Gulp?太过时啦,现在大家都用Webpack,比Gulp好用多了”。我不知道这种嘲讽有什么道理。新的技术就一定比原来的好?

脱离了实际的应用场景去评价工具的好坏就是耍流氓。我们学习和使用新的技术,一定不能只是因为它新它酷炫,而是因为它能够更好的帮助我们解决当前的问题。如果旧的技术已经帮我们完美的解决了问题,那我们完全可以选择忽视新的技术。

下次再有人单纯的因为没用最新的工具来怼你,你就大胆的对他说:“小孩才分新旧,大人只看利弊,对解决问题有利的才是最好的。你呀,too young too simple。”

  1. 有效地利用资源

能记住大量的技术细节当然是强大实力的体现,但记不住并不代表弱小和拙劣。在这样一个信息量如此奢华的互联网时代,大多数的知识都可以在5分钟内百度谷歌到。很多大的公司不是喜欢将一些小业务外包出去吗,我们也可以把自己的一部分记忆“外包”给互联网。

这个道理就像计算机。内存的空间是宝贵的,而硬盘则没有太多空间上的烦恼。我们的大脑就像内存,而互联网就是我们的硬盘。我们只需要在大脑里存储空间占用极小的索引,把具体而庞大的知识细节交给互联网这个巨大的硬盘存储。如果我们把大量的知识和技术细节存储在大脑——一个昂贵的内存上,这岂不是暴殄天物吗。

因此,最重要的不是记住多少知识和技术,而是在需要用到它们的时候能够快速高效的利用在大脑内建立的索引,然后在互联网这个容量几乎无上限的硬盘上找到它们。知道知识在哪,这绝对是一种优秀。

  1. 不完美,怎么了

每个程序员都想写出完美的代码,可问题在于,这一切都得从写有问题的代码开始。最重要的是,我们得开始写,不能因为害怕不完美就不写。这和写作是一回事。我半年多没有在简书上写文章了,这并不是因为我不想写,而是我太想写出精彩、完美的文章,反而让自己无法下笔了。这让我陷入深深的自我怀疑中,怀疑我平庸的才华无法匹配我对自己过高的期待。但我今天还是写了这篇文章,因为我反复告诉自己:简单点,写作的方式简单点(这句话自带旋律…)。

写代码也是这样,它得先被写出来才能给我们让它变得完美的机会啊。事实上,完美的代码并不是写出来的,而是改出来的。debug的能力比coding的能力还重要。我很喜欢这样一句话:“Software is soft.” 软件是软的,代码也是软的。还记得我们小时候玩过的软软的橡皮泥吗?没捏好怎么办?没关系啊,反正它是软的,摊平了重捏啊。写代码就是这个道理。

  1. 能沉进去,也能跳出来

我们都认为,优秀的人之所以优秀是因为他们能够让自己沉浸在自己所做的事情中,不受外界的打扰。这当然是对的,只有专注、聚焦在一件事情上,我们才能把那件事情做好。优秀的前端工程师一定是那些始终磨练着自己的技术和密切关注着前端领域发展的人。是他们的专注和不知疲倦造就了他们的优秀。可是事实是这样吗?并不完全是。

前端开发的脚步已经渗透到了人类社会的方方面面,每个行业都需要网站,都需要找到和特定人群交互的方式,而前端技术正是这类需求的最佳解决方案。作为前端开发者的我们,如果仅仅把自己局限在前端技术这个狭窄的领域内,技术的创新又从何而来呢?

我自己是音乐爱好者,平常会录点音乐视频自娱自乐。有一天我心血来潮,想知道前端领域和音乐有没有碰撞出什么火花。上谷歌一搜索,便发现了很多优秀的JavaScript的音频库。什么howler.js,loop.js,audiosynth.js, tone.js,全都是music library for JavaScript。试问,如果那些作为前端开发者的音乐爱好者们只关注前端而放弃了自己的爱好,那么,还会有这些优秀的令人脑洞大开的前端音乐工具存在吗?

跳出前端,在不写代码的时候继续培养自己的兴趣和爱好,让自己接触到不同的领域和行业,从而使自己拥有不同的视角。正是我们把各种各样的兴趣引入到了前端的世界里,才让前端的创新层出不穷,技术蓬勃发展。

这篇关于只要学会这五步!就可以成为万中无一的前端工程师的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/716847

相关文章

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性,由Chrome125开始提供原生支持需... 目录 css Anchor Positioning:重新定义「锚定定位」的时代来了! 什么是 Anchor Pos

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布局和层叠关

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv