[百度网盘]Web前端学习路线与书籍推荐

什么是web前端？
　　在以前，通俗的讲是网页制作
　　那么如果高效优雅的学习web呢？
　　注：以下纯属个人观点，如果不当请指出
　　第一阶段、html(5)+css(3)
　　Html和css是基础中的基础，但对于很多html标签和css属性是平常开发中很难用到的，如果系统的学真的不知道学到猴年马月，所以学会一些常用的就好了，这些基础就不用买书了。推荐跟着慕课网在线敲一下代码，它那里讲的都是一些常用的东西http://www.imooc.com/learn/9
　　第二阶段、Javascript Dom
　　在这个阶段，你可以学会怎么用js写一些网页特效啊、交互啊之类的。注：这是js里面最简单最低级的功能，并不是学会了写特效就学会了js。
　　推荐书籍：《Javascript DOM 编程艺术》

　　网站资源推荐：http://www.imooc.com/course/list?c=javascript
　　慕课网上有很多小效果的实现，可以跟着熟悉js的语法规则
　　第三阶段、Jquery
　　什么是jquery？Jquery是一个js的库。
　　以前有朋友问我，为什么有jquery还要学js，这里大家要搞清楚，jq只是一个库，它把一些常用的繁琐的js方法用自己的方式封装好，便于我们使用，它强大的地方在浏览器兼容，既然提高了兼容性，那么内部肯定有繁琐的条件判断，所以jq的性能会比较偏低。
　　jq的插件有很多，可以实现很多效果。
　　所以jquery也是我们学习的基础之一。
　　推荐书籍《锋利的jquery》

　　第四阶段、一个UI-库(bootstrap or other)
　　既然javascript有库（jquery），那么css呢？
　　没错，一般css的库叫做ui库，或者叫做css框架，比如bootstrap，以下简称bs，我们学习bs的目的是什么？
　　1．学习优雅的css命名规范
　　2．学习什么是可复用的web组件，为什么要复用这些组件
　　3．提高开发效率
　　Bootstrap中文文档：http://v3.bootcss.com/
　　学完这些，你也应该入门前端了。学完以上四个部分你应该会：
　　1) 高度还原psd设计稿；（简称切图）
　　附上切图教程：http://www.imooc.com/learn/506
　　2) 会熟练使用浏览器调试工具
　　Web调试工具：http://www.imooc.com/learn/137
　　3) 看的懂别人写的网页，会修修改改
　　如果这些你都会，4k+月薪没问题
　　进阶（以下知识点不分前后）
　　l 移动端页面制作
　　会写pc端页面还远远不够，我们还得会写移动端页面：
　　稍微复杂点的flex布局、响应式布局和移动端基础知识：
　　http://www.imooc.com/learn/494
　　很简单的rem布局：
　　http://caibaojian.com/flexible-js.html
　　l 混合APP开发
　　什么是混合app开发？
　　原生的android、ios应用我们称之为nativeApp。
　　运行在网页的app我们称之为webapp，比如淘宝触屏版。
　　混合App其实就是原生态App与Web App的结合，简单说混合App拥有原生App的外壳，内部的展现都是通过Web App的H5技术实现，在通俗点就是可以用html5技术写一个可以安装在手机上的应用，这个应用可以扩展一些js功能，比如访问手机硬件等等。
　　H5+与mui：http://www.dcloud.io/
　　l Javascript高级部分
　　我们之前说过js远不是写写特效那么简单，这里我们学习：
　　a.Ajax
　　什么是ajax？
　　Ajax就是前端与后台交互，实现数据获取、异步请求等等。
　　这方面知识百度很多
　　b.Canvas
　　什么是canvas？
　　HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像，可以实现很多炫酷的效果，有兴趣的同学可以学一学
　　c.H5新特性
　　离线储存、视频、音频。。。等等
　　d.Js面向对象与原型
　　这方面内容很重要，得好好学一学。了解js的原型机制。
　　推荐书籍《jsvascript面向对象编程》《你不知道的javascript》

　　e.Js设计模式
　　如果想深学，可以看一看，推荐书籍《javascript 设计模式与开发实践》
　　l Nodejs与npm
　　什么是nodejs？
　　首先，nodejs是一门后台语言，对，后台语言！在node上，我们可以用js语言进行后台的开发。相比较php，node的优点是非阻塞IO处理，采用事件驱动的异步编程，对前端开发人员很友好，做前端的很容易上手
　　什么是npm？
　　Npm是nodejs里的一个包管理器，首先得理解模块化，类似java的package。
　　这些刚开始可以不必深学，但是得知道是干啥的：
　　Nodejs中文网：http://nodejs.cn/
　　慕课网nodejs视频：http://www.imooc.com/learn/348
　　l ECMAScript2015
　　ECMAScript2015，也称es6，下一代javascript语言，虽说是下一代，但是我已经用了好一阵子了。^-^
　　ES6加了很多js新特性，比如解构赋值，promise对象，模块，块作用域等等等等。。。
　　一般现有浏览器对es6还不是全面支持，但是可以通过一些预编译，编译成es5语法格式，让浏览器支持它。
　　阮一峰--《ECMAScript6入门》:http://es6.ruanyifeng.com
　　l 前端自动化
　　又是nodejs这个家伙，nodejs不仅将前端带到了后端，也在前端掀起了自动化的浪潮。
　　为什么要自动化。电脑能完成的为什么要手动完成，可以实现：

• 　　图片无损压缩
• 　　Sass，less等css预编译的编译与压缩
• 　　Js文件压缩合并
• 　　自动检测文件变化，开发时网页自动刷新
• 　　对各个模块的管理
• 　　......
  

　　常见的自动化工具有grunt，glup，还有后起只秀webpack。
　　这里我强烈推荐学习webpack，学成之后你会真正感受到什么是酸爽。
　　l 前端MVC框架
　　重头戏来了，会一个mvc框架，是现在前端招聘高级技术人员的基本条件。
　　为什么我要把这个放在后面，因为学起来并不是很难，繁琐的是一开始的各种node配置或者文档的es6语法看不懂，所以的先了解node与es6.
　　现在主流的框架有angular ，react ，vue。
　　Angular和react的社区背景很庞大，一个是谷歌，一个是facebook。
　　而我更佩服的是vue，vuejs的作者是中国人，名叫尤雨溪，从他的个人项目，到github三万+star。附上尤大美照一张
　　
　　简直提高了程序员的平均颜值
　　相比于ng和react，vue更加轻量，更易于学习。当然每个框架都有自己的优点和缺点，具体怎么学习，自己选择吧。
　　l Github 和 git
　　如果你是学了几年计算机专业的学生，连github都不知道的话，那么我真的不知道你整天在看些啥。
　　Github是最大的开源代码托管平台，你可以在github上查看一些开源项目，你可以给一个项目贡献自己的代码（当然得符合开发规范），你也可以将自己的代码开源供他人使用。
　　Git是一个分布式的版本控制系统，相比于svn，git可以在离线的状态下在本地commit做一个版本，当有网的时候在一并push到仓库。
　　关于git和github的内容可以自行百度