初学者该怎样快速成长为web前端大牛？来听听这些有用的经验

以你之姓@ 2022-10-22 09:19 88阅读 0赞

##### 前言 #####

最近接触了很多前端的小伙伴，和他们谈了很多职业发展的问题，大部分是做了一到三年的前端新手。在交流中发现了一个很有意思的现象，同样是入门不足三年，有部分人觉得前端很有前途，甚至有人年薪已经30W以上，但也有部分人觉得前端薪资不高，技术体系庞杂，迭代速度飞快，苦于学习各种不断更新的技术和框架，心神俱疲。同样是前端工程师，技术体系是相同的，工作年限也是相近的，为什么差别这么大？我在前端领域摸爬滚打也有五年了，如何跟上前端技术飞速更新的步伐，我认为学习方法一定要找对，抓住学习的重点才能事半功倍。我总结了学习中要注意的点，和各位技术水平卡在瓶颈，苦恼于怎么提高的年轻工程师们分享。

##### 夯实基础 #####

基础一定要掌握牢固，基础知识一问三不知，就是贻笑大方。css，js基础知识一定要掌握得很熟练。到什么程度可以称为熟练？你能使用css实现斑马条纹背景，毛玻璃效果吗？能给图片实现滤镜效果，能实现所有自适应布局效果吗？原型，原型链，闭包是实现设计模式的必备知识，你真的弄懂了吗？闭包导致内存泄漏的原因是什么，你弄明白了吗？ajax跨域的解决方案你可以说几种？2021年了，你还是只告诉我jsonp吗？http协议有了解过吗？现在是2021年了，这些问题老掉牙了。可是我要告诉你的是，掌握好这些老掉牙的基础，就是很重要。上层的技术可以变更的很快，基础变动很慢，投入时间学好基础，性价比很高。

##### 规划能力 #####

*  定目标：没有目标就没有坚持的动力，做之前要先定好目标。目标可以有长期目标，中期目标和短期目标，可以按照自己的规划设定。
 *  定周期：所有的目标都要有明确的时间节点，没有时间节点，很难进展下去。
 *  做拆解：目标拆解的粒度越细，执行的效果就会越好，我们可以一直拆解到不能拆解为止。

##### 谦虚的态度 #####

所谓谦虚的态度，首先要求大家有空杯心态，特别是一些有一定基础的员工，需要先对自己的认知清零，然后认真的听取培训老师的培训，在实际工作中，要多听取老员工的意见，建议。因为作为新人（至少是绝大多数），你在很多问题上的认知肯定要比老员工差，这个时候，就算你有自己想法，也要认真听取领导或者其他同事意见。就算是工作了很多年的我，现在都保持这个习惯，对于一个问题，我有了自己的想法，或者解决方案，我也会咨询其他人，或许其他人还有更好的解决方案呢。当然你有自己的想法，大胆的发表出来，也是很受欢迎的。谦虚并不代表一味的唯唯诺诺的态度，唯唯诺诺的态度，也不是谦虚，而且也是不受欢迎，对自己发展也不利的。大部分时候，我们希望员工有自己积极思考的态度。

##### 积极的态度 #####

包括几个方面。

*  第一个，积极做事，工作中积极争取做更多的事情，如此自己能够有更多学习的机会，二来也能够给公司一个更好的印象，公司也便愿意提供更多机会给你；
 *  第二个，积极沟通，沟通能力是一个很重要的能力，对于人的成长技巧重要。后面会专门说道沟通。
 *  第三个，积极思考，遇到问题能够积极主动的思考解决方案，而不是消极等待或者排斥。

##### 勤奋努力的态度 #####

要想获得更快更长足的进步，勤奋努力是必须的，及时对于极有天赋的人。所以一般而言，我都会对新来的员工说：公司虽然不会强制大家加班，但是作为新人，你肯定要做到比别人更加努力，自觉投入更多的时间在学习上面。

##### 寻找机会并快速落地 #####

有些人一直抱怨自己怀才不遇，做的事情没有空间没有机会，好的机会都被别人霸占着插不上手。其实不是机会少，而是你缺少发现机会的眼睛。

*  找难受点：让人难受都是机会，多留意别人的抱怨，多留意你觉得很烂的地方，多问协作方他们哪里难受，只要是难受的点就是机会。比如：团队脚手架工具好不好用、有没有监控系统、有没有需要所有人肉去升级或者排查的事情、测试是不是需要自动化工具、产品需不需要业务报表系统、运维是不是需要部署管理系统。留意身边的不满，碰到不满不要总是躲避，而是留意是不是有机会来了。

