JavaScript 模块

JavaScript 模块在平时开发中都会接触到，但缺乏对模块整体理解，本文档试着从前端模块的发展历程作为切入点，以 ‘CommonJS’ 和 ‘ES6’ 模块作为深入学习的方向，深入理解和掌握 JavaScript 模块

JS 模块发展史

CommonJs 是一个由开源开发者组成的团队，主要围绕 JavaScript 实现一些 API 及开展研发实践。

该团队提出了一个 avaScript 模块规范。每个文件都可当作一个模块，并且每个文件可以访问两个对象：require 和 export。require 用来接收字符串（模块名），并返回该模块输出的对象。

export 对象用来导出该模块的方法和变量。require 方法返回的就是 export 对象。模块同步加载。服务器端 JavaScript 引擎 Node.js 就是用的这个模块系统。

AMD 是一个采用异步方式加载依赖模块的模块系统。

如果模块在不同文件中，它们将采用 XHR 进行加载。某一模块将等其所依赖的模块一一加载后才会被执行。

AMD 模块必须是一个函数，并作为参数传入define 函数中。函数的返回值将传输给所有依赖的模块，所获得返回值又将作为参数传给模块方法。Require.js 库中实现了 AMD

XHR 英文全名 XmlHttpRequest，中文可以解释为可扩展超文本传输请求。Xml 可扩展标记语言，Http 超文本传输协议，Request 请求。XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。

百度百科：XMLHTTPRequest

TypeScript，作为 JavaScript 的超集，也提供了一个模块系统。

当它被编译时，便开始使用 JavaScript 模块模式。TypeScript 模块使用 module 关键字定义，任何被输出的对象必须使用export 关键字定义。

import 关键字用来将其它模块加载入模块中，并捕捉该模块导出的对象。TypeScript 模块是同步加载的。

ES6 模块系统启发于上述现有模块系统，它具有以下特性：

“阻塞”与”非阻塞”与”同步”与“异步”不能简单的从字面理解，提供一个从分布式系统角度的回答。

同步和异步关注的是消息通信机制 (synchronous communication/ asynchronous communication)

所谓同步，就是在发出一个 _调用_ 时，在没有得到结果之前，该 _调用_ 就不返回。但是一旦调用返回，就得到返回值了。换句话说，就是由 调用者 主动等待这个 _调用_ 的结果。

而异步则是相反，_调用_ 在发出之后，这个调用就直接返回了，所以没有返回结果。

换句话说，当一个异步过程调用发出后，调用者不会立刻得到结果。而是在调用发出后，被调用者通过状态、通知来通知调用者，或通过回调函数处理这个调用。

典型的异步编程模型比如 Node.js

举个通俗的例子：你打电话问书店老板有没有《分布式系统》这本书，如果是同步通信机制，书店老板会说，你稍等，”我查一下”，然后开始查啊查，等查好了（可能是 5 秒，也可能是一天）告诉你结果（返回结果）。

而异步通信机制，书店老板直接告诉你我查一下啊，查好了打电话给你，然后直接挂电话了（不返回结果）。然后查好了，他会主动打电话给你。在这里老板通过“回电”这种方式来回调。

阻塞和非阻塞关注的是程序在等待调用结果（消息，返回值）时的状态。

阻塞调用是指调用结果返回之前，当前线程会被挂起。调用线程只有在得到结果之后才会返回。

非阻塞调用指在不能立刻得到结果之前，该调用不会阻塞当前线程。

还是上面的例子，你打电话问书店老板有没有《分布式系统》这本书，你如果是阻塞式调用，你会一直把自己“挂起”，直到得到这本书有没有的结果，如果是非阻塞式调用，你不管老板有没有告诉你，你自己先一边去玩了，当然你也要偶尔过几分钟 check 一下老板有没有返回结果。

在这里阻塞与非阻塞与是否同步异步无关。跟老板通过什么方式回答你结果无关。