如何系统地学习 JavaScript？

要说学习JavaScript，首先要说到JavaScript这门语言本身的特质，简直就是一门神奇的语言，他正在朝着万能钥匙的方向发展，只要会JavaScript，有一种走遍WEB开发无敌手的赶脚，且仿佛”非常简单”。

先来看看JavaScript这些年都干了什么？

1、生产出一大堆库：jQuery、MooTools、Prototype、Dojo、YUI、ExtJS、ZeptoJS……

2、生产出一大堆框架：AngularJS、VueJS、ReactJS、EmberJS、NuxtJS、ThreeJS……

3、生产出一大堆衍生语言：TypeScript、JSX、CoffeeScript……

4、ES6的诞生与发展：对于ES3/ES5来说，ES6就是一块大大的语法糖……

返过来，我们来看看为什么会出现如此广的发展？

1、库的产生原因

JS库其实就是一堆函数接口，用了这些库，很多JavaScript程序将不需要开发者写，直接用库函数接口来完成功能就搞定。

库的出现证明前端程序的要求越来越高，复杂度也随之增加，那么用JS实现功能就会越来越难，一堆库给你写好了方法，你直接用，大大减少了程序开发周期。

2、框架的产生原因

JS框架就是JS的开发模式，更好、更合理的项目架构，使得项目易维护、易扩展，大部分框架还提供一套完善的数据与视图绑定机制来优化了前端性能。

框架的出现证明了JavaScript本身的优点与缺点，优点是灵活，缺点也是灵活，可以灵活运用一门语言是多棒的一件事情，但是有时往往因为灵活导致开发者很难掌握合理的开发模式，怎么写都对，又不知道怎么写是对的。

3、衍生语言的产生的原因

JavaScript除了语法部分以外跟浏览器打交道最多的语言，这个特点就决定了他本身没有特定的开发模式，导致没有特定的开发规范，这一点导致了开发到了后期，很难进行维护和扩展，这时衍生语言就来解决这一难题了，他们干脆把JavaScript改造成一套完全面向对象的语言。逼迫开发者用面向对象的思想和既定规则进行开发。

4、ES6的诞生

很多人认为ES6的诞生是JavaScript救命稻草，这不是没有道理，首先，ES6引入了类的概念，但是这个类的概念也是阉割版；其次，ES6引入了模块化的概念，使得JavaScript可以真正意义上分模块开发且可相互依赖；再次，ES6对原本JavaScript的异步概念进行了加强，并针对性的增加了强有力的异步问题解决方案。

综上所述，我们可以非常容易的整理一套学习方案。

第一弹：ECMAScript（JavaScript的基础）

你可以理解他为JavaScript的本尊或者灵活，如果你认为它仅仅是个语法的盒子，那就错了，它的本质是JavaScript开发的理论基础和技术提升的踏板。对于初学者来说，这一关很难，但如果你翻过了这座大山，恭喜你，后面的内容你可以边抽烟边学习了，反之，还是放弃吧。

那我们来看看都要学些什么？

1、编程语言、ECMA、JavaScript、浏览器的发展史

2、基本语法：值、变量、运算、语句等等

3、各种类型的函数、参数与原理

4、预编译、暗示全局变量

5、作用域、作用域链、闭包

6、对象、构造函数、实例化

7、原型、原型链、对象继承

8、对象、对象克隆

9、数组方法、类数组

10、自定义原型方法、碎片知识

11、错误信息、错误捕获

12、严格模式

13、变量声明周期、垃圾回收

第二弹：DOM（文档对象模型，JS操作HTML用的（记住：JS是操作不了CSS的！！））

JavaScript跟浏览器关系真的不要太好（非常好的意思），但是如果把学习DOM理解为对DOM结构的增删改查，那就太肤浅了。我们来看看DOM包含哪些内容呢？

1、掌握document对象、了解其中的方法的继承关系（特别是相关原型的问题）

2、遍历节点树与遍历元素节点树（重考点）

3、节点的增删改查、元素属性的操作

4、滚动相关操作

5、样式属性相关操作

6、元素运动

（兼容性封装！兼容性封装！兼容性封装！）

7、事件处理函数与绑定机制

8、事件的冒泡捕获机制

9、事件对象与事件源对象

10、事件代理

11、模块化与插件化开发的基础

12、鼠标行为坐标系与相关兼容性、功能性函数封装

13、输入与状态改变事件

14、鼠标行为预测技术

15、键盘事件

16、DOM常见问题的解决方案与函数封装

17、至少完成10个典型案例

第三弹：BOM（浏览器对象模型，JS操作浏览器用的，没事儿弹个窗？没娘的孩子最惨）

BOM一直是JavaScript特殊的存在，没人搭理，却时不时用用的存在。毕竟没娘没规范，所以很多内容都不在用了，但不代表你可以一点都不知道。职业素养！职业素养！职业素养！

1、window、Navigator、history、screen、location对象的属性与方法

2、window、location对象深入学习

3、初步掌握单页面应用的简单开发

4、浏览器相关检查

第四弹：正则表达式（匹配字符串用的，这个字符串是不是个E-mail呢？手机号是不是138开头的呢？）

