共计 2916 个字符，预计需要花费 8 分钟才能阅读完成。
最近看了些 Vue 框架写的程序，发现自己的前端知识还停留在几年以前，发现现在 Javascript 程序里有各种各样的对 module 的导入和到处，导入乍一看跟 python 的语法挺像的无非就是把 from 和 import 这两个关键词的使用颠倒了一下顺序。仔细看下来还是和 python 挺不一样的 import 模块的前提是模块有导出，并且还分默认导出和命名导出，有些麻烦。所以今天这篇文章就把所有的 export 形式和相应的 import 使用汇总一下。
ES6 在语言标准的层面上，实现了模块功能，成为浏览器和服务器通用的模块解决方案，完全可以取代 CommonJS 和 AMD 规范，基本特点如下：
每一个模块只加载一次，每一个 JS 只执行一次，如果下次再去加载同目录下同文件，直接从内存中读取；
每一个模块内声明的变量都是局部变量，不会污染全局作用域；
模块内部的变量或者函数可以通过 export 导出；
一个模块可以导入别的模块
2. 模块功能主要由两个命令构成：export 和 import。export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能；
3. 一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量；
var year = ‘2018’;
var month = ‘Febuary’;
export {year, month};
export 导出模块
export 语法声明用于导出函数、对象、指定文件（或模块）的原始值。有两种模块导出方式：命名式导出（名称导出）和默认导出（定义式导出），命名式导出每个模块可以有多个，而默认导出每个模块仅一个。
命名式导出
模块可以通过 export 前缀关键词声明导出对象，导出对象可以是多个。这些导出对象用名称进行区分，称之为命名式导出
export {func}; // 导出一个已定义的函数 func
export const foo = Math.sqrt(100); // 导出一个常量
我们可以使用 * 和 from 关键字来实现的模块的继承：
export * from ‘base_module’;
模块导出时，可以指定模块的导出成员。导出成员可以认为是类中的公有成员，而非导出成员可以认为是类中的私有成员：
var name = ‘Kevin 的居酒屋 ’;
var domain = ‘http://coffee.toast.com’;
export {name, domain}; // 相当于导出{name:name,domain:domain}
模块导出时，我们可以使用 as 关键字对导出成员进行重命名，上面的导出可以这样写：
export {name as siteName, domain}
注意一下语法错误:
export 1;
var a = 100;
export a;
export 在导出接口的时候，必须与模块内部的变量具有一一对应的关系。直接导出 1 没有任何意义，也不可能在 import 的时候有一个变量与之对应 export a 虽然看上去成立，但是 a 的值是一个数字，根本无法完成解构，因此必须写成 export {a}的形式。即使 a 被赋值为一个函数，也是不建议使用上面的形式导出的因为大部分风格都建议，模块中最好在末尾用一个 export 导出所有的接口，就像上面那些例子一样。
默认导出
默认导出也被称做定义式导出。命名式导出可以导出多个值，但在 import 引用时，也要使用相同的名称来引用相应的值。默认导出只有导出一个单一值，这个输出可以是一个函数、类或其它类型的值，这样在模块 import 导入时也会更 容易引用。
export default function() {}; // 导出一个函数
export default class(){}; // 导出一个类
默认导出可以理解为另一种形式的命名导出，默认导出可以认为是使用了 default 名称的命名导出。
下面两种导出方式是等价的：
const D = 123;
export default D;
export {D as default};
使用名称导出一个模块时：
// “my-module.js” 模块
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export {cube, foo};
在另一个模块（js 文件）中，我们可以像下面这样引用：
import {cube, foo} from ‘my-module’;
console.log(cube(3));
console.log(foo);
使用默认导出一个模块时：
// “my-module.js” 模块
export default function (x) {
return x * x * x;
}
在另一个模块中，我们可以像下面这样引用，相对名称导出来说使用更为简单：
import cube from ‘my-module’;
console.log(cube(3)); // 27
import 导入模块
import 语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件（或模块）的原始值。import 模块导入与 export 模块导出功能相对应，也存在两种模块导入方式：命名式导入（名称导入）和默认导入（定义式导入）。
注意事项：import 必须放在文件的最开始，且前面不允许有其他逻辑代码，这和其他所有编程语言的导入风格一致。
命名导入
我们可以通过指定名称将导入成员插入到当作用域中。可以导入单个成员或多个成员：
注意，花括号里面的变量与 export 后面的变量一一对应
import {myMember} from “my-module”;
import {foo, bar} from “my-module”;
通过 * 符号，我们可以导入模块中的全部属性和方法。当导入模块全部导出内容时，就是将导出模块（’my-module.js’）所有的导出绑定内容，插入到当前模块（’myModule’）的作用域中：
import * as myModule from “my-module”;
默认导入
在模块导出时，可能会存在默认导出。同样的，在导入时可以使用 import 指令导入这些默认值。直接导入默认值：
import defaultName from “my-module”;
import myDefault, {foo, bar} from “my-module”; // 指定成员导入和默认导入
default 关键字
// my-module.js
export default function() {}
// 等效于：
function func() {};
export {func as default};
在 import 的时候，可以这样用：
import a from ‘./my-module’;
// 等效于，或者说就是下面这种写法的简写
import {default as a} from ‘./my-module’;
这个语法糖的好处就是 import 的时候，可以省去{}。
简单的说，如果 import 的时候，你发现某个变量没有花括号括起来（没有 * 号），那么你在脑海中应该把它还原成有花括号的 {default as …} 语法，所以 import $,{each,map} from ‘jquery’;import 后面第一个 $ 是 {default as $} 的替代写法。
