资讯频道 → Web前端
阅读更多

3顶
0踩

Web前端

转载新闻 如何成为一名卓越的前端工程师

2015-08-11 14:50 by 副主编 mengyidan1988 评论(1) 有5233人浏览
前端工程师 JavaScript
译自 Philip Walton的博客
看过之后非常有感触，很多观点都是自己长期非常坚持和认同的，所以翻译出来分享给更多的前端同学！
最近我收到一封读者来信让我陷入了思考，信是这么写的：
引用
Hi Philip，您是否介意我问您是如何成为一名卓越 (great) 的前端工程师的？对此您有什么建议吗？

我不得不承认，我很惊讶被问这样的问题，因为我从来不觉得自己是个很卓越的前端工程师。甚至我入行头几年时并不认为自己可以做好这一行。我只确定自己比自己想象中还才疏学浅，而且大家面试我的时候都不知道从何问起

话虽这么说，我到现在做得还算不错，而且成为了团队中有价值的一员。但我最终离开 (去寻求新的挑战——即我还不能够胜任的工作) 的时候，我经常会被要求招聘我的继任者。现在回看这些面试，我不禁感叹当我刚开始的时候自己在这方面的知识是多么的匮乏。我现在或许不会按照我自己的模型进行招聘，即便我个人的这种经历也有可能成功。

我在 web 领域工作越长时间，我就越意识到区分人才和顶尖人才的并不是他们的知识——而是他们思考问题的方式。很显然，知识在很多情况下是非常重要而且关键的——但是在一个快速发展的领域，你前进和获取知识的方式 (至少在相当长的一段时间里) 会比你已经掌握的知识显得更加重要。更重要的是：你是如何运用这些知识解决每天的问题的。

这里有许许多多的文章谈论你工作中需要的语言、框架、工具等等。我希望给一些不一样的建议。在这篇文章里，我想谈一谈一个前端工程师的心态，希望可以帮助大家找到通往卓越的道路。

别光解决问题，想想究竟发生是什么

很多人埋头写 CSS 和 JavaScript 直到程序工作起来了，然后就去做别的事情了。我通过 code review 发现这种事经常发生。

我总会问大家：“为什么你会在这里添加 float: left？”或者“这里的 overflow: hidden 是必要的吗？”，他们往往答道：“我也不知道，可是我一删掉它们，页面就乱套了。”

JavaScript 也是一样，我总会在一个条件竞争的地方看到一个setTimeout，或者有些人无意中阻止了事件传播，却不知道它会影响到页面中其它的事件处理。

我发现很多情况下，当你遇到问题的时候，你只是解决当下的问题罢了。但是如果你永远不花时间理解问题的本源，你将一次又一次的面对相同的问题。

花一些时间找出为什么，这看上去费时费力，但是我保证它会节省你未来的时间。在完全理解整个系统之后，你就不需要总去猜测和论证了。

学会预见未来的浏览器发展趋势

前后端开发的一个主要区别在于后端代码通常都运行在完全由你掌控的环境下。前端相对来说不那么在你的掌控之中。不同用户的平台或设备是前端永恒的话题，你的代码需要优雅掌控这一切。

我记得自己 2011 年之前曾经阅读某主流 JavaScript 框架的时候看到过下面这样的代码 (简化过的)： 
var isIE6 = !isIE7 && !isIE8 && !isIE9;

在这个例子中变量 IE6 为了判断 IE 浏览器版本是否是 6 或更低的版本。那么在 IE10 发布时，我们的程序判断还是会出问题。

我理解在真实世界特性检测并不 100% 工作，而且有的时候你不得不依赖有 bug 的特性或根据浏览器特性检测的错误设计白名单。但你为此做的每一件事都非常关键，因为你预见到了不再有 bug 的未来。

对于我们当中的很多人来说，我们今天写的代码都会比我们的工作周期要长。有些我写的代码已经过去 8 年多了还在产品线上运行。这让人很满足又很不安。

阅读规范文档

