「入坑」前端开发，我有一些经验想和你分享

写在前面最近身边有不少朋友想转行去做前端开发，然后跑过来问我，向我了解前端岗位，以及给他们一些建议等等；他们有的还没毕业，对于即将到来的社会毒打充满着迷茫和不安，有的已经工作两三年，突然觉得自己不合适当下这个份工作，想谋求一份别的职业。 选择一份职业不在于这份职业可以给你带来什么，而是你可以因此成为什么，这篇文章我会跟你聊聊关于前端的一些见解和「入坑」指南，希望可以给你的职业规划多一份参考和建议。本篇文章中，你将会收获：前端工程师岗位发展和分析前端的发展前景和钱景如何对自己当下的职业规划做出选择前端学习路线的三个阶梯本篇文章适合以下人群即将毕业的计算机专业应届生想要转行前端开发的你关于前端开发这个岗位不少人对于前端开发充满着各种误解，觉得就是写写网页 、切切图的，没什么了不起；前几年开始，市场上出现了一些可视化构建网页的工具和平台，可以一键发布，直接生成网页效果，有人就说，这样的话，前端开发是不是要丢饭碗了？前端技术发展是不是到达瓶颈了？前端的岗位是不是快饱和了等等... 往往提出这些问题的人，大多数都是不了解前端工程师和前端开发的人。 首先不得不说，在过去的一段时间内，前端工程师当时还叫做「网页设计师」，工作内容确实是写一些 HTML 和 CSS 样式，偶尔还打开 PS 切个图，放到现在，如果只会这些技能肯定是找不到工作的；其次，真正的前端开发工程师也绝不是程序或者人工智能可以替代的岗位，在过去的十年里，前端技术发生了翻天覆地的变化，当年的「网页设计师」们绝对想不到，前端还可以做后端的工作，还可以开发跨端 APP 和桌面应用，几乎可以胜任大部分的开发岗位，「大前端」的时代就这样来了。前端岗位饱和了吗？不管别人怎么说，我是完全不相信前端岗位在较长的一段时间内，会达到饱和的现象，不过可能会出现「前端」的定义上的转变，就像从传统的「网页设计师」向「web前端工程师」式的转变。 先不说别的，举个例子：微信小程序 2019 年的活跃账号数达 12.025 亿，小程序开发一度成为最热门的技术方向和前端岗位之一，而且做小程序的，可不只有微信一家；一个技术变革、一个新框架的出现、或者一个工具的发布，都有可能带动一批新的前端岗位出现。 前端岗位是刚需，自从前端岗位诞生开始，UI、后端的分工更为明确，UI 可以更专注的进行视觉设计，后端从前端中解放了出来，把经历放到业务处理和数据操作上，提高了工作效率的同时，还降低了沟通成本。随着对用户体验的不断追求，前端的复杂度也不断提高，总得来说，按照目前的市场来看，前端岗位的需求量不仅不会饱和，反而会不断的提升。「前景」和「钱景」在我眼中的前端开发的前景，它的发展会更可能的细分领域和专业，会出现更多前端相关的专业领域，而且会慢慢的和后端融合，成为全栈。 谈到薪资水平，目前的全国前端开发薪资水平差不多是 11k 左右，当然，这主要是一线城市带动的；在一二线城市，本科应届生的平均薪资可以达到 5-8k，1-3 年经验的可以达到 10-18k 左右，3 年以上的，平均薪资可以达到 20k 以上。 前端开发的平均薪资水平在整个软件开发专业方向来说，还是比较可观的，技术水平越高，薪资也就越高，从各大平台调查的结果，以及我身边朋友的情况来看，薪资水平跟文凭的关系不是特别的大，专科毕业也一样可以达到平均薪资水平。我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流裙：前面：603 中间：985 最后：993。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。如何对自己当下的职业规划做出选择职业规划这个东西太广，我不好以任何形式的口吻教你些什么，在这我只跟你聊聊我是怎么做的，规划一件事情其实没别的，就是不断的做出选择罢了，而这最难的，就是当下的选择，很多人不能很好的规划自己的职业方向，不知道自己该干什么，其实都是纠结于自己当下要做出怎样的选择。 选择的时候，有个非常不好的东西，叫作「犹豫」，选择往往都是一开始看似有的是选择，到最后不得不做出的唯一一个选择。 向你推荐一个思维工具，叫做「终局思维」，就是通过你最终的一个目标，一步步的倒推，得到你当下的需要做出的选择。比如你希望自己可以成为某一行业的大佬，那不难可以推断出实现这个目标需要具备什么能力、知识以及各方面的资源，然后对比现在，缺什么，补什么就是了；终局思维就是找到最终的那个灯塔，然后看看现在，调整方向，往灯塔慢慢航行而已。 到这你应该不难发现，这个思维工具适合所有做选择犹豫时的场景，不管是对个人还是对企业的发展，这都是个非常好的工具：你只要想清楚了最终的一个目标，慢慢的倒推到现在，你一定可以做出当下的选择。如何更高效的学习前端如果你已经做好了当程序员的准备，那也一定要做好终身学习的准备，并且是高效的学习；技术和框架发展迭代的非常快，往往你旧的还没搞懂，新的就来了，持续不断的高效学习、积累经验是程序员的家常便饭。保持代码量好的士兵都是子弹喂出来的，程序员也同理，如果没有足够代码量的积累，你将很难胜任开发的岗位，而在工作中的代码量取决于项目，所以积累项目经验也同样重要。 对于即将毕业的学生来说，可以通过刷题的形式，保持每天都有一定的代码量；你还可以通过搭建博客、网站等实际项目积累经验，这在面试的时候可都是加分项。保持代码量不仅可以提升你的代码质量，还可以积累写代码的经验，在遇到问题的时候，可以更快的定位到问题出现的原因和找到解决方案。少看多动通常一个新手上路，都会买相关的开发入门的书籍，或者网上找一些视频案例，我不推荐这么做，并不是这些东西不好，而是当你在看书或者看视频的时候，很容易陷入一个误区，就是示例的代码看懂了，动手的时候全懵了，完全不知道怎么写。 如果学习编程只是看书或者看视频，从不动手调试，不亲手搭建环境，跟 Bug 争个你死我活的话，那你永远都在入门的路上，编程相关的书籍或者视频只是学习过程中的工具，看懂了不代表你学会了，你学会了不代表实际开发的时候就没有问题了。切忌闭门造车除非你有强于常人的自学能力，否则一定要切忌这种封闭式的学习，多逛技术社区，注重与他人的技术交流，多学习别人的代码实现，遇到实在无法解决的问题，可以向他人请教。 如果条件允许，建议多参加一些线下技术交流活动或者开发者大会，这对你了解前沿技术、提升技术水平以及认识一些行业大佬都是非常不错的途径。与其写Demo，不如来真的写再多的示例代码，都不如一次实际项目获益的多，很多人会说除了公司上班之外，自己没有什么实际的项目可以开发了，这显然不是一个很好的借口。 示例代码往往跟实际业务场景相差巨大，复杂程度就更不用说了，你永远不知道在用户操作的时候就发生什么，你也不可能从代码中预估到所有可能出现的 Bug。 亲手开发一个自己的产品，然后将它发布上线，服务一小批用户，然后不断的更新迭代，你总能发现这其中带给你的价值，你可以和你的用户来一次最直接的对话，你的代码可以直接影响你的用户。相比公司的项目，你的产品你说了算，按照自己的意愿去实现一个东西，还有什么比这更酷的事吗前端学习路线的三个阶梯前端开发是一个入门门槛低，但进阶难度大的岗位，这里将这条学习路线分为“基础”、“进阶”、“高阶”三个阶梯，如果你是从零入门前端开发，那么这条路线或许对你有些帮助。入门基础：HTML+CSS+JS学习 HTML（超文本标记语言）标签，熟悉 HTML5 新特性，学会使用各种标签呈现网页内容，包括文字、图像、音视频、以及程序；在 web2.0 时代，你必须要学会使用 DIV +CSS 进行布局，当然，光学会 HTML 是不够的，它只提供网页元素，确定网页的骨架，要想网页更好看，你需要学会使用 CSS（层叠样式表）进行美化。 CSS3 是目前使用的样式版本，它诞生于 2001 年，你需要学会使用 CSS 的各种样式属性，配合 HTML 标签实现 UI 效果以及特效。 学习 JavaScript 可以让你的网页实现相关功能、交互以及业务逻辑，对于基础，你需要学会：JS 数据类型、面向对象编程、基本的关键字、指令、函数的使用、JSON、Ajax 的使用、原生 DOM 的操作、事件捕获、冒泡、代理、ES6 新特性等等。 学会了基础，并不代表你可以从事前端了，学会基础，还远远不够，好的前端工程师都是项目喂出来的，如果你仔细阅读过前端招聘的岗位要求，你会发现没有任何一家公司是需要原生 JS 开发的，甚至几年前大火的 JQuery 框架，现在也几乎见不到了。前端进阶：前端工程化和三大框架前端工程化的出现，彻底的改变了传统开发模式，让前端形成了一套开发体系和工作流，将开发流程、工具、技术栈等规范化和标准化，一方面是为了提高多人开发效率和降低开发成本，另一方面可以使前端独立出来，拥有自己的一套软件开发规范。 步入进阶，你需要了解或者使用各种库/框架、构建/管理工具、CSS/JS 模块化开发等，对于开发者来说，这些尤为重要。前端工程化思想提倡模块化和组件化，大概可以理解为将大型项目拆分成一个个模块，每个模块相互独立、耦合性低、开发难度小，再加上多人开发开发基于 Git 进行版本管理，大大提升了开发效率。 你可能多少了解过前端三大框架——Vue、React 和 Angular，大部分的前端项目和衍生的框架都是基于这三个去搭建和开发的，例如小程序跨端框架 Uni-app（Vue）、Taro（React 和 Vue）等等，进阶不要求三大框架都达到精通的地步，但需要了解，并且擅长使用其中的一个以上。 Angular 最早诞生于 2009 年，那时候还是叫 angularJS ，相对于当时盛行的 JQuery，它最大的特点是开发模式上的变革，例如借鉴了后端的开发模式——MVC、模块化、依赖注入等，这个框架被广泛用于 Google 的产品中。 对于初学者来说，Angular 是一个比较容易入门的框架，但深入后需要了解的概念很多，较难理解；其次，Angular 的文档较少，遇到问题比较难通过文档解决。 React 是 Facebook 在 2013 年发布的，虽然起步比 Angular 晚，但是在一些特性和性能上远远胜于 Angular，例如支持 ES6 语法，采用函数式编程，虽然入门门槛较高，但是其灵活的开发方式受到了更多开发者的推崇；React 渲染速度快且兼容性较好，甚至可以运行在 IE8 中。唯一的缺点是，它并不能算是一个完整的框架，需要借助 ReactRouter 和 Flux 等才能构建一个完整的应用。 阿里出品的 Ant Design 最早是支持 React，后来也陆续支持了 Vue 和 Angular，你可以从这些框架入手并学习 React。 Vue 是尤雨溪在 2014 年发布的，是目前国内最受欢迎和最容易上手的前端框架，绝大部分的衍生框架和组件库也是基于 Vue 编写，它借鉴了 React 和 Angular 的特点并做了相关优化，既有像 Angular 的模版语法，也有 React 的组件化体系，并且拥有足够完善的文档体系，对于初学者，建议优先入门 Vue，学会了其中一种，你会发现另外两个框架也不过如此。通往高阶：寻找属于自己的发展道路你会发现不仅仅是 Web 开发，前端还可以做很多东西，如下图： 寻找适合自己的开发方向是每个前端工程师都应该思考的问题，前端技术发展到现在，一个全栈前端就可以完成整个产品各个端的开发工作，你可以开发一个属于自己的产品，然后发布上线，持续的更新迭代，慢慢的让自己成为可以独当一面的工程师；你也可以针对开发中某一处的不足，提供自己的解决方案并开源出去，例如写一套属于自己的组件库等；你也可以往其它方向发展，人工智能、数据可视化等都是不错的选择。在学习过程中有什么不懂得可以加我的WEB前端学习交流扣扣qun，前面是603，中间985，后面是993。群里有不错的学习教程与开发工具、项目源码分享，专业的老师解答问题。与你分享web前端企业当下人才需求及怎么从零基础学习好web前端，和学习什么内容。写在最后前端作为和用户最近的一个职业，注重美观和交互，更多的强调用户体验，我们会为了减少一丢丢的包体积而想办法优化，也会为了提高几百毫秒的加载速度而不断尝试。前端开发需要你有严谨和一丝不苟的态度，开发前做足准备，提交测试前充分自测，养成良好的编码规范，必要的地方写上注释，降低代码的维护成本。 写代码是个技术活，也是个艺术活，遇到问题优先考虑自我解决，养成独立思考的和解决问题的能力，实在不行再向别人提问。同样都是开发，这些都是你超越同行的必备能力。

本文章由javascript技术分享原创和收集