前端应届生如何做一个职业规划

港控/mmm° 2023-01-02 10:23 227阅读 0赞

前端的兴起

前端真正兴起和开始频繁出现在大家的视线里，大概是在十年前。彼时的 Web 开发基本是由后端主导，前端能做的只是校验一下数据、操作一下 DOM。（其中数据检验是 JS 产生的根本原因：当时网络太慢，在服务端检验数据并反馈给用户，让用户知晓输入错误，这个流程太长、反应太慢，因此通过脚本在用户端完成第一步校验，既方便了用户，又减轻了带宽的压力。）即使 06 年 jQuery 发布并风靡全球，以及 XMLHttpRequest 被纳入 W3C 标准，也没有改变这种状况。制约它进度的原因很简单，因为很多事情前端 做不了 或者 做不好。随着时间的推移，近几年，Angular、Backbone、React、Vue 等框架陆续发布，让前端越来越正规化、体系化。此时虽然仍有很多事，前端 做不了 或者 做不好，但前端这个岗位却已变得热辣空前。那么，是什么推动着前端发展到如此大的规模和火热的程度？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]  
也许，你可以列举出很多各种各样的原因，但是综其一点，就是『用户体验』，是由于所有人对用户体验的重视，才让前端发展得这么迅猛，这么快地兴起。这里，可能要感谢 Apple，感谢 iPhone，感谢 Jobs，07 年第一代 iPhone 发布，正式引发了几乎所有人对用户体验的重视，从『只要能用就好』，变成『要好用我才买单』的心理。而，前端的先驱者们、浏览器的开发者们，也顺应了这个潮流，将一系列重要的能力加入了浏览器，加入了前端。

其中最重要的一项是 XMLHttpRequest，也就是 Ajax，它是富 Web 应用的基础，它让前端可以脱离后端的掌控，不用通过跳转的方式就能实现数据交互。感谢微软，感谢 IE，虽然被 IE 6~8 虐了无数遍，但是是它引入了 XMLHttpRequest ，引入了 Ajax，开启了富 Web 应用的时代，让用户体验大幅提升。

而近几年，随着移动互联网的发展，多端多平台的需求越来越多，产品形态和数据分离，是形势所趋。而与此同时，移动时代对产品形态跨端、跨平台、多元化的用户体验要求，让本身就有跨平台特性的前端技术着实又火了一把，它让开发者有更多的时间和精力关注用户体验，并很容易保持多平台用户体验的统一（不同平台用不同技术实现，虽然可以，但成本太高）；除去上面的原因之外，前端技术自带的热发布、热更新特性，能在及时更新业务需求的同时快速修复用户所遇到的问题，也是大家选择它的一种原因。虽然另外还有很多零零总总、各种各样的原因，再促使着前端成为当前最火爆的几个职位之一，但是最根本的原因仍旧是大家对用户体验的要求。

从上面可以看出，前端的兴起源于所有人对用户体验的重视，而火爆更是由于所有人对多元化的用户体验的关注。当然，用户体验不只只是 UI 漂亮、好看，它是多方面的，例如视图的加载速度和流畅程度，这些取决于你选择技术的编码体积、运行效率等多种因素。说白了，前端的目的就是让用户用得爽，那么用户体验必须是重中之重。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]  
说了这么多，其实有一个很重要的点没有提到，那就是 CSS。注重用户体验，首先你要用界面要有 UI，HTML + CSS 作为最简单的 UI 构建方式，让前端的 UI 开发成本低到无与伦比，而开发成本低才会有更多的时间和精力去注重用户体验。同时，现在 CSS 也有相应的框架，像 PostCss、Sass 等，更进一步降低了开发成本，释放了开发者的时间和精力。

前端兴起这十年，也是用户体验飞速增长的十年。不管是技术完善度还是从业人数，前端这个方向受到了足够多技术人员的关注，同时也受到了足够多企业的重视。经过前端人不断的努力，现在的情况又如何呢？  
前端的现状

提到现状，必须先提到一个概念大前端。由于近几年互联网的发展，尤其是移动互联网的发展，有的大前端概念将 Native 归入前端的范畴，有的大前端概念将 Node 甚至只渲染页面的 PHP 归入前端范畴，但不管怎么说，笔者认为大前端是未来的一个趋势，将最终目标（提升用户体验）一致的技术归类到一起，让开发者清楚自己的最终目标是什么，要怎么做。当然，也正因为这点，作为一个前端工程师，如果你想更好的发展，你应该有更广的知识面，包括移动端知识、服务端知识。这些知识结合你的前端技术，才能更好地实现优秀的用户体验。

