当声明和使用不在同一个文件中时,声明需要被导出,使用前需要导入
export:
1、写在声明前
// 导出数组
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; //有分号
// 导出 const 声明的变量
export const MODULES_BECAME_STANDARD_YEAR = 2015; //有分号
// 导出类
export class User {
constructor(name) {
this.name = name;
}
} // 在这里没有分号 ;
export function sayHi(user) {
alert(`Hello, ${user}!`);
} // 在这里没有分号 ;
2、以列表的形式导出
// 📁 say.js
function sayHi(user) {
alert(`Hello, ${user}!`);
}
function sayBye(user) {
alert(`Bye, ${user}!`);
}
export {sayHi, sayBye}; // 导出变量列表
匹配于export的导入:
1、按需导入:把要导入的东西列到花括号中
// 📁 main.js
import {sayHi, sayBye} from './say.js';
sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!
2、全部导入
// 📁 main.js
import * as say from './say.js';
say.sayHi('John');
say.sayBye('John');
export default:
用法和export一致
但是
1、一个文件只有一个export default ,一个文件中可以有多个export
2、因为一个文件只有一个export default,所以用export default导出可以不需要名称,export必须要名称
export default class { // 没有类名
constructor() { ... }
}
export class { // Error!(非默认的导出需要名称)
constructor() {}
}
3、因为一个文件只有一个export default,所以用export default对应的导入不需要花括号
// 📁 say.js
export default class User {
constructor(name) {
this.name = name;
}
}
// 📁 main.js
import User from './say.js';