看 Vue.js 源码的重要性不必多说了，无论是出于对技术的好奇，还是想要更好的使用 Vue.js，还是要应付面试，都需要我们沉浸下来好好琢磨一下它的源码。Vue.js 的代码经过了全世界这么多的程序员的审视，代码的设计性、规范性、严谨性等等，一定有很多值得我们学习借鉴的地方，自己在看的时候还是要多用心思考。
我目前找到两份总结的比较系统全面文档，一份是Vue.js技术解密，划分了每一章，可以一目了然我们当下分析的目标是什么。还有一份是Vue技术内幕，真的是带着读着从头开始几乎逐行代码解读。感谢大神们对社区的贡献！但是我们仍有必要整理一份自己分析的笔记，在梳理的过程中，这些知识会逐渐内化成自己掌握的。我们不是在看小说，完全靠读别人的文章会大大减少去思考的机会，最终时间花了，却收效甚微。对我来说，写Demo，然后调试验证，会理解的深一些。后面的系列文章中我也会尽量给出例子，希望你能跟着看下去，并拿例子到浏览器中打断点调试一遍。
这篇文章会先说一下开始看代码前的准备工作，介绍一下 Vue.js 项目的整体结构，然后再讲一下后面会怎样着手看代码。
这篇文章讲一下ES6新增的特性：class。上一篇文章已经详细的讲了JavaScript中的原型机制，实现继承的两种主要方式，有了这些基础，这篇文章不用啰嗦很长了。我们先通过调试一个例子，看class背后是如何运作的，然后用构造函数模拟实现一下class。最后再盘点一下class与构造函数的区别，避免日后在开发中踩坑。
JavaScript是基于原型的语言，对象和它的原型对象之间只是建立了关联，这与基于类的语言完全不同。在基于类的语言中，会把一个对象（“类”）的属性和方法复制到另一个对象（“实例”）中，因为在编译期间要确定这个实例所占内存大小。但是JavaScript又提出了构造函数、new运算符，想往基于类的语言特征上靠，这反而让刚从别的语言过来的开发者感到迷糊。例如，本来想按照类的特征去设计代码，发现没办法设置私有属性。更加让人迷惑的是，铺天盖地的资料跟你讲的是原型范围内的东西，用的术语确是类中的，加大了理解难度。ES6中增加了class，规范了对类的使用。class中的各种特性依然是基于原型的，并没有真的把基于类的语言中的那一套搬过来。
Douglas Crockford 在《JavaScript语言精粹》这本书中讲的特别好，一语中的：
JavaScript是一门弱类型语言，从不需要类型转换。对象继承关系变得无关紧要。对于一个对象来说重要的是它能做什么，而不是它从哪里来。
把重点转移到一个对象能做什么，如何复用其他对象的功能上，一切问题思考起来都变得简单很多。JavaScript中对象和函数的灵活性，使得有很多方式可以达到代码重用的目的。
本文将主要介绍一下CommonJS、AMD、CMD，以及ES6 Module，每个部分的讲解足够开始上手使用相应的模块化工具，所以本文会略长，可以直接定位到需要的小节看~
本部分内容摘自：https://zhaoda.net/webpack-handbook/module-system.html
模块系统主要解决模块的定义、依赖和导出，先来看看已经存在的模块系统。
script标签1 | <script src="module1.js"></script> |
这是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中，不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口，典型的例子如 YUI 库。
这种原始的加载方式暴露了一些显而易见的弊端：
<script> 的书写顺序进行加载本文将主要总结一下JavaScript中获取数据类型的方式，以及数据类型之间的转换规则。
原始值类型：String、Number、BigInt、Boolean、Null、Undefined、Symbol
引用类型：Object
| 类型 | 结果 |
|---|---|
| String | ‘string’ |
| Number | ‘number’ |
| BigInt | ‘bigint’ |
| Boolean | ‘boolean’ |
| Null | ‘object’ |
| Undefined | ‘undefined’ |
| Symbol | ‘symbol’ |
| Object | ‘object’ |
| Function对象 | ‘function’ |
还记得上大学那会做课程设计，我当时做了一个花卉网站，用java开发的，页面全是用JSP写的，还有那段时间特别流行的用PHP写Web页面。这些页面都是需要跟服务器端的代码部署再同一容器下的，页面中的动态内容都是在服务器端生成的，到了客户端只是展示而已。用这种方式开发网站并没有明确的前后端分工。
2005年AJAX概念的提出改变了这一切，它让客户端可以自行请求API接口，与服务器端交互，并且在不刷新页面的情况下更改网页中的局部内容，AJAX得以实现的核心就是XMLHttpRequest，现在各大浏览器厂商都支持了这一技术。
在MDN上，对Ajax的描述如下：
AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。
你可以使用AJAX最主要的两个特性做下列事：
- 在不重新加载页面的情况下发送请求给服务器。
- 接受并使用从服务器发来的数据。
2015年ES6的规范中又提出了Fetch API，结合Promise，可以更加方便地进行HTTP请求了。
本文主要学习总结一下XMLHttpRequest和Fetch的使用，开始吧~
说一说同步和异步吧，我们的代码通常是顺序执行的，当前的代码块执行完，才会直接执行下一个代码块。如果一个函数正在执行，后面的代码只能等待它执行完才开始执行，这就是同步的。所以如果这个函数要花很长时间才能执行完，就发生阻塞，程序像陷入一种卡死的状态。如果这个函数把耗时时间长的任务丢出去，立马就返回，后面的代码可以接着运行，那这个函数就是异步的。
那这个被丢出去的任务总有执行完的时候，等它执行结束后可能要做一些操作，比如展示数据到界面上。这时JavaScript要怎样来执行异步任务结束后要做的事呢？随着JavaScript的不断发展，目前有这些方式：
JavaScript是允许在书写代码时先使用变量，之后再声明该变量，对于函数也是，你可以先使用函数，之后再声明该函数。
JS引擎会在解释JavaScript代码之前进行编译，编译的时候就会去声明变量，并确定变量所属的作用域。也就是在执行JavaScript代码之前会将所有变量声明放在作用域的最顶部，但是赋值或其他运行逻辑保持不变（如果变了那还得了…）。MDN中介绍说，变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中，在物理层面不会进行移动。
JavaScript中的函数，除了在声明时定义的形式参数，还会有两个附件参数：this和arguments。用过面向对象编程的语言对this应该不会陌生，但是JavaScript里this到底指向什么，取决于函数调用的模式。在JavaScript中一共有4中调用模式：方法调用模式、函数调用模式、构造器调用模式、apply（或call）调用模式。在这些模式中this指向各不相同。此外，ES6新增的特性：箭头函数表达式，与普通函数对this的指向处理也不同。
闭包（Closure）有着非常强大的作用，尤其是在像Swift、JavaScript这种可以直接把函数当成值来使用的编程语言中，闭包几乎无处不在。在《JavaScript语言精粹》一书中，作者将闭包列为了JavaScript的优美特性之一，可见理解闭包很重要。在MDN上对闭包的描述如下：
函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包。