抛开大前端，单谈前端，从前端架构层面谈，最近比较流行的有四个：老牌劲旅 jQuery、最近火得不能再火的 React、Google 精品 Angular 以及 MVVM 框架 Vue。现在几乎所有的项目都会在这四种架构方案中选择其一作为基础，进行业务开发。四种框架，四种不同的思想，简单来说：jQuery Dom 驱动的思想深入人心；React 则推崇组件化，万物皆组件；Angular 则把 MVC 在前端领域发扬光大；而 Vue 则是以数据驱动为核心的 MVVM 架构。作为一个前端新人，不可能很快就理解所有知识和思想，只能一步一步来，先把你在工作中所使用的框架理解透彻，再去思考和学习别的。说实话，会用和理解的差距很大。

在这里，可能会有个疑问，上述四个架构，都很火，但是哪里涉及到用户体验了？是的，这些架构都没有直接涉及到 UI。但是就像足球，没有勤奋的训练和优秀的战术，再好的11人也踢不出好的比赛一样，这些架构从开发成本和开发体验上，降低了开发者编码和维护的难度，让其在 UI 的用户体验上的付出，事半功倍。当然，框架在编码体积、运行效率等多个方面影响了最终的用户体验。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]  
上面所说的是，当前前端的一大现状 ——框架横行，现在很少有公司、有工程师用纯原始的方式撸代码了。而前端另一大现状就是 ——移动为先。原因很简单，随着移动互联网用户的暴涨，各个公司的产品都是移动为先，技术跟随着产品的步伐，也必须移动为先。这时，为了解决多平台的问题，Hybrid 方案脱颖而出，包括传统的基于 WebView 的 Hybrid 方案（例如 Cordova）和 React-Native 等一系列技术方案。在这里我就不多说了，关于移动前端的内容最近充斥着各种技术论坛、交流群、公共号，具体的，大家可以自己亲身去了解。

最后，对于现状，我想大家可能最关心的其实是职业形势。由于前端的兴起，前端人才市场相当活跃，平均薪金水平也是名列前茅。与此同时，前端的技术入门比较容易，造成另一个极端情况：人员泛滥、人才稀缺。这种情况，一方面由于前端发展太快，很难短时间掌握全部知识；另一方面，高等院校并没有开设专门的前端专业，大家更多是自学，野路子很多。所谓乱世出英雄，这样的前端大环境或许对一个新入行的同学更有利。当然，在如此『乱世』中，一个好的职业规划，才能避免『误入歧途』，保证自身顺利地成长。

如何做一个职业规划

上面讲述了前端如何兴起和前端的现状，下面将基于上述两点，分几个方面为大家提供一些有关职业规划的观点，希望对大家有帮助。

确定方向

做职业规划的目的是避免迷茫，而避免迷茫最有效的方式就是确定明确的方向和目标。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]  
对于任何一个技术岗位，都有固定的两个方向：技术专家（架构师）和开发经理。前者偏重技术，需要你在当前领域钻研得很深；后者偏向管理，需要你在对技术有很深掌握的同时，可以带领团队完成项目的开发。当然，两者并不是鱼与熊掌的关系，你可以同时成为技术专家和开发经理。

对于技术专家和开发经理两个方向的选择，更多取决于你自身在工作中多巴胺的分泌情况。当你专研技术时，多巴胺分泌得更多，感到更兴奋，或许你会很容易成为技术专家；反之，当你跟团队一起做业务时，多巴胺分泌得更多，更有获得感，那么你可以尝试向开发经理方向发展。

当然，你也可能做什么都没有分泌太多的多巴胺，那么，你可以在尝试一段时间后，转型其他职业，例如产品经理。前端作为核心是用户体验，与用户最近的工程师，转型产品经理，阻碍会小一些。况且，文艺型前端布道人豆瓣前端负责人张克军认为，前端工程师正慢慢演变为产品工程师，前端和产品离得确实很近。

当你选择好一个方向后，你就要朝着这个方向一步一步进发。丹尼尔在《一万小时天才理论》提出一万小时定律，即要成为某个领域的专家，需要积累一万小时。当然这只是个概数，不过每天花更多的时间去学习和实践，肯定是最有效的。这里，成为技术专家和开发经理过程中，关注的点略有差别。成长为技术专家，要更多关注技术本身的实现，包括逻辑、架构、设计模式、方法论等；而成长为技术经理，则要更多关注技术开发的过程，考虑如何提高开发效率、降低开发成本、优化开发质量等等。不同的人，精力是有限的，选择性关注一些必要的方面，对自身快速的成长是很有必要的。

