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

varyall 7年前
   <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>