共计 3190 个字符，预计需要花费 8 分钟才能阅读完成。
近两年来，前端开发工程师越来越火了，2019 年已经到来了，很多准备入行前端开发工程师的小伙伴们，不知道准备得怎么样了呢？有的朋友在想方设法的学习，争取在年后的金三银四能靠实力找到一份满意的工作！还有的小伙伴很迷茫，想学前端，却没有方向！
今天来给大家讲讲，在 2019 年，我们学习前端开发，如何才能高效学会前端开发？
零基础起步
首先，无论学任何一个技术，都是从零基础开始的，前端开发也是一样。做软件开发，是从事编程开发工作，必须先从语法基础开始学习，通过语法组成产品效果。前端开发的基础语法，由 HTML+CSS+JavaScript 组成，这是前端开发最基本的 3 个语言。网页布局基础：HTML+CSSHTML 就是超文本标记语言，组成网页内容的最基本语言。你可以直接说他是网页的骨架，网页的图片、文字、视频、音频、程序都需要他引入到网页中体现。光是 HTML 做网页，只是有了内容，当然是远远不够的。因为只是 HTML 的话，只能用 Table 做布局才能勉强做出个成型的网页来。但是从 Web2.0 时代开始，都是盒子模型布局法了，也就是用 DIV+CSS 来实现布局了。CSS 就是层叠样式表。通过样式属性来对标签进行布局规范，在不再使用 table 布局的时候，只要 CSS 样式对网页标签进行对应的布局实现才是正确的开发方式了。HTML(div)+CSS 布局，是基础入门的基本步骤，在这个阶段，你需要学习的内容，包括有：1. 标签语义化，SEO2. 页面加载的流程和原理 3. 网页结构 4. 盒子模型（W3C 盒子模型和 IE 盒子模型）5.CSS 选择器 6.CSS 布局浮动、定位
在刚刚开始的阶段，大家学习的布局方式基本都是以 px 为单位的静态布局方法。熟悉好布局方法，先给自己一个小目标，做一个简单的电商网页的基本结构出来，不用特效，不需要交互。
浏览器脚本语言：JavaScriptJavaScript 是我们学习前端开发中非常重要的一个内容，也是一个大家经常掉坑里的难点。JavaScript 现在可以说是互联网时代使用率最高的脚本语言了，在网页中，所有的数据渲染，特效的交互都需要利用 JavaScript，来影响浏览器的显示。JavaScript 不只是开发网页特效和渲染数据的重要内容，在学习前端开发的后期，大量使用算法和框架的时候，对 JavaScript 基础的考验也是很多的。在基础阶段，我们学习 JavaScript 需要注意：1. 基本关键字指令 2. 基本数据类型、数组 3. 函数 4. 面向对象编程 5. 原型链、闭包 6.JSON7.Ajax8.DOM(文档对象模型 原生 DOM 操作)9. 事件捕获、冒泡、代理 10. 常用函数方法 11.ES5、6、7
在 JavaScript 部分学习，主要还是要去理解好交互的原理，把原理分析清楚，真的理解语法，那写出多复杂的逻辑也是手到擒来。
JavaScript 经典类库 jQuery 说到学习 JavaScript，很多小白同学肯定会很头痛他的原生写法。每次逻辑业务都需要手动写，也就是用一次就造一次轮子。觉得很麻烦。如果能简单一点就好了。因为 JavaScript 有可以封装的特性，所以在后面也出现了很多用 JavaScript 封装的类库、插件。比如说最经典的类库就是 jQuery 了。jQuery 类库就是在类库里面封装好了很多 JavaScript 的事件方法。jQuery 通过封装，减轻了遍历、对象选择等等很多的问题。把网页特效的实现变得简单化，通过调用方法就可以了。在学习 jQuery 的时候，需要重点认识的有:1.jQuery 语法和 JavaScript 原生语法的差异 2.Dom 对象和 jQuery 对象 3.jQuery 的入口函数和 JavaScript 的入口函数的差异 4.jQuery 事件的执行逻辑。学习 jQuery，最需要达到的效果就是能快速的完成网页的特效，比如说轮播图、手风琴菜单、旋转木马、放大镜等等这些特效。能完成一个电商网站的布局 + 特效开发是最基本的要求了。
这些就是零基础学习必备的一些基本内容，在入门前端开发最基本需要掌握的东西，把基础理解好，才能为后面的学习做更多的准备。
多终端进阶学习
除了基础的 PC 端，目前移动端可以说是非常火的了。比 PC 端单一的网页不同，在移动端的技术可以应用到 WEB-APP, 小程序，Hybrid-App 等等。Web-App 也就是我们常见的浏览器（以及内置浏览器，比如微信）打开的大型移动端网页。比如我们常见的电商网站，功能性网站，管理网站，在布局和功能上都有 APP 的效果。做好 Web-App 开发，最基本的很多人肯定会说响应式布局，但是前端开发是又 5 种布局法的，除了出名的响应式，还有在移动端最重要的弹性布局法，也就是很多人头疼的 rem 布局。除了布局方法之外，在 H5 新特性和触屏事件和设备兼容性问题也是需要信手拈来。小程序这个也不用多说，现在可以说是非常火的，各大平台都有在做自己的小程序，各种砍价，抢票，电商，游戏都有运用。这个以微信小程序为例，主要是微信团队基于前端基础来做的封装语法，主要的还是 ES 语法。小程序目前很多公司都是招聘前端开发，目前还没有独立的小程序开发工程师，所以小程序可以说是前端工程师高薪就业的加分技能，换句话说就是成熟开发必备了。Hybrid-App 又称混合式 APP，可能听说的人很少，但是 18 年是越来越多人去开发了，这种是能直接产出下载到终端的 APP 的，在体验感上可以说已经具备传统 APP 的大部分功能了。这种开发门槛较低，也就是前端开发就可以完成。多数都是大包平台就能做，这个你可以后面了解一下。
前端主流技术框架
前面的都是基础东西，现在去就业前端开发，不是只靠个基础东西，搞个移动端页面就可以算成熟了。前端 3 大框架，VUE、Angular、React 这 3 个可以说是现在非常火热的了。基础语法都可以写的前端，为什么还要框架？很多小白朋友是不懂什么是框架的，只听过 jQuery 这些东西，以为就是框架。或者认为框架就是加速开发，觉得这些库、插件就能完成框架的工作了。其实框架的出现，是改变前端地位的重要标志。最重要的表现，就是前后端分离，在前后端分离之前，很多后端开发都是又当爹又当妈的，效果不好效率也不高，我就是在后端出身，深知痛苦。现在的前端项目，比以前是更加复杂化、多样化了。项目复杂了，问题也多了。那框架到底解决了什么问题？解决重复引用外部 js，以用 jQuery 开发为例，很多时候都是不能单一完成一个项目的，还需要引用很多的第三方插件和库，导致会一个项目引入很多外部 JS 文件。这样不仅让代码变得杂乱，而且很影响打开速度。但是用框架呢，以 VUE 为例，一般会和构建工具配合，然后就是一个入口文件就可以完成了，在运行时候就在入口引入一次，一劳永逸。使用组件化开发，组件是前端框架里非常强大的功能之一，它可以扩展你的 HTML，封装可以重用的代码块，比如你的轮播图、tab 切换、页面头部、页面底部等等。这种独立的组件具有了结构（html），表现（css）和行为（js）完整的功能，很大程度的节省了代码量，提高了代码的复用性。特别是团队合作的时候，可以很好的提高使用效率。减少开发周期，如果你觉得 jQuery 可以减少开发周期了，那其实框架可以比库更快。比如说使用 jQuery 开发的时候，很多时候是需要频繁去操作 DOM，每次效果都要去查找 DOM，这样就显得很繁琐了。使用框架的时候，很多功能都得到了封装，比如说很多指令都有数据绑定，数据格式化这些功能。这样更多时候，我们开发的时候只需要关注数据的逻辑就行了。
最后这些也就是我们学习前端开发必备的一些知识点了。学习路线放一下给大家。前端开发学习不是单一的，内容比较多，同样应用的场景也非常多。如果你想从事前端开发工作，就要更急专心和努力，坚持方向不动摇！更多前端开发学习，关注公众号【前端研究所】每天更新更多学习教程和方法。
