观点 | 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。
前端开发使用的脚本语言是JavaScript，而浏览器厂商基于此语言帮我们实现了很多具体的接口，比如DOM，HTML5的新API等。这门语言，目前发展到了ES 2015，也就是大家常常说的ES6。而ES5的实现，也是你需要去学习了。语言语法上，我认为JavaScript是一门很简单的语言，入门是次要的，你可以到后期再来学习一些其他的高级特性。首先，基于浏览器的前端开发，说白了很多都是在用JavaScript脚本来调用浏览器厂商帮我们实现好的DOM API，以前大家都用document.getElementById来获取一个元素，而现在我们有了更好的选择：document.querySelector，即可以选择class元素，也可以选择id元素，DOM是你绕不过去的一道坎。其次，你要了解一下比较常见的HMLT5 API实现，比如Element.classList，localStorage，Web Sockets，requestAnimationFrame，XMLHttpRequest Level 2等等。如果你参与的面试项目跟绘图有关系，可能你还需要学习一下Canvas，WebGL等。这些在应用过程中已经有了大量的实践，相信每一个面试都会讲到这些。
对于语法的升级版ES6也是你不可能绕过的一道坎，Safari 10已经全部支持了ES6语法，Node.js就更不用说了。当然现在具体的产品，应该还是会使用Bable这样的工具来转义（看看，是不是又跟编译构建有关了）。不过，在业务上，初学者并不需要一开始全部都学习，一定要挑几个重点，比如Class类，继承，对象的解构，模块的导入与导出，尖头函数，常量与let等，其他的都可以在后期慢慢学习。语言语法上，我们不多说，这些都是你必须要面对的。
然后是一门框架的选择，2016年里社区中经常拿来比较的应该是Vue和React了，这两门框架代表了不同的生产方向，至于对比，我建议大家可以在知乎上搜一搜，相信可以能找到满意的答案。重点是，你必须挑一门出来，在“使用”的层面上，能达到一定的预期和结果。
我们来说一说React吧，对于它本身的库而言，你可能要明白的东西不多，三个概念就能完成业务逻辑：
生命周期（那几个方法名都是固定的，用心记一下）
state 更新 与 props传递
如何注册事件
大部分情况下，如果你写一个组件，很可能只需要实现这三个方面的东西。不过，你想搭建起一个完整的应用，也不难，加上react-router，redux，Promise和axios就好。react-router也是一个配置起来非常简单的路由库，其实redux也非常简单，一开始，我建议大家不要去搞什么服务端渲染，深度优化之类的，初学者贪多很容易打击自信心，这玩意熄灭之后，是非常老火的。
最后关于专业，我想说一说关于HTTP，前端实现的Ajax这样的解决方案。我们知道前端除了还原视觉之外，最重要的是根据业务数据来渲染页面，然后根据业务数据来实现特定的业务逻辑。这一方面是和HTTP打交道的交互过程，Ajax已经谈了这么多年，相信大家对于它应该不陌生了，至于跨域就更不用说了，JSONP，跨域头报文（Access-Control-Allow-Origin）。HTTP是这些解决方案非常重要的一个基础，有机会一定要好好了解一下，什么是报文，这些请求到底是如何握手交互的。
大厂的面试经：
不管是校招还是社招，都没法避免两种问题，一是：数据结构与算法，二是横向扩展，（比如Hybrid开发，Node.js开发，桌面应用开发等），具备的职业经历越多，技术栈经验越丰富，才更能有机会脱颖而出。抛出来一个具体的问题：Hybrid的离线包机制，这玩意在技术点上可能不是很复杂，但是在业务实现上牵扯到了方方面面，既要有规范的制定，又要有通盘的权衡（前端，服务端，Native），经验越丰富，越能少走歪路。
沟通也是非常重要的一个因素，如果在交流的过程中，一些问题你很难组织起语言，那么就说慢一点吧，说清楚一些，让面试官听明白，你要表达的意思，不然的话，词不达意，就非常有意思了。
路漫漫其修远兮，吾将上下而求索，大家努力吧。