浏览器有 bug 是很难免的事，但是当同一份代码在两个浏览器渲染出来的效果不一样，人们总会不假思索的推测，那个“广受好评”的浏览器是对的，而“不起眼”的浏览器是错的。但事实并不一定如此，当你的假设出现错误时，你选取的变通办法都会在未来遭遇问题。

一个就近的例子是 flex 元素的默认最小尺寸问题。根据规范的描述，flex 元素初始化的 min-width 和 min-height 的值是 auto (而不是 0)，也就是说它们默认应该收缩到自己内容的最小尺寸。但是在过去长达 8 个月的时间里，只有 Firefox 的实现是准确的。

如果你遇到了这个浏览器兼容性的问题并且发现 Chrome、IE、Opera、Safari 的效果相同而 Firefox 和它们不同时，你很可能会认为是 Firefox 搞错了。事实上这种情况我见多了。很多我在自己Flexbugs项目上报的问题都是这样的。而且这些解决方案的问题会在两周之后 Chrome 44 修复之后被体现出来。和遵循标准的解决方案相比，这些方案都伤害到了正确的规范行为。

当同一份代码在两个或更多浏览器的渲染结果不同时，你应该花些时间确定哪个效果是正确的，并且以此为标准写代码。你的解决方案应该是对未来友好的。

额外的，所谓“卓越”的前端工程师是时刻感受变化，在某项技术成为主流之前就去适应它的，甚至在为这样的技术做着贡献。如果你锻炼自己看到规范就能在浏览器支持它之前想象出它如何工作的，那么你将成为谈论并影响其规范开发的那群人。

阅读别人的代码

出于乐趣阅读别人的代码可能并不是你每周六晚上会想到的娱乐项目，但是这毫无疑问是你成为优秀工程师的最佳途径。

自己独立解决问题绝对是个不错的方式，但是这不应该是你唯一的方式，因为它很快就会让你稳定在某个层次。阅读别人的代码会让你开阔思维，并且阅读和理解别人写的代码也是团队协作或开源贡献必须具备的能力。

我着实认为很多公司在招聘新员工的时候犯的最大错误是他们只评估应聘者从轮廓开始写新代码的能力。我几乎没有见过一场面试会要求应聘者阅读现有的代码，找出其中的问题，并修复它们。缺少这样的面试流程真的非常不好，因为你作为工程师的很多时间都花费在了在现有的代码的基础上增加或改变上门，而不是搭建新的东西。

与比你聪明的人一起工作

我印象中的很多前端开发者 (相比于全职工作来说) 都是自由职业者，有同类想法的后端开发者并没有那么多。可能是因为很多前端都是自学成才的而后端则多是学校里学出来的。

不论是自我学习还是自我工作，我们都面对一个问题：你并没有机会从比你聪明的家伙那里学到什么。没有人帮你 review 代码，也没有人与你碰撞灵感。

我强烈建议，最起码在你职业发展的前期，你要在一个团队里工作，尤其是一个普遍比你聪明而且有经验的团队里工作。

如果你最终会在你职业发展的某个阶段选择独立工作，一定要让自己投身在开源社区当中。保持对开源项目的活跃贡献，这会给你团队工作相同甚至更多的益处。

“造轮子”

造轮子在商业上是非常糟糕的，但是从学习的角度是非常好的。你可能很想把那些库和小工具直接从 npm 里拿下来用，但也可以想象一下你独立建造它们能够学到多少东西。

我知道有些人读到这里是特别不赞成的。别误会，我并没有说你不应该使用第三方代码。那些经过充分测试的库具有多年的测试用例积累和已知问题积累，使用它们绝对是非常明智的选择。

但在这里我想说的是如何从优秀到卓越。我觉得这个领域很多卓越的人都是我每天在用的非常流行的库的作者或维护者。

你可能不曾打造过自己的 JavaScript 库也拥有一个成功的职业发展，但是你从不把自己手弄脏是几乎不可能淘到金子的。

在这一行大家普遍会问的一个问题是：我接下来应该做点什么？如果你没有试着学一个新的工具创建一个新的应用，那不妨试着重新造一个你喜欢的 JavaScript 库或 CSS 框架。这样做的一个好消息是，在你遇到困难的时候，所有现成的库的源代码都会为你提供帮助。

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

