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

   <p style="text-align: center;"><img src="https://simg.open-open.com/show/02d5df24f616b493d7e808fa68ebf110.jpg"></p>    <p>逝者如斯夫，不舍昼夜。</p>    <p>历史在向前发展，前端的“摩尔定律”是每隔18个月难度会上升一次，过去的2016年我们不再回顾，展望2017年，对于初学者想要生存下来，该怎么办？如果你有这个疑问，那么你就得好好阅读一下，我这篇文章了。</p>    <p>数据不准，2017年2月19日搜索，来自拉勾网（吐槽：万年不匹配）和智联招聘。</p>    <p><img src="https://simg.open-open.com/show/68c432eebb519bb985a0603f20978caa.jpg"></p>    <p><img src="https://simg.open-open.com/show/e7b3c998cdab9cdae082eecad37b8e47.jpg"></p>    <p><img src="https://simg.open-open.com/show/95a647ae42402cea3de1092f8a66b586.jpg"></p>    <p>PS：（请原谅我截图了一Angularjs的JD）</p>    <p>看起来行业需求的重点都在各种框架的使用上，其实不然。做为初学者，一定要对前端行业有足够的信心与耐心，你才可能走下去。前端是一个承上启下的职业，上接产品，下接服务，还有一大帮的“艺术家”，在产品的前端实现上与视觉还原上，操心的事情会比较多，没有耐心，很可能发生不愉快的事情。这也是我这样的过来人，给予的小小建议。</p>    <p>经过前几年移动和技术的发展，现在的前端可谓百花齐放了，在行业知识上，一定要选择一个可能和你的专业比较接近的，不然行业知识的学习也是非常头疼的事情。比如，现在的直播大火，如果你具备视频专业的知识，在前端上处理编码，视频流，可能就会很得心应手，反之，你就要多多努力了。像数据可视化这一块也是如此，真正的想做一款优秀的产品，行业知识和你的专业知识相结合起来，才能比较棒。</p>    <p>抛开行业知识不谈，我们来谈谈专业。框架对于找到工作非常重要，但是对于职业的长久发展，框架倒是次要的。当你成为了一个框架的大师时，还怕不能快速成为另外一个框架的大师么？那么，2017年，我们该如何从基础知识开始？首先，我认为，你一定要给自己一个良好的定位，PC端的工作就不要再去面试了（相信我，很多业务都在维护期，去了对于自己的职业发展没有任何好处，除非你去的是BAT这样的大厂或者比如团队协作这样的企业级市场应用）当然，如果是利用electron（https://github.com/electron/electron）来开发桌面应用，倒也可以考虑。不过，起点瞄向移动端，我认为是比较合适的。</p>    <p>如果有钱，一定要选择Mac平台，不说为什么，有机会去看看池老湿的文章就明白了，这玩意是生产力啊。在工具上，一定要选择一个好用的IDE比如WebStorm或者编辑器Sublime Text，Atom，不要再搞Dreamweaver了。一个好用的编辑器，当你习惯之后，对于编码会有质的飞跃。下载一个Chrome浏览器吧，虽然Devtools使用很简单，有机会也多看一看这方面的资料，很多调试的小技巧，在定位问题时，对你会有很大的帮助。如果你真的选择了Mac，请一定要配置好你的终端，比如zsh，oh-my-zsh（https://github.com/robbyrussell/oh-my-zsh），对于后面将要开展的工作，也会有较大的提升。</p>    <p>CSS上除了常见的基础，盒模型，设置颜色，字体大小之外，布局应该可以从Flex布局开始学习。如果你有兴趣，可以阅读以下，我是怎么学习CSS的《技术 | 学习CSS的乐趣》。很多布局的方式，可以多从移动的角度来考虑，比如适配等等。（淘宝之前提出的rem方案，我认为是一个很不错的实践，适配的入门可以从此开始）另外，也要考虑一下预处理器方案，随便选择一个来入门吧，相信在第一天上班时，你的Leader就会告诉你，我们的CSS是基于什么预处理器来构建的。不要问为什么，工具在进步，把前端的门槛抬高了一些，我觉得CSS方面，初学者可以从这些来入门。</p>    <p>至于HTML，很多input标签的属性，新的标签，是你一开始就要学习的了，不过一般很少有公司会考察这些，适当的了解一下就好，不用太专注这方面的知识（后期再慢慢补全）。</p>    <p>动画倒是一个很有趣的事情（说实话太炫酷的，我也做不出来），不过，你一定要了解一下CSS3那几个动画的属性，可以通过这些属性来写一些常见的动画。至于如何组合使用，以后可以慢慢学，相信我，动画是一个水很深的地方，不是动画专业的设计师，很难还原一个动画的思路，想想双十一出来的那个超炫的动画，没有专业的动画设计师来设计动画，分解思路，正儿八经的开发是很难做的出来（当然，如果你非常热爱动画的实现算法和思路分解，也一定能实现出来）。</p>    <p>接下来可能是我们要重点关注的一部分，这个部分又分为三个小部分。</p>    <ul>     <li> <p>编译构建配置</p> </li>     <li> <p>ES5 ES6</p> </li>     <li> <p>选择一个入门的框架</p> </li>    </ul>    <p>对于编译构建，没有什么好选择的了，深入的可以不用了解，但一定要了解Node.js是怎么玩的。目前来看（包括未来）前端的构建工具，必然都是基于Node.js的生态来玩。两个东西，一是package.json的配置，二是如何运行Node.js。对于package.json，其实也有三个地方，知道一下即可。一是dependencies和devDependencies的区别。二是scripts的配置，比如pre前置之类的（玩转NPM）。三是知道如何在package.json里配置必要的meta元数据。至于在两个平台不同的运行规则（可能会有错误），Mac平台上大部分是没有运行sudo权限，而Windows平台则要根据具体的问题去Google了。当你遇到这些问题时，一定不要被大段的栈错误信息给吓着了，找到一些必要的错误信息，利用Google搜索一下，相信，都能搜索出来。</p>    <p>目前大量的构建都是基于webpack，你可以不用学习如何写loader或plugin，但是一定要知道它是如何配置的，一个entry，一个output，一个loader，一个plugin。</p>    <p>技术 |webpack实践最后一篇</p>    <p><a href="http://mp.weixin.qq.com/s?__biz=MzI3MDE0MzAzMw==&mid=2652201996&idx=1&sn=3602996738e87d7b70ed4f8b7f64ffed&chksm=f1345f5ac643d64c4aadc91eded27fca8680136ee9bc0b9626f416a9ad27d9b16b99a205afd0&scene=21#wechat_redirect" rel="nofollow,noindex">技术 | webpack 2 使用总结</a></p>    <p>前端开发使用的脚本语言是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等。这些在应用过程中已经有了大量的实践，相信每一个面试都会讲到这些。</p>    <p>对于语法的升级版ES6也是你不可能绕过的一道坎，Safari 10已经全部支持了ES6语法，Node.js就更不用说了。当然现在具体的产品，应该还是会使用Bable这样的工具来转义（看看，是不是又跟编译构建有关了）。不过，在业务上，初学者并不需要一开始全部都学习，一定要挑几个重点，比如Class类，继承，对象的解构，模块的导入与导出，尖头函数，常量与let等，其他的都可以在后期慢慢学习。语言语法上，我们不多说，这些都是你必须要面对的。</p>    <p>然后是一门框架的选择，2016年里社区中经常拿来比较的应该是Vue和React了，这两门框架代表了不同的生产方向，至于对比，我建议大家可以在知乎上搜一搜，相信可以能找到满意的答案。重点是，你必须挑一门出来，在“使用”的层面上，能达到一定的预期和结果。</p>    <p>我们来说一说React吧，对于它本身的库而言，你可能要明白的东西不多，三个概念就能完成业务逻辑：</p>    <ul>     <li> <p>生命周期（那几个方法名都是固定的，用心记一下）</p> </li>     <li> <p>state 更新 与 props传递</p> </li>     <li> <p>如何注册事件</p> </li>    </ul>    <p>大部分情况下，如果你写一个组件，很可能只需要实现这三个方面的东西。不过，你想搭建起一个完整的应用，也不难，加上react-router，redux，Promise和axios就好。react-router也是一个配置起来非常简单的路由库，其实redux也非常简单，一开始，我建议大家不要去搞什么服务端渲染，深度优化之类的，初学者贪多很容易打击自信心，这玩意熄灭之后，是非常老火的。</p>    <p>最后关于专业，我想说一说关于HTTP，前端实现的Ajax这样的解决方案。我们知道前端除了还原视觉之外，最重要的是根据业务数据来渲染页面，然后根据业务数据来实现特定的业务逻辑。这一方面是和HTTP打交道的交互过程，Ajax已经谈了这么多年，相信大家对于它应该不陌生了，至于跨域就更不用说了，JSONP，跨域头报文（Access-Control-Allow-Origin）。HTTP是这些解决方案非常重要的一个基础，有机会一定要好好了解一下，什么是报文，这些请求到底是如何握手交互的。</p>    <p>大厂的面试经：</p>    <p>不管是校招还是社招，都没法避免两种问题，一是：数据结构与算法，二是横向扩展，（比如Hybrid开发，Node.js开发，桌面应用开发等），具备的职业经历越多，技术栈经验越丰富，才更能有机会脱颖而出。抛出来一个具体的问题：Hybrid的离线包机制，这玩意在技术点上可能不是很复杂，但是在业务实现上牵扯到了方方面面，既要有规范的制定，又要有通盘的权衡（前端，服务端，Native），经验越丰富，越能少走歪路。</p>    <p>沟通也是非常重要的一个因素，如果在交流的过程中，一些问题你很难组织起语言，那么就说慢一点吧，说清楚一些，让面试官听明白，你要表达的意思，不然的话，词不达意，就非常有意思了。</p>    <p>路漫漫其修远兮，吾将上下而求索，大家努力吧。</p>    <p> </p>    <p> </p>    <p>来自：http://mp.weixin.qq.com/s/1sCU3WzRjiLcSPV0Soqi2A</p>    <p> </p>