【ES6】Module 语法（import 和 export）

一、import export（导入导出）

• 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量
• 使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

1.1、基本用法

• 直接导出导入：

/* 导出文件代码：exportFile.js */

// 导出数组
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
// 导出 const 声明的变量
export const STANDARD_YEAR = 2015;
// 导出类
export class User {
  constructor(name) {
    this.name = name;
  }
}
// 导出函数
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

------------------------------------------------------------------------------
/* 导入文件代码：importFile.js */

import { months, STANDARD_YEAR, User, sayHi} from './exportFile.js';

• 统一导出导入：

/* 导出文件代码：exportFile.js */

// 定义数组
let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
// 定义 const 声明的变量
const STANDARD_YEAR = 2015;
// 定义类
class User {
  constructor(name) {
    this.name = name;
  }
}
// 定义函数
function sayHi(user) {
  alert(`Hello, ${user}!`);
}
// 统一导出
export { months, STANDARD_YEAR, User, sayHi};

------------------------------------------------------------------------------

/* 导入文件代码：importFile.js */

import { months, STANDARD_YEAR, User, sayHi} from './exportFile.js';

1.2、扩展用法（as 和 *）

• 重命名 as：原本的名称 as 现在的名称

/* 导出文件代码：exportFile.js */

export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

export const sayBye = (user) => {
  alert(`Bye, ${user}!`);
}

------------------------------------------------------------------------------

/* 导入文件代码：importFile.js */
// export 和 import 都可以使用 as 重命名写法，这里只举 import 例子
import { sayHi as hiFun, sayBye as byeFun} from './exportFile.js';
// 正常使用
hiFun("流星")
byeFun("流星")
// 错误案例：重命名后使用原来的名称会报错
sayHi("流星")
sayBye("流星")

• 全选 *：* as 取个名称代替全选*符号

/* 导出文件代码：exportFile.js */

export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

export const sayBye = (user) => {
  alert(`Bye, ${user}!`);
}

------------------------------------------------------------------------------

/* 导入文件代码：importFile.js */

// 只有 import 可以使用 * 全选写法！建议结合 as 使用
import * as fun from './exportFile.js';
fun.sayHi("流星")
fun.sayBye("流星")

1.3、注意事项

• 重复导入，那么只会执行一次

// 只会执行一次，而不会执行多次
import 'lodash';
import 'lodash';

import { foo } from 'my_module';
import { bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';

• 静态执行，不能使用表达式和变量

// 报错
import { 'f' + 'oo' } from 'my_module';

// 报错
let module = 'my_module';
import { foo } from module;

// 报错
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

二、export default（导入导出）

使用 import 命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。
用 export default 命令，可以为模块指定默认输出。

• 本质：export default就是export输出一个叫做default的变量或方法

function add(x, y) {
  return x * y;
}
export default add;
// 等同于
export {add as default};

// 对比：
export var a = 1;	// 正确
export default var a = 1;	// 错误


export default 42;	// 正确
export 42;	// 报错

2.1、基本使用

/* 导出文件代码：exportFile.js */

// 第一种 export 用法
export default function sayHi(user) {
  alert(`Hello, ${user}!`);
}

// 第二种 export 用法
function sayHi(user) {
  alert(`Hello, ${user}!`);
}
export default sayHi


------------------------------------------------------------------------------

/* 导入文件代码：importFile.js */

// 第一种 import 用法
import fun from './exportFile.js';
fun("流星")

// 第二种 import 用法
import { default as fun} from './exportFile.js';
fun("流星")

2.2、混合使用

/* 导出文件代码：exportFile.js */

export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

export default const sayBye = (user) => {
  alert(`Bye, ${user}!`);
}

------------------------------------------------------------------------------

/* 导入文件代码：importFile.js */

// 第一种 import 用法
import fun, {sayHi} from './exportFile.js';
fun("流星")
sayHi("流星")

// 第二种 import 用法
import { default as fun, sayHi} from './exportFile.js';
fun("流星")
sayHi("流星")