观点 | 2017年前端初学者的生存指南

 

樱止语

2017-11-01 16:37 · 字数 3256 · 阅读 0 ·  日记本

 

逝者如斯夫，不舍昼夜。

 

历史在向前发展，前端的“摩尔定律”是每隔18个月难度会上升一次，过去的2016年我们不再回顾，展望2017年，对于初学者想要生存下来，该怎么办？如果你有这个疑问，那么你就得好好阅读一下，我这篇文章了。

 

数据不准，2017年2月19日搜索，来自拉勾网（吐槽：万年不匹配）和智联招聘。

 

 

 

 

PS：（请原谅我截图了一Angularjs的JD）

 

看起来行业需求的重点都在各种框架的使用上，其实不然。做为初学者，一定要对前端行业有足够的信心与耐心，你才可能走下去。前端是一个承上启下的职业，上接产品，下接服务，还有一大帮的“艺术家”，在产品的前端实现上与视觉还原上，操心的事情会比较多，没有耐心，很可能发生不愉快的事情。这也是我这样的过来人，给予的小小建议。

 

（我有一个前端学习交流QQ群：328058344 如果你在学习前端的过程中遇到什么问题，欢迎来我的QQ群提问，群里每天还会更新一些学习资源。禁止闲聊，非喜勿进。）

 

经过前几年移动和技术的发展，现在的前端可谓百花齐放了，在行业知识上，一定要选择一个可能和你的专业比较接近的，不然行业知识的学习也是非常头疼的事情。比如，现在的直播大火，如果你具备视频专业的知识，在前端上处理编码，视频流，可能就会很得心应手，反之，你就要多多努力了。像数据可视化这一块也是如此，真正的想做一款优秀的产品，行业知识和你的专业知识相结合起来，才能比较棒。

 

抛开行业知识不谈，我们来谈谈专业。框架对于找到工作非常重要，但是对于职业的长久发展，框架倒是次要的。当你成为了一个框架的大师时，还怕不能快速成为另外一个框架的大师么？那么，2017年，我们该如何从基础知识开始？首先，我认为，你一定要给自己一个良好的定位，PC端的工作就不要再去面试了（相信我，很多业务都在维护期，去了对于自己的职业发展没有任何好处，除非你去的是BAT这样的大厂或者比如团队协作这样的企业级市场应用）当然，如果是利用electron（https://github.com/electron/electron）来开发桌面应用，倒也可以考虑。不过，起点瞄向移动端，我认为是比较合适的。

 

如果有钱，一定要选择Mac平台，不说为什么，有机会去看看池老湿的文章就明白了，这玩意是生产力啊。在工具上，一定要选择一个好用的IDE比如WebStorm或者编辑器Sublime Text，Atom，不要再搞Dreamweaver了。一个好用的编辑器，当你习惯之后，对于编码会有质的飞跃。下载一个Chrome浏览器吧，虽然Devtools使用很简单，有机会也多看一看这方面的资料，很多调试的小技巧，在定位问题时，对你会有很大的帮助。如果你真的选择了Mac，请一定要配置好你的终端，对于后面将要开展的工作，也会有较大的提升。

 

CSS上除了常见的基础，盒模型，设置颜色，字体大小之外，布局应该可以从Flex布局开始学习。。很多布局的方式，可以多从移动的角度来考虑，比如适配等等。（淘宝之前提出的rem方案，我认为是一个很不错的实践，适配的入门可以从此开始）另外，也要考虑一下预处理器方案，随便选择一个来入门吧，相信在第一天上班时，你的Leader就会告诉你，我们的CSS是基于什么预处理器来构建的。不要问为什么，工具在进步，把前端的门槛抬高了一些，我觉得CSS方面，初学者可以从这些来入门。

 

至于HTML，很多input标签的属性，新的标签，是你一开始就要学习的了，不过一般很少有公司会考察这些，适当的了解一下就好，不用太专注这方面的知识（后期再慢慢补全）。

 

动画倒是一个很有趣的事情（说实话太炫酷的，我也做不出来），不过，你一定要了解一下CSS3那几个动画的属性，可以通过这些属性来写一些常见的动画。至于如何组合使用，以后可以慢慢学，相信我，动画是一个水很深的地方，不是动画专业的设计师，很难还原一个动画的思路，想想双十一出来的那个超炫的动画，没有专业的动画设计师来设计动画，分解思路，正儿八经的开发是很难做的出来（当然，如果你非常热爱动画的实现算法和思路分解，也一定能实现出来）。

 

接下来可能是我们要重点关注的一部分，这个部分又分为三个小部分。

 

编译构建配置

 

ES5 ES6

 

选择一个入门的框架

 

对于编译构建，没有什么好选择的了，深入的可以不用了解，但一定要了解Node.js是怎么玩的。目前来看（包括未来）前端的构建工具，必然都是基于Node.js的生态来玩。两个东西，一是package.json的配置，二是如何运行Node.js。对于package.json，其实也有三个地方，知道一下即可。一是dependencies和devDependencies的区别。二是scripts的配置，比如pre前置之类的。三是知道如何在package.json里配置必要的meta元数据。至于在两个平台不同的运行规则（可能会有错误），Mac平台上大部分是没有运行sudo权限，而Windows平台则要根据具体的问题去Google了。当你遇到这些问题时，一定不要被大段的栈错误信息给吓着了，找到一些必要的错误信息，利用Google搜索一下，相信，都能搜索出来。

 

目前大量的构建都是基于webpack，你可以不用学习如何写loader或plugin，但是一定要知道它是如何配置的，一个entry，一个output，一个loader，一个plugin。

 

前端开发使用的脚本语言是java script，而浏览器厂商基于此语言帮我们实现了很多具体的接口，比如DOM，HTML5的新API等。这门语言，目前发展到了ES 2015，也就是大家常常说的ES6。而ES5的实现，也是你需要去学习了。语言语法上，我认为java script是一门很简单的语言，入门是次要的，你可以到后期再来学习一些其他的高级特性。首先，基于浏览器的前端开发，说白了很多都是在用java script脚本来调用浏览器厂商帮我们实现好的DOM API，以前大家都用document.getElementById来获取一个元素，而现在我们有了更好的选择：document.querySelector，即可以选择class元素，也可以选择id元素，DOM是你绕不过去的一道坎。其次，你要了解一下比较常见的HMLT5 API实现，比如Element.classList，localStorage，Web Sockets，requestAnimationFrame，XMLHttpRequest Level 2等等。如果你参与的面试项目跟绘图有关系，可能你还需要学习一下Canvas，WebGL等。这些在应用过程中已经有了大量的实践，相信每一个面试都会讲到这些。

 

对于语法的升级版ES