做业务还是做架构

做业务，时间要求比较紧，代码质量要求高，可参考的代码比较多，业务知识需要学习。做架构，时间稍微自由，对经验要求比较高，无可参考代码，专业基础知识需要深刻理解；最主要的，做架构的你既是开发，又是用户，还是 PM ，只有 80% – 90% 的明确目标，并在开发过程中不断微调最终的目标。对于一个新人，其实不用纠结，做业务才是好的选择，而且做技术含量高、使用流行技术的业务才是最好的。原因很简单，架构的最终的目的是解决业务当中的问题，你没做过业务，哪能知道业务的问题在哪，你都不知道要解决什么问题，如何做好架构。所以，从业务做起，是新人最好的选择，也是唯一可行的选择。而选择有技术含量、使用流行技术的业务的原因更多在于成长，这样你的成长可能会更快、成长道路可能会更直。当然，这只是『可能』，不同的人适合不同的业务，所以不要强求一定『技术含量高、使用流行技术』的业务，更多的而是改变自己，去适应团队、适应业务，这样才能更快地成长。

事实上，很多时候，你会遇到很业务工作很繁重没有额外时间学习的情况。而如何在这样环境中更快地成长呢？说白了就是『抄』，不不，是参考。将学习融入到工作中，是最好的方法。做新项目，参考老项目代码；做新需求，参考老需求的代码；没有同类型的代码，参考别的业务的代码。参考前人的经验，在巨人的肩膀上，成长才会变得更快。同时，你的导师和你的伙伴，也会在业务中给你指点，帮你快速解决成长路上的问题。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 4]  
在这里，总结一下，在繁重的业务环境下快速成长，你需要很优秀的学习能力、很持久的耐心以及很好的导师和伙伴，这样才能在技术成长的路上事半功倍。

技术的学习

说了半天，到了最核心的问题了，对于一个新人如何学习技术？笔者给的建议是：千万不要囫囵吞枣，先把当前使用的技术学透用熟，才是最重要的；千万不要在还没把当前使用的技术吃透之前，去学新的东西，不管新的东西有多火。就像上文所说，不同的框架，有不同的核心，有不同的思想。两个框架代码相似之处的思想不一定相似，例如 Angular 和 Vue 都有双向绑定，虽然效果相似，但是实现思想和内部实现方式是截然不同的。还在入门阶段的你，会被各种思想充斥头脑，反而会更不清楚。

一定的时间后，当你理解透一个架构体系后，你可以类比地去看更多的架构体系。这时候，你会发现不同架构很多东西都是殊途同归，理解得很快。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 5]  
当然，理解透一个架构体系，有人需要一年，有人需要三年，还有人可能需要更长时间。为什么有这么大的区别呢？因为有些人在开发中，并不认为完成就可以了，会在开发中，追求代码的优美，会不断优化自己的代码，让自己的代码性能更好、可读性更高，并通过长时间的积累，达到量变导致质变的程度。即使一个特别聪明的人，没有『量』也不可能『质变』的，只不过他的量可能比其他人少而已。

要提醒的一点是，学技术，一定要结合你所在公司、团队的技术栈。例如，去哪儿前端应届生会在进入业务线前，进行3个月的脱产培训，2017年的前端培训课程内容中涉及的技术主要是 React 和 React Native，而去哪儿业务的技术栈也大多是 React，那么作为去哪儿的前端应届生，你优先学习 React 的技术体系是事半功倍的，既有前人可以问，又有项目可以实践。

当然，在学习架构的同时，不要忽略两样最基本的东西，一个是技术基础，一个是开发规范。

技术基础是一切开发、架构的前提，没有一个好的基础，是无法让你自身的技术水平达到足够高的维度。例如你对于继承理解的并不透彻，你很难理解清晰 React 的内部实现。

对于开发规范，笔者在带应届生时特别注意让他们遵守。代码规范比比皆是，但是很少有人严格遵守。究其原因，多是在代码规范制定之前，已经有自己的一套代码习惯，很难短时间改变自己的习惯。而应届生，一般来说代码并不多，还没有形成自己的编码习惯。这时候，开始遵守一定的规范，会促使他们养成一个较好的编码习惯，为后续的成长打好基础。下面，列举一下开发规范的几点好处，让大家明白代码规范的重要性：

规范的代码可以促进团队合作。

规范的代码可以减少 Bug 处理。

规范的代码可以降低维护成本。

规范的代码有助于代码审查。

养成代码规范的习惯，有助于程序员自身的成长。