##### 培养沟通能力 #####

很多程序员忽略沟通能力。认为做程序员，只要能够把代码写好就行。事实远非如此。作为程序员，需要和至少如下人员经常沟通：

*  设计师 （沟通设计方面）
 *  产品经理或者客户 （沟通需求）
 *  其他程序员（沟通需求、技术、对接等等问题）

如果一个程序员不能很好的和以上人员沟通，很难想象他能够合格的完成任务，跟别说出色了。  
那么作为新人应该如何培养自己的沟通能力呢。

##### 好的沟通条件 #####

在我看来，好的沟通一定有如下两个重要的条件：

*  能够很好的理解别人的意图
 *  很好的表达自己的意图，以便别人能够理解。

##### 积极沟通需求 #####

一般在上司给安排了工作之后。  
有的人就开始做了起来，但是实际上，可能需求不是很明确，而不明确的，也不会主动提问沟通。 而有的人会思考需求，然后把自己不明确和上司或者其他同事积极沟通清楚。  
积极沟通需求

##### 及时呈现工作成果 #####

在完成一个任务之后，可以通过发邮件，图片，视频或者demo的方式多呈现自己的工作成果。

*  能够肯定自己的劳动成果
 *  让人了解相关工作进度
 *  另外可以及时的让人看到所做工作的不足。

##### 不要害怕呈现自己的缺陷 #####

有的时候，新人不愿意沟通，是害怕呈现自己的不足。实际上恰恰相反，作为新人，不能害怕呈现自己的不足之处。只有你让别人看到了你不足的地方，才能够很好的帮助你改进，提高。而如果你一味的隐藏自己不懂的业务，技术。很可能，在很长一段时间之后你还是不懂。 一般而言，你的上司可以容忍一个新人刚开始不懂，但是不能容忍在一段时间之后，还有很多东西不懂，比如我就是这样的，最初你不懂，我可以理解，并给予你支持帮助，但是较长时间之后，一些基本的东西你还不懂，我可能就会有看法了。

##### 合理的提问 #####

当然，虽然我鼓励新人多提问，但是还是希望新人提的问题是搞水平的。而不是低质量的问题。一个问题，你需要自己先思考，先查你已知的资料，在此基础上，你在来提问。而不是一开始上来就提问。 另外提问之前要梳理清楚一个任务中的业务 技术点，在此基础上，提出你不懂的部分。 最好不要提出类似 “这个任务我不会，你能教教我吗”。 而最好是这个任务是干什么的，1，2，3 列清楚，然后当前技术 我自己知道了哪些，有几个技术点或者业务点不清楚，需要指导。 要知道，你的上司或者其他同事，可能很忙，不可能什么问题都来和你从新梳理一遍。  
另外，你如果希望别人帮你调试解决某个问题，最好是把问题写出一个最小化的demo，让人来帮忙看。

##### 尽快熟悉相关业务 #####

沟通能力并不是单一的“沟通能力”。如果你能够尽快的熟悉公司的业务，那么沟通能力本身也会上升。

##### 锤炼思维能力 #####

##### 调试能力 #####

不会调试的程序员，不能称之为程序员。通过调试，发现数据，程序运行的规律，找到问题所在，并修复问题。可以说，一个程序员的大部分时间都是在调试，如果能很好的掌握调试技巧，将会是你的程序员生涯的巨大障碍。  
调试本身也可以调高你思考问题的能力。  
所以，学习各种调试技巧和调试思路，势在必行。

##### 善于思考，反思，总结 #####

在遇到问题的时候，需要自己做中总结和反思。 思考自己的解决方式，思维方式。如果遇到一些问题，自己没能解决，而在别人的帮助下解决了，不解要总结改问题的解决方案，还需要总结别人的思维方式。我从小上学数学不错，就是因为自己花了大量时间在这种思考、反思、总结上。遇到自己不会，老师指导了才会的问题，也一定要不断梳理思路，看自己应该如何“顺利”的就能想到这种解决方案。

##### 记录，写文档 #####

当然，如果你能够学习写作，把平时思考、反思、总结下来的东西记录下来，一定更好。写作其实也是一种重要的能力，对于每个人来说都比较重要。 把问题解决方案或者其他思路等记录下来，整理成文档，可以加深自己的记忆，也方便以后遇到类似的问题的查阅，同时还可以分享给他人，帮助别人解决类似问题。  
所以写文档是一件当下利益不明显，但是长远利益巨大的事情。

##### 猜测的能力 #####