最后，但丝毫不逊色的是，你应该把你学到的东西记录下来。这样做有很多原因，但也许最重要的原因是它强迫你更好的理解这件事。如果你无法讲清楚它的工作原理，在整个过程中它会推动你自己把并不真正理解的东西弄清楚。很多情况下你根本意识不到自己还不理解它们——直到自己动手写的时候。

根据我的经验，写作、演讲、做 demo 是强迫自己完全深入理解一件事的最佳方式。就算你写的东西没有人看，整个过程也会让你受益匪浅。

本文转自：囧克斯的博客
3
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 西蜀石兰 2015-08-12 08:02
进楼学习

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 如何成为一名卓越 (great) 的前端工程师的

    注：本文转载自（如何成为一名卓越 (great) 的前端工程师的） 看过之后非常有感触，很多观点都是自己长期以来非常坚持和认同的，所以翻译出来分享给更多的前端同学！ Action 最近我收到一封读者来信让我陷入了思考，...

  • 阿里P7谈：如何成为一名卓越的前端工程师！

    Hi Philip，您是否介意我问您是如何成为一名卓越 (great) 的前端工程师的？对此您有什么建议吗？ 我不得不承认，我很惊讶被问这样的问题，因为我从来不觉得自己是个很卓越的前端工程师。甚至我入行头几年时并不认为...

  • 如何成为一名优秀的web前端工程师（前端攻城师）？

    　我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师。  　何为：前端工程师？  　前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。  　Web前端开发技术主要包括三个要素...

  • 如何成为一名卓越的前端工程师（译）

    Hi Philip，您是否介意我问您是如何成为一名卓越 (great) 的前端工程师的？对此您有什么建议吗？ 我不得不承认，我很惊讶被问这样的问题，因为我从来不觉得自己是个很卓越的前端工程师。甚至我入行头几年时并不认为...

  • 毕业设计基于STC12C5A、SIM800C、GPS的汽车防盗报警系统源码.zip

    STC12C5A通过GPS模块获取当前定位信息，如果车辆发生异常震动或车主打来电话（主动请求定位），将通过GSM发送一条定位短信到车主手机，车主点击链接默认打开网页版定位，如果有安装高德地图APP将在APP中打开并展示汽车当前位置 GPS模块可以使用多家的GPS模块，需要注意的是，当前程序对应的是GPS北斗双模芯片，故只解析 GNRMC数据，如果你使用GPS芯片则应改为GPRMC数据即可。 系统在初始化的时候会持续短鸣，每初始化成功一部分后将长鸣一声，如果持续短鸣很久（超过20分钟），建议通过串口助手查看系统输出的调试信息，系统串口默认输出从初始化开始的所有运行状态信息。 不过更建议你使用SIM868模块，集成GPS.GSM.GPRS，使用更加方便

  • 基于tensorflow2.x卷积神经网络字符型验证码识别.zip

    基于tensorflow2.x卷积神经网络字符型验证码识别 卷积神经网络（Convolutional Neural Networks, CNNs 或 ConvNets）是一类深度神经网络，特别擅长处理图像相关的机器学习和深度学习任务。它们的名称来源于网络中使用了一种叫做卷积的数学运算。以下是卷积神经网络的一些关键组件和特性： 卷积层（Convolutional Layer）： 卷积层是CNN的核心组件。它们通过一组可学习的滤波器（或称为卷积核、卷积器）在输入图像（或上一层的输出特征图）上滑动来工作。 滤波器和图像之间的卷积操作生成输出特征图，该特征图反映了滤波器所捕捉的局部图像特性（如边缘、角点等）。 通过使用多个滤波器，卷积层可以提取输入图像中的多种特征。 激活函数（Activation Function）： 在卷积操作之后，通常会应用一个激活函数（如ReLU、Sigmoid或tanh）来增加网络的非线性。 池化层（Pooling Layer）： 池化层通常位于卷积层之后，用于降低特征图的维度（空间尺寸），减少计算量和参数数量，同时保持特征的空间层次结构。 常见的池化操作包括最大池化（Max Pooling）和平均池化（Average Pooling）。 全连接层（Fully Connected Layer）： 在CNN的末端，通常会有几层全连接层（也称为密集层或线性层）。这些层中的每个神经元都与前一层的所有神经元连接。 全连接层通常用于对提取的特征进行分类或回归。 训练过程： CNN的训练过程与其他深度学习模型类似，通过反向传播算法和梯度下降（或其变种）来优化网络参数（如滤波器权重和偏置）。 训练数据通常被分为多个批次（mini-batches），并在每个批次上迭代更新网络参数。 应用： CNN在计算机视觉领域有着广泛的应用，包括图像分类、目标检测、图像分割、人脸识别等。 它们也已被扩展到处理其他类型的数据，如文本（通过卷积一维序列）和音频（通过卷积时间序列）。 随着深度学习技术的发展，卷积神经网络的结构和设计也在不断演变，出现了许多新的变体和改进，如残差网络（ResNet）、深度卷积生成对抗网络（DCGAN）等。

  • 【三维装箱】遗传和模拟退火算法求解三维装箱优化问题【含Matlab源码 031期】.zip

    【三维装箱】遗传和模拟退火算法求解三维装箱优化问题【含Matlab源码 031期】.zip

  • 自己编写的python 程序计算cpk/ppk

    cpk&ppk python 小程序,品友点评

  • 基于Springboot开发的分布式抽奖系统.zip

    基于springboot的java毕业&课程设计

  • 课设毕设基于SpringBoot+Vue的影城管理系统 LW+PPT+源码可运行.zip

    课设毕设基于SpringBoot+Vue的影城管理系统 LW+PPT+源码可运行.zip

  • MC教育版（免登录版）

    MC教育版（免登录版）

  • 农作物叶片病害分类和分割数据集【数据集+标签】

    包含13993张数据和对应的13993张mask分割模版，数据集用不同目录保存，也可以用作分类数据集 类别包含：桃子、辣椒、覆盆子、大豆、南瓜、草莓

  • 基于vue+springboot二手交易网站.zip

    基于springboot的java毕业&课程设计

  • 【三维装箱】遗传算法求解三维装箱优化问题【含Matlab源码 3408期】.zip

    【三维装箱】遗传算法求解三维装箱优化问题【含Matlab源码 3408期】.zip

  • 基于javaspring 开发框架的培训教程 TP1.zip

    基于javaspring 开发框架的培训教程 TP1.zip

  • 信号和系统 MATLAB 代码：探索信号生成、系统建模、傅立叶分析、滤波器设计、采样和控制系统仿真.zip

    1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • 医院网上预约系统设计与开发/毕业设计

    医院网上预约系统设计与开发/毕业设计 JSP基于SSM网上医院预约挂号系统 科室信息: 科室id,科室名称,科室介绍,成立日期,负责人 医生信息: 医生工号,登录密码,所在科室,医生姓名,性别,医生照片,出生日期,医生职位,工作经验,联系方式,擅长,医生介绍 病人信息: 病人id,医生,病人姓名,性别,身份证号,联系电话,病人病例,登记时间 预约信息: 预约id,预约用户,预约医生,预约日期,时段,联系电话,下单时间,处理状态,医生回复 新闻信息: 新闻id,新闻标题,新闻图片,新闻内容,新闻日期,新闻来源 留言: 留言id,留言标题,留言内容,留言人,留言时间,管理回复,回复时间 用户: 用户名,登录密码,姓名,性别,出生日期,用户照片,联系电话,邮箱,家庭地址,注册时间

  • 企业数据治理之数据质量治理方案.pptx

    企业数据治理之数据质量治理方案

  • MySQL8.4.0 LTS（mysql-8.4.0-10.fc38.x86-64.rpm-bundle.tar）

    MySQL8.4.0 LTS（mysql-8.4.0-10.fc38.x86_64.rpm-bundle.tar）适用于Linux Fedora 38 (x86, 64-bit)

Global site tag (gtag.js) - Google Analytics