十步零基础JavaScript学习路径

以前写过一篇26天学通前端开发，内容主要讲的就是前端学习路径，今天再来写一篇零基础的JavaScript学习路径，但愿能帮编程零基础的前端爱好者指明方向。

1、开发环境和JavaScript版本问题

开发环境越简单越好，必定不要在这个环节浪费时间。

首先说编辑器的选择，sublime text、vs code、atom、webstorm，还有HBuilder。新手入门的时候总想找一个最好的编辑器，其实这编辑器就和游戏里面选英雄同样，没有最厉害的，只有最适合你的，若是仍是拿不定注意，就选vs code吧，我感受这个对新手挺友好的。

浏览器就用chrome，而后就能够开始撸代码了。

关于JavaScript版本，我建议仍是从ES5开始学，有必定基础以后再来看ES2015+的新特性。

2、基本语法

学编程语言和学天然语言有不少类似的地方，咱们得从最基本的单词和语法开始学。

• 变量：如何声明变量，如何给变量赋值。
• 数据类型：什么是数据类型，数字与字符串有什么区别。
• 运算符与表达式：经常使用的运算符有哪些？“=”、“==”与“===”的区别等等。
• 分支语句：if、switch
• 循环语句：for、while
• 函数：什么是函数，什么是参数，什么是返回值。

这些基本语法必定要很是熟悉，要否则后续的学习会举步维艰。

3、对象

对象是一个很是重要的概念，必定要灵活掌握：

• 对象：属性的无序集合，当属性值为函数的时候，咱们叫这个函数为对象的方法。
• 数组：元素的有序集合。了解数组的经常使用方法
• 日期对象：获取年月日时分秒
• 数学对象：获取随机数
• 了解其余对象：正则表达式、包装对象，其实函数也是对象，不过这些简单了解一下就行。

每一个对象都有不少方法，这些方法知道在哪里查就好了，千万不要去背，就像咱们学英语，必要的单词要背，可是大部分单词知道用词典查就好了。

学习【基础语法】和【对象】的过程比较枯燥，知识点之间衔接不是特别紧密，就像咱们小学一年级学习汉字同样，每个字咱们都知道是什么，可是却不会把他们组合到一块儿，因此小学才会练习组词，造句，再到写做文。咱们把作的项目比做写做文，那咱们还有一段路要走，切莫心急。

4、DOM

• DOM的树状结构
• 节点：元素节点、文本节点、属性节点
• 节点关系：同级、父子级等等
• 获取节点：querySelector、querySelectorAll等等
• 节点操做：增删改查
• 事件绑定：事件流和事件委托应该了解一下

DOM提供的方法也不少，仍然不要过多的投入精力，新手自学老是会被这些大量的方法困扰，咱们要作的是对DOM有一个归纳性的了解，至于那些杂乱的接口，后续咱们彻底能够用jQuery或框架代替。

（若是对DOM感兴趣，能够在技能掌握得稍微全面一些以后，再回来深刻学习也是能够的，可是前期投入大量时间，确实会影响学习效率）

5、jQuery

jQuery是必需要会的，可是jQuery上手确实很简单，用两天时间了解一下jQuery的用法，而后就能够利用jQuery实现各类页面效果了，前期确定会磕磕绊绊，可是jQuery的资料有不少，一边学一边作就行。

6、JavaScript进阶

jQuery熟练了以后，就能够开始着手学习JavaScript进阶一点的内容了：

原始类型与引用类型的区别 各类类型转换和类型检测 闭包：函数套函数，怎么套本身都不蒙就好了。 原型：构造函数、原型属性、基于原型的继承是怎么实现的。 this：能够开个坑好好研究研究

7、了解node

node如今能够说是前端必学的了，可是不是学用node作后台，而是用node生态下的各类工具，顺便借node了解一下后台。

• 使用node开一个静态服务器
• 使用npm下载第三方模块
• webpack
• babel

最好能用express写一个简单的后台程序（一个server.js就够了），处理一些请求，这样咱们学习ajax的时候就能够本身写后台接口了，固然这须要有http协议的基础知识。

8、ES2015+新特性

• 变量和常量：为何要抛弃var？
• 结构赋值
• 箭头函数
• 模块化
• class
• 编译

像promise，async/await函数等等这些，看本身能力了，有兴趣看看，不看也不影响后面学习，可是，就算如今不学，这个后续也是要补的。

9、AJAX

简单的说，了解一下http协议，知道什么是请求，什么是响应，get和post有什么却别，而后在学ajax，看看语法基本就会了。

• 用XMLHttpRequest发个请求，接个数据。
• 用jQuery发个请求，接个数据。
• json解析

知道这些就差很少了，后续不论是工做仍是学习，确定还会遇到不少问题，到时候再具体问题具体分析。

10、框架

react、angular、vue三选一，零基础的初学者强烈推荐vue，若是是后台转前端推荐angular，若是技术型前端，推荐react。

这篇文章是给零基础新手的，那天然就选vue比较好了。

尾声

经过这十步，就能够对JavaScript体系有一个总体的了解，而后重点向那个方向发展，就看本身爱好或是工做须要了。技术的道路很漫长，这只是一个起点。

关注微信公众号：晓舟报告，视频教程，日更中...截止目前，刚刚录到函数，若是时间容许的话，上面的内容都会录的，感谢你们的支持。

最后附上以前写的JavaScript书籍测评。

若是对您有一点点帮助，请不要吝惜一个小小的【赞】！