学好前端的 6 点建议，企业需要什么样的Web前端人才？

墨蓝 2022-12-05 00:48 147阅读 0赞

最近接触了很多前端的小伙伴，和他们谈了很多职业发展的问题。他们大部分是做了一到三年的前端新手。

在交流中我发现了一个很有意思的现象，大家同样是入门不足三年，一部分感觉前端是一个很有前途的职业，甚至一部分两年经验的前端同学透露年薪已经30W以上了，而另一部分则表示前端薪资水平不高，技术体系庞杂，迭代速度飞快，苦于学习各种不断更新的技术和框架，心神俱疲。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
同样是前端工程师，技术体系是相同的，工作年限也是相近的，为什么差别这么大？我在前端领域摸爬滚打也有五年了，如何跟上前端技术飞速更新的步伐，我认为学习方法一定要找对，一定要抓住要学习的重点。

于是我总结了几个学习中要注意的要点，希望和各位苦恼于技术水平卡在瓶颈不知道该怎么提高的年轻工程师们分享。

必要因素

学成WEB前端的必要因素，一样都不可以少：

1.自主学习的能力，自己不动，谁都帮不了你。
    
    2.有经验的技术好的人在前期带你少走弯路。
    
    3.明确的学习规划路线，学最新最有用的东西。
    
    4.坚定的目标感，没有持之以恒的态度，什么都学不了，学习都是枯燥的。

四个步骤

从学习过程到就业分四个步骤：

1.首先是学习基础，大部分都是基础知识，掌握基础知识是最基本的
    
    2.基础都掌握之后，锻炼项目能力，学WEB前端技术最后的目的就是可以自己分析业务，然后用代码去实现项目需求
    
    3.然后就是写简历，把简历写的漂亮一点，能让别人映入眼帘那种感觉，写简历也是有学问的，所以什么都需要学
    
    4.面试的时候就是见真功夫，平时学的东西在面试之前做好充实的准备

教程与内容

现在是2020年，可以看2020和2019年的教程，2018年之前的就不要看了。
    
    学习内容：bootstrap，swiper，iscroll，sass，网站上线等。

学习的关键在于持之以恒，唯有保持充足的热情与足够的努力，才能在学习的路上少走弯路。

1、企业要求：

语言技术：js基础和核心/html5/css3;

框架技术：JQuery、AJAX、Bootstrap、Angularjs;

通讯协议技术：HTTP协议、服务端开发技术;

交互技术：UI交互设计;

客户端技术：微信开发技术、html5、js、SDK开发、Android、iOS、Web App开发技术。

在职前端开发，如果你也想学习前端开发技术，可以加入我组建的前端学习交流裙：851 231 348 也可以关注我的
    微信公众号：【前端留学生】自己根据多年来的开发经验总结录制的一套web前端精讲视频和学习方法，
    以及一些前端学习手册，前端面试题，端开发工具，PDF文档书籍教程，无偿分享给大家。
    需要的话都可以自行来获取下载。

2、辅助要求：

辅助要求主要是：有1-3年Web工作经验(近80%的企业)、学历及相关专业、文档规范写作能力、团队合作能力、责任心。

随着技术的升级发展，现在企业招聘Web前端的要求逐渐升级，既懂前端设计、又懂后端开发的前端工程师成为香饽饽。

6 点建议：

Part.1 夯实基础

要成为一名年薪30W的前端工程师，基础一定要掌握牢固，基础知识一问三不知，岂不是要贻笑大方。

css，js基础知识一定要掌握得很熟练，你能使用css实现斑马条纹背景，毛玻璃效果吗？能给图片实现滤镜效果，能实现所有自适应布局效果吗？原型，原型链，闭包是实现设计模式的必备知识，你真的弄懂了吗？闭包导致内存泄漏的原因是什么，你弄明白了吗？ajax跨域的解决方案你可以说几种？9102年了，你还是只告诉我jsonp吗？http协议有了解过吗？如何在http协议中实现不缓存静态资源？

现在是9102年了，这些问题老掉牙了。可是我要告诉你的是，掌握好这些老掉牙的基础，就是很重要。上层的技术可以变更的很快，基础变动很慢，投入时间学好基础，性价比很高。

Part.2 注重细节

在工作中，做事得过且过的人往往难堪大任，作为前端工程师，亦不例外。"代码能用就行"的认识往往是初级程序员的通病。作为有在技术道路上有理想的工程师，一定要对自己的代码严格要求，精益求精。

