漫谈Web前端学习路线，前端学习路漫漫

前言

最近老是会看到后不少人会问，我如今想学习Web前端开发，该如何下手，学习路线是怎样的？今天这篇文章，我来讲说我本身对前端学习的理解，并结合一些面试中会常问到的问题来谈谈，如何才能在前端坑中，爬的游刃有余？

Web前端

基础

首先前端的基础，相信你们闭着眼睛都能知道HTML+CSS+Javascript，可是它们的轻重缓急该如何去选择呢？我我的认为在学习优先级上HTML > CSS > Javsscript，之因此这么排并非由于Javascript最不重要，而是由于HTML和CSS的学习上能够不用花太多时间，并且我以为Javascript是前端一切学习的基础。

在这里我仍是要推荐下我本身建的web前端开发学习群：617327703，群里都是学web前端开发的，若是你正在学习前端 ，小编欢迎你加入，今天分享的这个案例已经上传到群文件，你们都是软件开发党，不按期分享干货（只有前端软件开发相关的），包括我本身整理的一份2018最新的前端进阶资料和高级开发教程，欢迎进阶中和进想深刻前端的小伙伴。

HTML与CSS能够在一块儿学习，由于HTML的标签只有配合CSS样式才能达成优美的页面效果，没有CSS的页面只能是不少年前的门户网站的样子。随着HTML5和CSS3的普及，以及浏览器对它们的支持，越来多的产品都选择用HTML5开发，HTML5甚至能够直接做为一个前端开发方向。

我以为学习了HTML后，面对这样的问题，应该不会被难到。

1. cookie，localStorage，sessionStorage的区别

2. HTML5新特性canvas标签

3. 浏览器缓存机制，各有什么优缺点？

4. 如何看待HTML5的一些新特性？
   

我以为学习了CSS以后，面对这样的问题，也应该不会被难到。

1. 元素水平垂直居中的实现

2. 浏览器的几种盒模型

3. 行内元素与块级元素

4. 元素相对定位与绝对定位

5. 伪元素:before与::before差异以及用途
   

我以为学习了Javascript后，面对这样的问题，应该不会被难到。

1. 常见的闭包问题，好比for循环内部执行输出函数

2. this关键字输出问题

3. 经常使用的事件类型

4. ajax创建过程，经常使用的状态码

5. Javascript内存回收机制
   

框架

说到框架学习，若是说JS框架的话，相信不少人必定会脱口而出jQuery，这是不少当初进入前端开发领域必定会学习的内容，我也不例外。可是如今我却并不会推荐把不少的时间放在学习jQuery上，由于若是你深刻学习以后会发现，对于jQuery的使用已经变少了。下面咱们细细来讲。

针对HTML布局上，固然Bootstrap是不能少的，咱们不用把每一个类都研究的很透彻，可是对于经常使用的class必定要熟练使用。

针对字体图标库上，推荐使用font-awaresome，还有某宝图标库iconfont，都包含了很是实用的图标。

其实重点想说的是对于前端MVVM框架的学习，相信不少人都知道就是AngularJS，Vue，React。

前端框架

那么针对这些新兴的框架，咱们该如何学习呢？

首先有一点，ES6是必定要去学习的，在Vue2.X，AngularJS2，React中都对ES6提供了原生的支持，之后不少新的特性确定也会使用ES6的语法去编写。

• AngularJS
  

AngularJS在由AngularJS1升级到AngularJS2之后，彻底是一个新的东西，原来在AngularJS1中的controller，service，filter等内容在AngularJS2中都变成一个个的module，component。

因此若是还没学过AngularJS部份内容的同窗能够直接选择学习AngularJS2。可是须要注意的是AngularJS2是以Typescript语言编写的，因此对Typescript的学习就必不可少了。

• Vue

我的认为Vue学习是相对来讲成本比较低的框架，目前官方文档已经很详细，关于Vue全家桶的内容像Vue-resource，Vue-router，Vuex等愈来愈完善，并且在Github上开源是项目也有不少，能够很容易掌握。感兴趣的能够关注下我本身用Vue开发的一个简书网站。

• React

React采用了Virtual DOM这一个很独特的概念，提升了页面渲染的效率。可是也是因为Virtual DOM的存在，在编程方式上，React和Vue,AngularJS稍有不一样，若是习惯了Vue开发，可能还不太习惯React的开发。

在针对框架层面，在学习以后，应该能回答下面这些问题。

1. AngularJS和Vue的双向数据绑定的实现

2. Vuex工做机制

3. React的Virtual DOM基本实现，如何本身实现一个Virtual DOM算法
   

模块化&组件化

前端开发已经从原来的总体化开发发展到如今的模块化开发，甚至是组件化开发，开发过程愈发精细，讲求的是代码的可复用性。

之前一个页面从上到下一次编写的过程，如今已经发展为先将页面进行拆分红模块甚至是组件，不一样的人关注不一样的模块，组件，提升开发效率。

在模块化开发中，不得不提到CommonJS，AMD和CMD规范，而且有不一样的实现，好比RequireJS。对于模块化编程的规范已经有不少的文章有讲到，能够认真去学习下。

构建工具

前端开发是离不开构建工具的，本身写的代码如何打包压缩，ES6的代码如何编译成JS，Sass，less代码如何编译成原生CSS，这些都是构建工具去完成的。

有了构建工具，能够极大的提升咱们的开发速度，这里不得不提到的就是gulp+webpack。

Gulp

gulp是一种任务驱动型的构建工具，经过管道处理数据流，提升了数据处理速度，并且其提供的一系列插件也很方便使用。

Webpack

而webpack的做用就是把全部浏览器端须要发布的静态资源作相应的准备，好比资源的解析、合并和打包，它提供了强大的加载器和插件机制，例如vue-loader提供了对vue的支持，babel-loader提供了对ES6的支持。

其余的构架工具还有工程化构建的Yeoman，Slush，FIS等。

在学习了经常使用的构建工具后，应该能够回答出下面的问题。

1. Gulp和Webpack的不一样

2. Webpack打包速度比较慢，可能缘由是什么？有没有什么解决办法？

全栈

前端开发到最后就是要走全栈开发的道路了，全栈开发以NodeJS做为服务端语言，基于NodeJS实现的服务端框架有Express，KOA，目前也发展的愈来愈成熟。

既然讲到全栈开发，确定会经过服务端语言操纵数据库，所以对于数据库的知识也确定要掌握的。

总结

今天这篇文章主要经过本身对于前端学习的一些见解，可能有些片面，但愿能给你带来帮助。