web前端学习路线与书籍推荐

什么是web前端？

在之前，通俗的讲是网页制做，在如今，哼哼，能够参考这篇文章

http://tieba.baidu.com/p/4817153404

 

那么若是高效优雅的学习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不只将前端带到了后端，也在前端掀起了自动化的浪潮。

为何要自动化。电脑能完成的为何要手动完成，能够实现：

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

 

常见的自动化工具备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的内容能够自行百度

附上个人github主页：https://github.com/zhuhuahuablogs  ^-^

 

介绍这么多也差很少了，前端一天一个样！如果源于兴趣，请深学。 我的网站：http://zhuhuahua.applinzi.com