一、export

1、简介

export语句用于在创建JavaScript模块时，从模块中导出函数(类、生成器函数)、对象或原始值，以便在其他程序中可以通过import语句使用。

2、命名导出

  • 语法
export {name1, name2, ..., nameN};
export {variable1 as name1, variable2 as name2, ..., nameN}
export let name1 = ..., name2 = ..., ..., nameN; 
export function FunctionName(){...}
export class ClassName{...}

其中：nameN为导出的标识符，用来在其他脚本中用import导入。

  • 示例一
//导出一个函数
export {myFunction}

//导出一个常量
export const foo = Math.sqrt(2);
  • 示例二
//export module "my-module.js"
function cube(x){
	return x ** 3;
}
const foo = Math.PI + Math.SQRT2;
const bar = 'Hello World!';
export {cube, foo, bar as str};

<script type="module">
	//import
	import {cube, foo, str} from './my-module.js';
	console.log(cube(2));//8
	console.log(foo);//4.555806215962888
	console.log(str);//Hello World!
</script>
或
<script type="module" src="test.js"></script>

3、默认(default)导出

一个模块只能有一个默认导出。

  • 语法
export default expression;
export default function [name1](...){...}; 
export {name1 as default, ...};
  • 示例一
export default function(){}

export default class{}
  • 示例二
//export module "my-module.js"
export default function cubicMeters(x){
	return x ** 3;
}

<script type="module">
	//import
	import cube from './my-module.js';
	console.log(cube(2));//8
</script>
或
<script type="module" src="test.js"></script>

二、import

import语句用于导入由另一个模块导出(export)的模块。不论是否声明开启严格模式("use strict";)，导入的模块都运行在严格模式下。还可以使用import()函数来动态导入模块。

在浏览器中，import语句只能在type="module"的script标签中使用，但import()函数没有此限制。

1、普通导入import

  • 语法
import defaultExport form 'module-name';
import * as name from 'module-name';
import { export } from 'module-name';
import {export as alias} from 'module-name';
import {export1, export2} from 'module-name';
import {export1, export2 as alias2, [...]} from 'module-name';
import defaultExport, * as name from 'module-name';
import 'module-name';

其中：import * as name表示导入所有导出的内容。

my-module模块(my-module.js)：

function cube(x){
	return x ** 3;
}
const foo = Math.PI + Math.SQRT2;
const bar = 'Hello World!';
export {cube, foo, bar as str};
  • 示例一

导入整个模块：

import * as myModule from './my-module.js';
console.log(myModule.cube(3));//27
console.log(myModule.foo);//4.555806215962888
console.log(myModule.str);//Hello World!
  • 示例二

导入模块中的单个导出：

import {cube} from './my-module.js';
console.log(cube(4));//64
  • 示例三

导入模块中的多个导出：

import {foo, str} from './my-module.js';
console.log(foo);//4.555806215962888
console.log(str);//Hello World!
  • 示例四

导入时使用别名：

import {foo as num} from './my-module.js';
console.log(num);//4.555806215962888

import {foo as number, str as bar} from './my-module.js';
console.log(number);//4.555806215962888
console.log(bar);//Hello World!
  • 示例五

导入模块仅仅是为了运行模块中的全局代码，而不导入任何值：

//my-module.js
console.log('Hello!');
export 666;

import './my-module.js';

输出：Hello!

  • 示例六

导入模块的默认导出：

//my-module.js
export default function(x){
	return x ** 3;
}

import cube from './my-module.js';
console.log(cube(5));//125
  • 示例七

导入时混合导入模块的默认导出和普通导出(此时，必须先声明默认导出的导入)：

//my-module.js

const foo = Math.PI + Math.SQRT2;
const bar = 'Hello World!';
export {foo, bar as str};

export default function square(x){
	return Math.pow(x, 2);
};

import square, * as data from './my-module.js';
console.log(square(6));//36
console.log(data.foo);//4.555806215962888
console.log(data.str);//Hello World!

import square, {foo, str as bar} from './my-module.js';
console.log(square(8));//64
console.log(foo);//4.555806215962888
console.log(bar);//Hello World!

2、动态导入import()

  • 语法
var promise = import('module-name');
  • 示例一
//my-module.js

const foo = 'Hello World!';
function generate(){
	console.log('generating...');
	setTimeout(() => {
		console.log(`the number is ${Math.round(Math.random() * 100)}`);
	}, 2000);
};
function error(){
	throw new Error('Whoops!');
};
export {foo, generate, error};

import('./my-module.js').then((module) => {
	module.generate();
	return module;
}).then((module) => {
	console.log(module.foo);
	module.error();
}).catch((reason) => {
	console.log(reason);
});

输出：

  • 示例二
//my-module.js
export default function(){
	setTimeout(() => {
		console.log('done!');
	}, 2000);
};

import('./my-module.js').then((module) => {
	module.default();
});
附：