比如html一定要注意语义化以方便seo优化，该用

，，的地方不能一股脑儿用

完事;css中编写样式时不能页面上样式是有了，类名和属性排序写得一塌糊涂，建议大家按照BEM规范编写风格良好的代码；js中变量命名随意是很常见的不规范行为，一个不直观的变量名往往使同事看了脑袋大。

“代码千万行，注释第一行。命名不规范，同事两行泪。“一首流行诗，饱含了多少程序员的血与泪。

Part.3 深究原理

Angular，react,vue框架和脚手架的普及，越来越多的前端工程师浮于表面，调用框架的API完成任务就完事。要成为一名优秀的前端，绝不能成为单纯的"API调用工程师"，一定要掌握框架背后的原理性知识。

Virtual DOM diff算法，双向绑定原理等等框架背后的机制都值得我们去学习。框架API可以更新很快，而他们背后的原理都是相似的，学好原理既可以让我们对框架底层了解更深入，又可以使我们迅速掌握不断更新的框架表层。只会用框架永远也成不了大神。

Part.4 良书益友

虽然现在网络上各种文档、博客文章已经很丰富了，但是对工作经验不足，基础薄弱的同学来说，随手拿起书，时时能学习才是王道，查漏补缺，完整地夯实基础。

我推荐几本值得购买的书给大家，《图解HTTP》、《JavaScript设计模式与开发实践》、《深入理解ES6》，《高性能JavaScript》。这些书籍都值得多次反复阅读，对于巩固基础，学习框架原理性知识，写出高性能的代码都是大有裨益的。  
![在这里插入图片描述][20200908143729871.png_pic_center]  
Part.5登高见远

前端经历了这么多年的飞速发展，早已成为浩瀚的大海。如果闷着头独自钻研苦学，那无疑是很慢的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]  
如果我们直接去跟随大神学习，那将会使我们快速成长。github上有很多优秀的前端项目，仔细研读这些项目的代码，在commit记录中查看编程思想和逻辑的进化过程，就是一场与大神直接的面对面交流，是一场绝妙的学习之旅。

现在网络课程也十分丰富，有很多技术大牛的课程让我们直接通过视频生动的讲解快速地学习技术，这何尝不是一种向大神快速学习的方式呢。

Part.6紧跟潮流

现在的前端技术体系更新十分迅速，想着要不要尝试用下vue的事仿佛还在昨天，今天一觉醒来就看到尤雨溪宣布要开发vue3.0了。

前端体系中这两年SPA已经不是新名词，PWA，SSR，小程序愈发流行，前端微服务化的趋势也应运而生，RN,electron在移动端，桌面端的使用也越来越多，ES10标准的发布也没几个月了。

所以最重要的是突破当前岗位需求的设限，对各种技术融会贯通，创造新的技术框架，做技术的领头羊，适应时代发展。

技术人成长不能再单打独斗，要学会与人交流，学会将别人的知识为自己所用。如果你依然觉得有些茫然，不如跟有多年前端开发经验的资深工程师聊一聊。

其他发展方向和前景

除了在相关公司从事html5前端工程师的工作外，你还可以选择以下两种工作方式，赚钱多，也更自由。

1、自主创业：全职+兼职

学好html5前端相关技术，也可去一些网络交易平台开设店铺，或成立工作室，专为小企业或是个人开发网站和H5小游戏，不仅工作自由，成本小，赚钱机会也多。也可在上班的同时在网上接单，与同事合作，利用下班时段和假期完成订单。

2、网络运营人员：全职+兼职

现在许多企业都注重线上运营，配有运营岗位，但懂技术的这方面人才很少。

所以，你只需精通html、css3，会简单的JQuery、JavaScript，在简历上写着精通html5，起码能使你的月薪在原基础上再提升1.5K-3K。或兼职做代运营，每月一个号也有3.5k左右的收入。

互联网时代，早已不是只拿一份死工资的时代，学会html5前端技术开发，将来不论做什么，你都多一种赚钱能力。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/9c3f1e689fb64522aa13664c203fa31c.png
[20200908143729871.png_pic_center]: /images/20221123/125eefe17f2645e08ccb306d6b0ef87d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/fabcf9990dca4cdd99f78f1a8ee6f3a9.png