引言

我们在开发时，如果将 JavaScript 加载到页面中，通常是以小片段的形式提供效果和交互，一般会把所有的 JavaScript 代码全都写在一个文件中，并加载到一个 script 标签中。尽管可以把 JavaScript 拆分为多个文件，但是所有的变量和函数仍然会被添加到全局作用域中。

由此我们需要使用第三方代码来完成常见任务，并且需要把代码分解为模块化的文件，避免污染全局命名空间。

ECMAScript 2015 规范在 JavaScript 语言中引入了 module，也有了 import 和 export 语句。

import和eport声明共同作用于让一个JavaScript模块中定义的值可以在另一个模块中使用。一个模块就是一个JavaScript代码文件，有自己的全局作用域，完全与其他模块无关，如果要在一个模块中使用另一个模块中定义的值（如函数或类），唯一的方式就是在定义值的模块中使用export导出值，在使用值的模块中使用import导入值。

import指令用于从另一个JavaScript代码文件中导入一个或多个值，并在当前模块中为这些值指定名字。import指令有几种不同的形式。看看下面的几个例子：

import Circle from './xxx.js';
import { fun_1 , fun_2 } from './yy.js';

JavaScript中的模块中的值是私有的值。除非被显示导出，否则其他模块都无法导入。export的指令就是为此而生的，他声明把当前模块中定义的一个或多个值或者是对象导出，因而其他模块可以导入并使用这些值。export指令想比import指令有更多的变体，看下面的例子:

const PI = Math.PI;
const TAU = 2 * PI;
export { PI , TAU };

export官架子有时候也用作其他声明的标识符，从而构成一种复合式声明，在定义常量，变量，函数或是类的同时又导出它们。如果一个模块只导出一个值，通常会使用特殊的export，default的形式:

export const TAU = 2 * Math.PI;
export function mag(x,y); {
    return 123456;
}
export default class Circle {
    ...
}