HTML5学堂（码匠）：带你走进JavaScript的世界。JS可分为三大类，这三类知识及学习目的简要概括如下：1 基本DOM与BOM操作 - 目的：实现页面的变化；2 底层知识 - 目的：优化代码性能；3 各类框架 - 目的：提升开发效率。

JavaScript的基本组成

学习JavaScript的第一步，在于了解JavaScript的基本组成，了解JavaScript技术当中有哪些类型的知识。

JavaScript = ECMAScript + DOM + BOM

码匠 - JavaScript的基本组成

其中ECMAScript表示的是基本语法，包括我们实现JS的基本语法，如变量的声明、基本的语句（if、for、switch等）、函数、参数、作用域、this、原型继承、数组字符串正则等各类方法等。

DOM，表示文档对象模型，其实就是JavaScript语言中，能够操作标签以及标签属性/样式的方法。

BOM，表示浏览器对象模型，比如页面跳转、刷新，返回上一个浏览记录等。

学习JavaScript时的三部分

基于上面JavaScript的基本组成，我们能够将JavaScript中的技术分为两大类。除此之外，当JavaScript与工作挂钩时，又会衍生出我们需要掌握的第三大类 —— 快速开发。三大类知识以及学习目的简要概括如下：

1 基本DOM与BOM操作 - 目的：实现页面的变化

2 底层知识 -目的：优化代码性能

3 各类框架 - 目的：提升开发效率

如何学好JavaScript

接下来码匠就带大家站在基于JavaScript的三类技术，看看如何才能把JavaScript学好。

码匠 - 如何更好的学习

基本DOM与BOM操作

难度系数：最低

知识类型：记忆型知识

技术举例：获取标签、为标签绑定事件，获取或修改元素的样式，获取或修改元素的内容等。

具体描述：我们可以将每个元素或标签看做一个对象，CSS其实就是在为这些对象增加样式，而JS就是在操作对象的样式或者属性，通过让对象的样式或属性发生变化，而实现我们视觉上的各类动态效果。

在书写一些效果时，这部分知识在其中充当的是功能的核心代码，但是如果仅仅依靠此类知识，代码书写出来的冗余度会很高，扩展性也很差。

优化代码性能用的底层知识

难度系数：基础语法难度较低，优化代码难度较高

知识类型：应用型知识

技术举例：函数封装、参数、递归调用、面向对象、设计模式、原型、继承（PS：在此，我们将“基础语法”放置于这一类当中）

具体描述：如果说实现一个功能很简单的话，那么想把一个功能的质量提升上来，就没有那么容易了。我们可以将这部分技术简要概括为：“让我们的代码变得更简单，复用性更强。但不涉及任何元素的操作。”

提升开发效率用的各类工具框架

难度系数：中等

知识类型：实战型知识

技术举例：jQuery zepto bootstrap Grunt Angular等各类框架

具体描述：学习此类知识之后，主要是为了让我们的开发速度更快，提升工作效率，此类知识与前端开发工程师的工作性质相关。需要额外注意的一点是，如果完全没有基础去学习此类知识，难度系数比较大，如果对于前两类知识有比较深入的理解，此种知识在学习时的难度系数就要降低很多~（这也是开发工作当中几乎不会遇到原生JS，但是依然要将其学好的原因。学好了原生的JS，对于框架类的知识的掌握速度会有质的提升）

简要概括：

JS实现功能很简单，但是想做好很难，而“做好”是JS的精髓。掌握了基本的DOM操作之后，就需要不断考虑代码优化。又由于前端开发工作性质的需要，要求能够快速开发，就需要学习一些相关框架。利利在此推荐的学习顺序是：

——> 基础语法

——> DOM操作

——> 优化代码

——> 开发效率

不知道经过这一番解释，你是否对JS所包含的技术有了一定的了解了呢？

码匠 - 了解JS的精髓了？

学习顺序的重要性

最后，说说学习顺序的重要性吧，HTML5学堂（码匠）的成员们一致认为这个学习顺序至关重要。码匠（利利）表示：自己大概是在2009年开始学习JS，当时用的是一本叫做《JavaScript征途》的书籍，自学了1年的时间之后，虽然对各类方法有一定的了解，但是在一些效果实现上实在是很没思路，并不知道从何下手。甚至~~~自学一年之后，自己都不知道JS文件如何引入到HTML文件当中，只是在html文件当中书写JS代码，唉，郁闷的也是不要不要的~（有点儿感觉像是在吐槽当前书籍像字典的感觉啊~~~）学习顺序和方法能够让我们事半功倍，所以，今天分享的内容，虽然不是技术，但是还是至关重要的！

HTML5学堂（码匠