如何成为一名卓越的前端工程师

日期:2019-11-23编辑作者:明仕ms57Web前端

哪些成为一名牌产品优品越的前端技术员

2015/08/19 · JavaScript · 6 评论 · 前面一个程序猿, 职场

原稿出处: Philip Walton   译文出处:赵锦江(@勾三股四卡塔尔   

译注:本文翻译自谷歌(Google卡塔尔技术员 Philip Walton 的豆蔻梢头篇博客。看过之后特别常有感触,超多观点都以自个儿长时间特别持锲而不舍和确认的,所以翻译出来共享给更加多的前端同学!


前日本人收下少年老成封读者来信让自身陷入了思索,信是这么写的:

Hi Philip,您是不是在乎我问,您是什么成为一名牌产品优品异 (great) 的前端程序员的?对此您有怎么着提出呢?

只得承认,被问那样的标题,笔者很愕然,因为作者从未认为温馨是个很标准的前端程序猿。以致本人出道的头几年时并不以为本人能够搞活那风姿罗曼蒂克行。笔者只规定本人比本身想象中还四六不通,况兼我们面试笔者的时候都不亮堂从何问起

话虽那样说,笔者到近年来做得还算不错,並且成为了团队中有价值的意气风发员。但自己最后离开 (去寻求新的挑衅——即笔者还无法胜任的干活) 的时候,笔者一时会被供给招徕约请小编的后人。以往重放那么些面试,作者忍不住慨然当自身刚开首的时候本身在这里方面包车型地铁学问是多么的缺乏。作者明日或者不会遵守自个儿要好的模型举办招徕约请,就算小编个人的这种阅历也许有相当大可能率得逞。

笔者在 web 领域办事越长期,小编就越意识到区分人才和特等人才的并非他们的知识——而是他们构思难点的艺术。很明朗,知识在不菲景色下是老大重大而且首要的——但是在一个神速前行的世界,你升高和获取知识的法子 (起码在一定长的后生可畏段时间里) 会比你早就调节的学识来得愈发关键。更要紧的是:你是什么运用这么些知识消除每一天的难题的。

这里有大批判的篇章研究你专门的事业中需求的言语、框架、工具等等。作者希望给部分不类似的建议。在此篇随笔里,小编想谈一谈三个前端攻城狮的心态,希望可以辅助我们找到通往优异的道路。

原稿出处: Philip Walton   译文出处:赵锦江(@勾三股四卡塔尔 

别光消亡难点,思考毕竟产生了哪些

广大人埋头写 CSS 和 JavaScript 直到程序职业起来了,然后就去做其他事情了。作者经过 code review 发掘这种事平常发出。

本人总会问大家:“为啥你会在此边增加 float: left?”或者“这里的 overflow: hidden 是必不可少的吧?”,他们每每答道:“我也不精晓,不过笔者风流倜傥删掉它们,页面就乱套了。”

JavaScript 也是同样,笔者总会在一个条件竞争之处见到一个 setTimeout,或然某一个人寂然无声中截留了平地风波传播,却不明了它会影响到页面中任何的事件管理。

自家发觉众多动静下,当你遇上标题标时候,你只是化解那时候的难点而已。可是借使你永久不花时间精晓难点的根子,你将一遍又叁次的面前际遇雷同的难点。

花一些岁月找寻为何,那看上去费时困难重重,可是笔者保管它会省掉你现在的时光。在完全明白整个系统之后,你就不必要总去测度和实证了。

译注:本文翻译自谷歌(Google卡塔尔程序员Philip Walton的生机勃勃篇博客。看过之后极度常有感触,超级多意见都是温馨短期特别百折不挠和料定的,所以翻译出来分享给更多的前端同学!

学会预言以后的浏览器发展倾向

上下端支出的二个要害分裂在于后端代码常常都运作在一丝一毫由你掌握控制的条件下。前端相对来讲不那么在你的掌控之中。分歧客户的平台或设施是前面一个永世的话题,你的代码须求典雅掌握控制那风流倜傥体。

笔者回想本人 二〇一二 年从前早就读书某主流 JavaScript 框架的时候来看过上边那样的代码 (简化过的):

JavaScript

var isIE6 = !isIE7 && !isIE8 && !isIE9;

1
var isIE6 = !isIE7 && !isIE8 && !isIE9;

在这么些事例中变量 IE6 为了决断 IE 浏览器版本是或不是是 6 或更低的本子。那么在 IE10 发布时,我们的前后相继决断依旧会出难点。

本身清楚在真正世界特色检查评定并不 百分之百 职业,况且一些时候你只好依赖有 bug 的个性或依据浏览器本性检查实验的荒谬设计白名单。但您为此做的每后生可畏件事都非常重大,因为你预言到了不再有 bug 的以后。

对此我们在这之中的众六个人的话,我们今日写的代码都会比大家的干活周期要长。有个别本人写的代码已经呜呼哀哉8 年多了还在产物线上运转。那令人很满意又十分不安。

  近年来自个儿收下风流罗曼蒂克封读者来信让本人陷入了考虑,信是这么写的:

开卷专门的学业文书档案

浏览器有 bug 是很难免的事,可是当同豆蔻梢头份代码在三个浏览器渲染出来的职能分化等,人们总会不假思虑的推理,那多少个“广受美评”的浏览器是对的,而“不起眼”的浏览器是错的。但真相并不一定如此,当你的固然现身错误时,你选用的变通办法都会在将来惨被难题。

一个左右的例证是 flex 成分的私下认可最小尺寸难点。依照规范的叙说,flex 元素开端化的 min-width 和 min-height 的值是 auto (并非0),也正是说它们暗许应该减弱到本身内容的微小尺寸。不过在过去长达 半年的岁月里,只有 Firefox 的贯彻是正确的。[1]

假定你超出了那么些浏览器包容性的难点同一时间开采 Chrome、IE、Opera、Safari 的法力相通而 Firefox 和它们分歧一时间,你不小概会感觉是 Firefox 搞错了。事实上这种境况我见多了。超多自身在和谐 Flexbugs 项目报告的主题素材都以那般的。並且那么些应用方案的标题会在两周今后Chrome 44 修复之后被反映出来。和遵守规范的建设方案相比较,那一个方案都有毒到了不移至理的科班作为。[2]

当同意气风发份代码在三个或越多浏览器的渲染结果分裂有时间,你应有花些时间规定哪些意义是不利的,并且以此为规范写代码。你的消除方案应该是对前途温馨的。

额外的,所谓“优秀”的前端工程师是天天心得变化,在某项工夫成为主流早先就去适应它的,以至在为这么的本事做着进献。假令你操练本人看来标准就会在浏览器扶植它前边想象出它什么做事的,那么你将改成研讨并影响其标准支出的那群人。

Hi Philip,您是或不是在乎笔者问,您是什么形成一名特出 (great) 的前端技术员的?对此您有怎样提出呢?

翻阅别人的代码

出于野趣阅读旁人的代码恐怕实际不是您每一周日中午会想到的玩耍项目,可是这自然是您产生优异技术员的精品路线。

友好单身消弭难题纯属是个不利的艺术,不过那不该是你唯意气风发的艺术,因为它高效就能够让您平安在有些等级次序。阅读别人的代码会令你开阔思维,何况阅读和领会外人写的代码也是团组织通力同盟或开源进献必得持有的力量。

自个儿真正认为非常多供销合作社在选聘新工作者的时候犯的最大错误是他们只评估应聘者从概况起先写新代码的力量。作者差不离一向不见过一场地试会必要应聘者阅读现成的代码,搜索里面包车型客车主题材料,并修复它们。缺乏那样的面试流程真的非常倒霉,因为您作为工程师的过多年美利坚合众国的首都费用在了在存活的代码的基础上加码或退换上门,实际不是搭建新的事物。

  必须要认可,被问那样的标题,作者很愕然,因为本身一直不以为温馨是个很标准的前端程序员。以致自身出道的头几年时并不以为自身能够搞活那大器晚成行。小编只明确本身比自身想象中还学浅才疏,何况我们面试小编的时候都不亮堂从何问起。
  话虽这样说,笔者到未来做得还算不错,况兼成为了集体中有价值的生龙活虎员。但本身最终离开 (去寻求新的挑衅——即小编还不能胜任的劳作) 的时候,小编一时会被须求招徕约请作者的继承者。今后回放这个面试,小编禁不住慨然当笔者刚最初的时候本身在此方面包车型大巴知识是何其的恐慌。作者今天也许不会依据我自身的模型实行招徕约请,纵然作者个人的这种经历也会有非常大恐怕得逞。
  笔者在 web 领域办事越长时间,作者就越意识到区分人才和精品人才的而不是他俩的文化——而是他们思忖难题的形式。很明朗,知识在好多景况下是丰富首要并且入眼的——可是在一个高速发展的园地,你前进和获得知识的办法 (最少在相当短的风流浪漫段时间里) 会比你曾经精晓的学问来得特别重大。更主要的是:你是怎么样使用这么些文化化解每一日的标题标。

与比你智慧的人同台坐班

本人回忆中的比较多前端开辟者 (比较于全职职业的话) 都以自由专门的事业者,有同类主张的后端开采者并不曾那么多。大概是因为不菲前端都以无师自通的事后端则多是学校里学出来的。

不论是是本身学习可能自个儿工作,大家都面前遭受三个主题素材:你并不曾机缘从比你智慧的玩意那里学到什么。未有人帮您 review 代码,也尚无人与你碰撞灵感。

小编生硬提议,最最少在您工作发展的最先,你要在二个组织里职业,极其是一个广阔比你智慧何况有经历的团队里工作。

假定你最终会在您专门的工作发展的某部阶段接受独立专门的学业,必要求让投机献身在开源社区中路。保持对开源项目标意气风发进献,那会给你团队专门的学业相像以至越多的低价。

  这里有不可估计的稿子研商你办事中需求的语言、框架、工具等等。笔者盼望给生龙活虎部分不风流倜傥致的提议。在此篇作品里,小编想谈一谈一个前端技术员的情绪,希望得以协助我们找到通往卓越的征途。

“造轮子”

造轮子在购销上是不行不佳的,不过从读书的角度是可怜好的。你只怕很想把那二个库和小工具直接从 npm 里拿下来用,但也得以虚构一下您独自行建造造它们能够学到多少东西。

本人了解有些人读到这里是特地分化情的。别误会,作者并未有说您不应当使用第三方代码。那一个通过丰裕测量检验的库具备多年的测验用例积存和已知难题积存,使用它们相对是极度明智的挑肥拣瘦。

但在那地自身想说的是何等从理想到优秀。笔者感到这么些圈子过多标准的人皆以本人每一日在用的非常红的库的编辑者或维护者。

您大概未有塑造过本身的 JavaScript 库也颇负八个成功的职业发展,不过你未有把团结手弄脏是差不离不容许淘到黄金的。

在此生龙活虎行我们无动于衷会问的一个难点是:笔者接下去应该做点什么?假诺你未曾试着学二个新的工具创制贰个新的施用,那无妨试着再度造一个您爱怜的 JavaScript 库或 CSS 框架。那样做的一个好新闻是,在你蒙受困难的时候,所有现有的库的源代码都会为您提供帮扶。

别光化解难题,出主意毕竟爆发了怎么着?

把你学到的东西都记录下来

最终,但丝一点也不逊色的是,你应当把你学到的事物记录下来。那样做有过多原因,但或然最注重的缘故是它反逼你更加好的通晓这事。假诺您不恐怕讲驾驭它的干活规律,在总体进程中它会拉动您自身把并不真的精通的事物弄通晓。非常多情状下你向来察觉不到自身还不知道它们——直到本人入手写的时候。

遵照本身的资历,写作、演说、做 demo 是倒逼本身全然深远驾驭生机勃勃件事的超级艺术。即让你写的东西平素不人看,整个经过也会令你有非常大的收获。

  很几个人埋头写 CSS 和 JavaScript 直到程序办事起来了,然后就去做其他事情了。笔者通过 code review 开采这种事日常产生。
  作者总会问我们:“为何您会在这里间丰富float: left?”恐怕“这里的 overflow: hidden 是必备的啊?”,他们反复答道:“作者也不晓得,然则笔者大器晚成删掉它们,页面就乱套了。”
  JavaScript 也是平等,我总会在一个尺码角逐的地点看看一个setTimeout,或然稍稍人神不知鬼不觉中阻止了事件传播,却不理解它会影响到页面中其它的事件管理。
  小编发觉好些个意况下,当你遇上难点的时候,你只是化解那时的主题材料罢了。但是风流倜傥旦你永世不花时间知晓难题的根源,你将二次又叁遍的面临相同的难点。
  花一些时日搜索为何,那看上去费时困难,可是本人有限扶助它会节省你现在的小运。在一起清楚整个种类以往,你就没有必要总去测度和论证了。

Footnotes:

  1. Firefox implemented the spec change in version 34 on December 1, 2014. Chrome implemented it in version 44 on July 21, 2015, which means Opera will get it shortly. Edge shipped with this implemented on July 29, 2015. A Safari implementation appears to be in progress.
  2. You can refer to Flexbug #1 for a future-friendly, cross-browser workaround to this issue.

    8 赞 27 收藏 6 评论

图片 1

 

学会预言现在的浏览器发展倾向

  前后端支付的二个尤为重要区别在于后端代码平常都运作在一起由你掌握控制的情状下。前端相对来讲不那么在您的掌握控制之中。区别客户的阳台或配备是前面一个永久的话题,你的代码须要优雅掌握控制那风姿浪漫体。
  笔者记得自个儿 二零一二年在此之前曾经读书某主流 JavaScript 框架的时候见到过下边那样的代码 (简化过的):

  JavaScript
  var isIE6 = !isIE7 && !isIE8 && !isIE9;

  在这里个例子中变量 IE6 为了决断 IE 浏览器版本是还是不是是 6 或更低的本子。那么在 IE10 公布时,大家的顺序剖断如故会出标题。
  笔者精通在安分守己世界特色检查实验并不 百分百职业,何况部分时候你必须要依靠有 bug 的风味或依据浏览器脾性检查评定的荒唐设计白名单。但您为此做的每风流倜傥件事都万分关键,因为你预言到了不再有 bug 的前途。
  对于大家中间的洋西班牙人来讲,大家明天写的代码都会比大家的劳作周期要长。有个别自个儿写的代码已经过去 8 年多了还在产品线上运转。那令人很满意又十分不安。

开卷专门的职业文书档案

  浏览器有 bug 是很难免的事,不过当同生龙活虎份代码在三个浏览器渲染出来的功用不切合,大家总会不假思忖的揣度,这个“广受美评”的浏览器是对的,而“不起眼”的浏览器是错的。但真实景况并不一定如此,当你的假如现身谬误时,你采取的变通办法都会在今后饱受问题。
  多少个左右的例证是 flex 成分的暗中认可最小尺寸难点。遵照规范的陈述,flex 成分初阶化的 min-width 和 min-height 的值是 auto (并不是0),也正是说它们暗中同意应该降至本人内容的矮小尺寸。可是在过去长达 六个月的小运里,唯有 Firefox 的落到实处是标准的。
  借让你相逢了这一个浏览器包容性的题目还要发掘Chrome、IE、Opera、Safari 的效益等同而 Firefox 和它们分裂期,你很恐怕会认为是 Firefox 搞错了。事实上这种气象自个儿见多了。超多本人在和谐 Flexbugs 项目申报的主题素材都以那样的。何况这个解决方案的标题会在两周之后 Chrome 44 修复之后被反映出来。和服从规范的应用方案比较,这个方案皆有剧毒到了正确的标准作为。
  当同风流倜傥份代码在八个或越多浏览器的渲染结果不一样时,你应该花些时间规定哪些意义是不错的,而且以此为标准写代码。你的减轻方案应该是对前景自个儿的。
  额外的,所谓“出色”的前端技术员是时刻体会变化,在某项本领形成主流早前就去适应它的,甚至在为那样的技巧做着贡献。倘使您训练本人寓指标准就会在浏览器扶持它后边想象出它什么做事的,那么您将成为探究并影响其正式支出的那群人。

 

开卷外人的代码

  出于乐趣阅读外人的代码恐怕并不是您每礼拜天午夜会想到的24日游项目,然则那必然是你成为美好程序员的特等路线。
  本人单身消除难点纯属是个不利的方法,可是那不应当是你唯风流浪漫的法子,因为它高效就能够让您平安在有个别等级次序。阅读别人的代码会令你开阔思维,况且阅读和通晓外人写的代码也是团体协作或开源贡献必得具有的力量。
  小编真正以为相当多合营社在选聘新职员和工人的时候犯的最大错误是她们只评估应聘者从轮廓初阶写新代码的力量。作者大约没有见过一场合试会供给应聘者阅读现成的代码,寻找里面包车型客车标题,并修复它们。缺乏那样的面试流程真的要命糟糕,因为您作为程序猿的多多时刻都开销在了在存活的代码的根基上平添或改动上门,并非搭建新的事物。

与比你精晓的人一块干活

  笔者回想中的相当多前端开辟者 (相比较于全职专门的学问来讲) 都是自由职业者,有同类主见的后端开辟者并从未那么多。大概是因为多数前端都是自学成才的之后端则多是本校里学出来的。
  不论是自家学习也许小编专门的学问,我们都面临二个主题材料:你并不曾机会从比你精晓的玩意这里学到什么。未有人帮你 review 代码,也尚未人与您碰撞灵感。
  小编刚烈提出,最起码在您工作发展的开始时代,你要在三个共青团和少先队里干活,特别是多个广大比你聪明而且有涉世的团协会里干活。
  假如你聊到底会在您专门的学业发展的某部阶段采取单独职业,必定要让自身投身在开源社区个中。保持对开源项指标龙精虎猛进献,那会给你团队专门的学问相像以至越来越多的补益。

 

“造轮子”

  造轮子在经济贸易上是拾分倒霉的,可是从上学的角度是足够好的。你可能很想把这几个库和小工具直接从 npm 里拿下来用,但也足以想像一下您独自行建造造它们能够学到多少东西。
  笔者领悟几人读到这里是特意不赞同的。别误会,笔者并从未说你不应有接受第三方代码。那二个经过丰盛测量检验的库具备多年的测量检验用例储存和已知难题储存,使用它们相对是可怜明智的选择。
  但在那作者想说的是什么样从美好到优越。我感到那些圈子过多一流的人都以自己每一日在用的极火的库的笔者或维护者。
  你或者未有构建过自身的 JavaScript 库也不无二个成功的差事发展,但是你未有把团结手弄脏是大致不容许淘到黄金的。
  在此黄金年代行大家不足为怪会问的叁个难点是:我接下去应该做点什么?假设您未曾试着学二个新的工具创立八个新的使用,那无妨试着再一次造八个您心爱的 JavaScript 库或 CSS 框架。那样做的贰个好新闻是,在你碰到困难的时候,全数现存的库的源代码都会为您提供协助。

把你学到的事物都记录下来

  最终,但丝一点也不差的是,你应有把您学到的东西记录下来。这样做有众多原因,但或者最要紧的因由是它倒逼你越来越好的精晓那件事。假设你不只怕讲驾驭它的办事原理,在全部进度中它会有协助你协和把并不确实领会的东西弄理解。超级多动静下你平素察觉不到自身还不明白它们——直到自个儿入手写的时候。
  根据本人的涉世,写作、阐述、做 demo 是反逼本人全然浓烈明白风流洒脱件事的精品方法。纵然你写的事物未有人看,整个经过也会让您获益良多。

 

Footnotes:

  Firefox implemented the spec change in version 34 on December 1,

  1. Chrome implemented it in version 44 on July 21, 2015, which means Opera will get it shortly. Edge shipped with this implemented on July 29, 2015. A Safari implementation appears to be in progress.
      You can refer to Flexbug #1 for a future-friendly, cross-browser workaround to this issue.

 

本文由明仕ms577发布于明仕ms57Web前端,转载请注明出处:如何成为一名卓越的前端工程师

关键词:

js的一些笔试面试题,前端参考指南

前端参考指南 2015/05/09 · CSS,HTML5,JavaScript ·前端 本文由 伯乐在线 -cucr翻译,周进林校稿。未经许可,禁止转载! 英文...

详细>>

中的层叠上下文初探

CSS3 中的层叠上下文初探 2015/10/09 · CSS ·层叠上下文 原文出处: HaoyCn    前言:关于层叠上下文,笔者还没有去阅读...

详细>>

前端冷知识集锦

前端不为人知的一面–前端冷知识集锦 2015/09/08 · CSS,HTML5,JavaScript · 13评论 ·冷知识 本文作者: 伯乐在线 -刘哇勇。...

详细>>

使用方法介绍,总结伪类与伪元素

总结伪类与伪元素 2016/05/21 · CSS · 1评论 ·伪元素,伪类 原文出处:AlloyTeam    熟悉前端的人都会听过css的伪类与伪元...

详细>>