学习前端开发入指南

大家叫我杰哥 文，转载请注明出处。

正在上传...

取消

重新上传

上一篇文章《我的程序员之路从三万到三十万》发布之后，收到比较多的读者反馈，后续我会针对比较多的问题来分享自己的一些想法，今天分享的是前端开发。

关于薪水，有人告诉我现在毕业生就能给拿到年薪二十万了，非常不错，相比起来其实三十万并不算高了。但是薪水总是和付出成正比的，得到的多，付出的也多。要过年了，如果你比较起产生了悲观的情绪，由此产生消极的想法，真是没有必要的一件事情。比较的差距感应该用来找到自己的不足，制定计划，来提升个人能力。

如果你感到迷茫，可能是不知道从哪里开始，也可能是没有去了解，心态一定要调整好，学校好不好没关系，专业好不好也没关系。这些都不重要，重要的是从现在开始采取行动。同理，如果你在大街上迷路了，你会怎么办呢？

如果要从事软件开发的工作，经常会需要学习很多新的技术和知识，找到学习的途径并快速的学习，是一项非常重要的能力。

什么是前端开发工程师？

前端的驱动力是用户体验，是最近几年才兴起的一个职位，随着Node.js的流行和ES标准的更新，现在一发不可收拾，之前看过一个行业薪水报告，前端最高的月薪能够达到50K，市场上也出现了不少前端架构师之类的高端职位，优秀的前端开发供不应求。

可能很多人理解的前端开发就是能够熟练的使用HTML5/CSS/JavaScript，把一个网页做出来。其实这个只是前端开发中的很小的一部分，前端开发离不开这三样核心，但又不仅仅是这三样。假设我们有一个全新的WEB定制化项目，在项目开始初期的需求沟通过程中，设计师一般会产出设计原型，设计原型决定了软件未来长成什么样子。然后开发人员会按照设计原型来实现具体的需求，写出一行行的代码。而开发人员又分了很多种，前端开发按照原型实现界面功能，还有和后台交互的部分，后台开发则设计服务器、数据架构以及编写业务实现代码。

Mobile First.

其中前端开发工程师是设计师和后台开发工程师的桥梁，要把用户需求中看得见的部分变成一个可以操作的应用。这需要有一定的设计能力，包括用户体验设计和交互式设计能，能够设计一套内容、品牌和功能的组件，能够自适应不同设备，能够进行性能优化，保证数据安全，支持SEO等。

技术层面

技术层面，涉及的东西就太多了，我分几类来说，我认为在实践过程中比较重要和基础的东西，可以作为学习的参考。如果是初学者，可以从HTML5/CSS3开始，所见即所得，只需要几分钟就可以做出一个简单的页面，容易上手。每天花2个小时练习写代码，一个月时间应该就可以弄的很熟悉。也可以找到很多在线的图文教程和视频教程，学习起来非常容易，比如w3cschool。

学习编程的最好的方式就是编程，光看而不动手，是不会有什么效果的。先依葫芦画瓢，然后自己找编程题自己做。比如用JavaScript实现一个保龄球计分程序，github上有leetcode，尝试用JavaScript来实现一次。

HTML5

1、HTML5的结构和元素加载顺序
2、常用标签的用法：div，span，列表，表格，图片等
3、表单：form，input

CSS3

1、CSS结构：内部CSS，外部CSS文件，元素style属性，加载优先级
2、CSS的选择器：有好几种，每种的区别是什么
3、元素的盒模型：主要是和display属性相关，在不同浏览器里面的区别
4、背景和边框：背景图片，内边距，外边距，边框
5、浮动和定位

学习完HTML5/CSS3，可以去找一个复杂的页面，实现一个效果一样的静态的Demo，比如淘宝的招聘主页，顺便也看看招聘的前端职位，在来看看自己是否掌握了，还有哪些需要提高。同样，也可以设计一个酷炫的在线个人简历，面试的时候比较有说服力。

JavaScript

前端的脚本语言有几种，比如JavaScript、TypeScript，选择标准的JavaScript就可以了。其他的比如ES6，可以等基础掌握好了之后再学习，分分钟的事情。

基础知识除了语法之外，其他的需要知道知识：

1、DOM操作和事件工作原理
2、JavaScript内置对象和用法
3、原型链和作用域
4、闭包和promise
5、对象数据结构和JSON
6、AJAX：需要和后台交互

学到这里，如果能够保证投入的时间，一般人6个月时间足够了，可以成为一个的UI dev。现在好的公司校园招聘，会在大四上学期，也就是下半年的时间举行。对于大三将要毕业的同学，找工作时间也是足够的。

前端库/框架

推荐几个必备的：Bootstrap，jQuery，Vue.js

开发工具

开发工具很多，包括模块化管理，代码编译和构建。每个人习惯不一样，根据自己喜好选择一个即可。我开发的时候使用的是IntelliJ企业版和Chrome，版本管理用Git和GitHub，依赖管理使用npm，建工具使用的Webpack。

但是要想成为前端开发工程师，除了上面的基础之外，还需要熟悉非常多的内容，这个过程则需要2-3年的时间和大量的项目实践。例如：

需要知道HTTP1/2的相关知识，了解WEB应用的工作原理。
熟悉不同浏览器之间的差异，移动端和PC的响应式设计。
能够使用工具和测试来提高代码质量，包括：静态代码检查、单元测试、自动化测试。
偏向游戏的应用高级特性如：canvas,webGL,SVG，动画。

最近开通了微信公众号，大家也可以关注微信公众号来进行互动。