如果是自学web前端的话，给以下几点建议：

1、根据自己的情况，规划一个合理的学习计划，学习时长，学习内容，以及练习时间。

2、系统的web前端学习教程

3、多实操，多动手，多练习

4、一周要进行知识点回顾，如果不回顾，不去加深记忆，我保证你会不断的忘记之前的

5、找个专业的人指导，不要异想天开觉得自己可以无师自通，这不现实，也是对自己不负责任

6、坚持每天学习不能间断，准备好用半年的时间学前端，现在竞争大，技术学不好很难就业

7、跟比较明白的人请教一下学前端有哪些坑，避免走太多弯路，掌握好学习方法

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

自学路线：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 6]  
基础篇

HTML,Css,JavaScript，jQuery这是一个基本前端必须要掌握的，比较简单，也是入门级技术。

进阶篇

Bootstrap，TypeScript ，JSON，jQuery EasyUI，jQuery UI等一些第三方js库。稍有难度，前期可以基本了解一下，方便面试，工作中使用再去研究。

高级篇

Vue，React，Angular前端主流三大框架，熟悉一个，了解两个。服务器语言node.js学习一下，版本管理工具，git，svn学习了解。

主战场 —— 移动混合开发

随着移动浪潮的兴起，业务在移动端App 的需求量迅速扩大，应用迭代更新的频率也随之极速攀升，但与此同时纯 Native 的开发和更新成本成为了业务增长难以逾越的瓶颈。因此，引入一种开发更高效、成本更低的解决方案势在必行。  
![在这里插入图片描述][20210105145737407.png]  
在当前的移动互联网环境下，iOS 和 Android 上的 App 已经成了每个互联网产品的标配。如果一个用户端产品并不提供相应 App 版本，几乎会直接定义成一个不完整的产品。而被互联网人尊为铁律的『唯快不破』—— 快速开发、高速迭代、低成本上线，同时也是移动时代每个开发团队所追求的目标。综合以上两点原因，『Native 搭台，Web 唱戏』的 Hybrid 开发模式，以『快』的特点赢得了大家的青睐，并纷纷投入大量开发力量，使这种开发模式迅速走红。当前最常见的技术架构方案有以下三种：

基于 Web 的 Hybrid 解决方案：例如微信浏览器、各公司的 Hybrid 方案

非基于 Web UI 但业务逻辑基于 JavaScript 的解决方案：例如 React-Native

基于 Web UI，但是为了追求运行效率，对 UI 展现逻辑和业务逻辑的 JavaScript 进行了隔离的解决方案：微信小程序

对于一个前端，笔者感觉每个人必须了解这三种常见方案的实现方式和优缺点，这样才能在开发移动端业务的时候，更为清楚自己所要注意、所要学习的地方。当然，仅仅了解实现方式是不够的，你要有环境去实践你学习的东西。再拿去哪儿为例，去哪儿现在大多数业务都是移动端的，Hybrid 和 RN 方案都在被使用。所以，作为一个应届生，你很有可能去做一些 Hybrid 或者 RN 的项目。做 Hybrid 项目时，你更多要考虑的是『如何高效地操作 Dom』；反之，做 RN 项目，你更多要考虑的则是『如何减少和 Native 的通信』。这两点，最终都会反应在项目的用户体验上。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 7]  
这里，会出现一个问题，我只是前端，需不需要去学习 Node？笔者的答案是需要。前端兴起已经很多年，已经从游击队乱枪打鸟的阶段逐渐变为规模化、工程化的时代。在这个时代中，尤其是在工具和流程方面，Node 起到了很大的作用，扮演很重要的角色。诸如 Webpack、Gulp、NPM 这些工具，他们被运用在各个公司的各类前端项目中。学习 Node 其实就是去学习前端的工具，去学习前端的工程化。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]: /images/20221119/b05e588ad33847acb31154f1a68441c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]: /images/20221119/2cc2bf56453b48ee96871e4366eb9761.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]: /images/20221119/5dac3ac14c4d4f25af1611a04cf18d7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]: /images/20221119/9a7bc90fb411442d8acc379bb5a8412d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 4]: /images/20221119/8368a9625f8c4c9bacbfbbf62d9705b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 5]: /images/20221119/f7818febaa8d4a4eb90dc0034053d66c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 6]: /images/20221119/ccffbacf79a44d8db671f5591de6fd19.png
[20210105145737407.png]: /images/20221119/79dde7f295b74e77856eea36270f249a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 7]: /images/20221119/b1d7a2f044604b81939e4df5fd14f1e5.png