这个东西可以说相当于是一门小语言，难学、难记、难掌握，但是在关键时刻能给你解决大问题，往往需要大量代码些的程序，用正则，1行搞定。

怎么学？老老实实学，然后老老实实一次又一次的抠破头皮用。

1、转义相关、修饰与元字符

2、正则量词、属性、方法

3、正则相关的所有方法

4、正向预查、贪婪与非贪婪模式

5、replace方法、不捕获分组

6、整个50个正则案例逐个分析

第五弹：JSON（一种很友好的数据格式）

长这样舍尔滴 -> {“名字”:”JS “,”年龄”:”18″,”婚否”:”未婚”}

1、JSON数据认知与解析方法

2、JSON对象与字符串的转换方法

3、AJAX的基本认知

4、数据渲染、模板渲染

5、数据缓存机制、数据缓存池

第六弹：浏览器（职业素养！职业素养！前端优化!）

很多开发者并不了解浏览器，这对于前端开发是非常非常可怕的一件事，因为你写的东西能不能用，取决于你是否懂得根据浏览器相关的机制来优化你的程序

1、DOM/CSS/渲染树

2、文档的解析与加载

3、DOM相关回流与重绘

4、渲染引擎、声明HTML与渲染模式

5、JS引擎的执行机制

第七弹：JS运动（就是用JS让DOM元素各种动）

这个东西在实际开发中是基本用不到的，但你就不学了吗？不行！！不行！！不行！！

为啥？JS运动是你了解动画执行机制的唯一途径，其次，是你提升JS编程逻辑能力的一个重要学习过程。

比如原生JS开发一个轮播图，这是一个训练综合运用能力的过程。

当然相关的数学知识也要学一些哟~

1、JS运动的原理与机制

2、加速度、弹性运动

3、重力运动与拖拽效果

4、原生JS开发无缝轮播图

第八弹：ES5数组扩展方法

ES3给了我们很多数组相关的方法，但觉得不够，再给你加一些，方便你开发

ES3的数组方法回顾一下：

concat, join, pop, push, reverse, shift, slice, sort, splice, toString, unshift

ES5给我们扩展的方法：（都跟遍历数组有关）

forEach, map, every, some, filer, reduce, reduceRight

学习内容：

所有ES5的数组扩展方法的使用场景与重写（兼容性也得考虑考虑啦）

实战肯定少不了，因为你要知道各个方法的使用场景。

特别是forEach、map、filter、reduce

第九弹：函数式编程

你如果顺利走到这里，恭喜你，基础你已经学完了，但是函数式编程是你提升JS能力的又一座大山，这座山主要是理论太抽象，很多都没有特别明显的使用场景，它究竟是干什么的呢？它其实就是教你封装一个又一个的函数完成一些比较复杂的功能。可以说是提升抽象函数的能力的利器集合。

1、纯函数

2、函数组合、结合律、pointfree

3、高阶函数

4、函数柯里化与封装

5、偏函数与封装

6、惰性函数与使用场景

7、缓存函数

8、函数防抖、函数节流（必会）

9、归类函数（必会）

第十弹：碎片知识

我们学了这么多东西，还要补充吗？看了下面的这些，你就知道了，还差的远呢？难受，香菇！！！

1、同步与异步加载的三种方法

2、放大与宽放大模式

3、call/apply/bind以及bind重写（常考）

4、标签的属性与特性

5、Math方法

6、封装byClassName

7、断点测试、bug调试

8、图片的预加载与懒加载

9、日期对象与计时器

10、this指向问题

11、DOM与虚拟DOM（常考）

第十一弹：网络

我是前端程序员，我为啥要学网络？这样的问题经常被问，简单！因为现在前后端开发分离了，分离不代表相互不搭理，分离既合作，合作就要相互了解对方个大概，其次，开发本身还会涉及到前后端联调的问题，所以前端程序员一定要掌握基本的网络知识。

1、服务器的搭建

2、网络、URL、客户端与服务端、域名

3、DNS/IP/TCP/UDP/HTTP/HTTPS

4、三次握手、四次挥手

5、www、http报文、请求方式、GET与POST

6、http状态码、accept与ContentType

7、缓存、长短连接、Content-Length、referrer

8、http版本、同源策略

9、同步与异步请求、混编的概念

10、AJAX以及原生JS封装AJAX

11、AJAX版本、响应状态、超时设置、同步与异步设置

12、6种跨域获取数据的方法

13、iframe与网络相关

14、cookie相关

15、cookie token技术

16、相关典型实战至少做8个

第十二弹：ES6（新的JavaScript版本）

作用在于引入了类、模块的概念，对异步处理提出了新的方案，也对JS对象们扩展了很多方法，让开发变得更加顺畅。

1、新增语法

2、新增API

3、集合

4、异步

5、面向对象

6、这里需要一个大的实战去训练自己

这是JavaScript要学习的内容，当然后续还有很多很多技术要学习。比如…….jQuery、HTML5技术、CSS3技术、什么BootStrap、CSS扩展语言Less/Sass、Webpack工程化、Git、VueJS……

漫长曲折艰辛而又很有趣的前端技术学习，只要你有意志力，不要回头，相信成功是不远的未来。