记得我当年高中的物理课，老师说：物理问题要大胆猜测，小心论证。对于一些问题，我们可能暂时文档 资料欠缺，在这种情况下，我们可能需要能够猜测。根据我们已经有的知识，猜测某个可能性，然后通过某个方式来论证猜测。  
比如，以JS为例，我们遇到某个对象的API接口不明朗的时候，我们可以在控制台遍历出相关的接口函数，然后更加函数名称，猜测某个函数是做什么的，选中我们需要的接口函数。  
当然上面的举例只是一种简单的猜测 论证。还有更多复杂的情况。总之，在未知的情况下，不要害怕停止不前，而是多去猜测，尝试。说不定 就能够找到解决方案。

除此之外，在调试问题的时候，猜测问题的可能性也是一种很重要的能力。

##### 提高学习能力 #####

##### 快速学习的能力 #####

对于新人来说，感觉自己要学习的东西很多。这个时候我们在学习的时候要掌握技巧。要有“粗学”和“细学”的能力。对于很多文档或者知识点，先从整体理解，然后大致浏览一遍相关文档。，然后在实际中运用中，遇到相关的的知识点，再去细致的了解。而不是一个知识点一个知识点的细致学习，可能等你学完后面的，前面的已经忘记了。所以在“粗学”的过程中，以下两点比较重要：

*  对于整体框架一定要有个很好的认识，理解框架的作用，架构思路，编程思想，代码风格。
 *  在“粗学”知识点的时候，以了解该知识点的作用和运用范围为主。

##### 以解决问题为导向 #####

前面提高了快速学习，实际上快速学习要能够真正落实，产生效用。 需要我们以解决问题为导向。遇到一些新手，喜欢看很多书，学习很多知识点，技术点，但是实际动手能力很差。 为什么我遇到一些参加培训的同学，培训出来之后的效果并不会很明显。因为，在培训过程中，你还是着重在学习，而这种学习，可能存在缺陷：

*  学习的东西可能很快忘记了
 *  并没有提高你解决问题的能力

我就遇到很多新人特别好学，不管什么技术，都希望自己能够掌握，要去学一学。 以为掌握了很多知识点、技术点就能成长的更加厉害。但是往往事与愿违。学了那么多知识，还是过不好这一生，哦，错了，还是解决不了稍微有点难度的问题。 所以建议新人的学习，应该多以解决问题为导向来学习：

*  学习你近期工作最需要的相关知识和技术。
 *  培养相关的思考问题的方式，思维、架构能力，而不只是学习知识点。
 *  把工作内容涉及到的相关技术做到极致，而不是浅尝辄止，懂一点点就停止不前。

其他工作外的技术点要不要学，当然要学，多学习可以开阔自己的视野，从而潜移默化的提高你的认知能力和处理问题的思路和能力；但是时间上改如何分配和平衡，需要把握好。

##### 解决问题的技巧 #####

##### 难的问题，80%也是简单的 #####

> 如果看不清前方的路，那就一步一步走。

在遇到比较难的问题时候，我们往往会束手无策。我遇到一些员工，在遇到稍微难的问题的时候，就不知道如何下手。但是事实上，一个难的问题，可能难的部分只有20%，或者更少的比例。但是我们往往被难的部分给吓住了，然后不敢动手，或者不知道如何下手。其实，我们只要稍微把任务分解下，就会发现，还有很多部分是我们可以下手开始做的，这个时候，应该先忘掉难点的部分，开始着手我们会的部分。在做你会的事情的过程中，可能也发现了难点的解决方案。而即使没有发现难点的解决方案，这个时候也可以拿着你已经做出来的部分，去求助他人的帮助，这样别人在帮助你解决问题的时候也方便。

##### 如何判断你成长了 #####

如何判断自己是否成长了呢？是开发了多少组件、实现了多少页面、发了多少版本、加了多少天的班吗？

我的逻辑是看看你改变了什么。比如——因为你协助更顺畅了，因为你线上故障少了 50%，因为你开发效率提高了 30%，因为你团队氛围更好了，因为你身边人也成长了。你带来了哪些改变，自然就在某些方面获得了成长。

##### 总结 #####

合格的web前端工程师尚且需要好多修炼，入门级的web前端工程师也是不容易达到的。想要成为一名web前端工程师，[【点击这里】][Link 1]免费领取学习资料包~  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70 1]

[Link 1]: https://jq.qq.com/?_wv=1027&k=8HWivvbD
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021032520445347.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/a3c2374b2c8b4d6f87f8c85b1a95f22c.png