JS模块-导出和导入

模块的基本概念和用法

在声明前导出

通过在声明之前放置export来标记任意声明为导出，无论声明的是变量，函数还是类都可以。

// 导出数组
export let Number = ['One', 'Two', 'THree','Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'];

// 导出 const 声明的变量
export const YEAR = 2015;

// 导出函数
export function Add(a,b) {
	console.log(a + b)
}

导出函数后没有分号

在函数前面的export 不会让它们变成 函数表达式，虽然被导出了，但还是一个函数声明，大部分JavaScript 样式指南都不建议在函数和类声明后使用分号

export function sayHi(user) {
  alert(`Hello, ${user}!`);
}  // 在这里没有分号

导出与声明分开

可以将 export 分开放置。

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // 导出变量列表

上述代码我们先声明函数，然后再一起导出它们

Import *

通常情况，我们要把导入的东西放在花括号中 import{...}

// 📁 main.js
import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

但是如果导入内容很多，可以使用 import * as <obj> 将所有内容导入为一个对象

// 📁 main.js
import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');

Import “as”

可以使用 as 让导入具有不同的名字

import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

上述代码，将sayHi 导入到局部变量 hi，将 sayBye 导入到 bye

Export “as”

导出也有类似的语法

// 📁 say.js
...
export {sayHi as hi, sayBye as bye};

上述代码将函数导出为 hi 和 bye

hi 和 bye现在是外面使用时的名称

import * as say from './say.js';

say.hi('John'); // Hello, John!
say.bye('John'); // Bye, John!

Export default

模块提供了特殊的默认导出 export default 语法，意思是“一个模块只做一件事”

将 export default 放在要导出的实体前

export default function User() {
	console.log("temp")
}

每个文件只能有一个 export default：导入时不需要花括号

// 📁 main.js
import User from './user.js'; // 不需要花括号 {User}，只需要写成 User 即可

new User('John');

要点：import 命名的导出时需要花括号，而 import 默认的导出时不需要花括号。

命名的导出	默认的导出
export function User() {…}	export default function User() {…}
import {User} from …	import User from …

通常不要混合使用它们。模块要么是命名的导出要么是默认的导出

由于每个文件最多只能有一个默认的导出，因此导出的实体可能没有名称。

export default function(user) { // 没有函数名
  alert(`Hello, ${user}!`);
}

// 导出单个值，而不使用变量
export default ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

不指定名称是可以的，因为每个文件只有一个export default，所以import知道导入的内容是什么

如果没有default，导出将会出错：

export function { // Error!（非默认的导出需要名称）
  ...
}

default 名称

在一些情况下，default 关键词被用于引用默认的导出

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

// 就像我们在函数之前添加了 "export default" 一样
export {sayHi as default};

上述代码将函数与定义分开导出

另一种情况，模块导出一个主要的默认的导出和一些命名的导出(不建议这么做)

// 📁 user.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

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

import {default as User, sayHi} from './user.js';

new User('John');

上述代码是导入默认的导出以及命名的导出的方法

如果我们将所有东西 * 作为一个对象导入，那么 default 属性正是默认的导出：

// 📁 main.js
import * as user from './user.js';

let User = user.default; // 默认的导出
new User('John');

注意！:在 {…} 中的 import/export 语句无效。

if (something) {
  import {sayHi} from "./say.js"; // Error: import must be at top level
}