ES6中的import和export-峰间的云

一、import

语法：

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

import defaultMember from "module-name";

import * as name from "module-name";

import { member } from "module-name";

import { member as alias } from "module-name";

import { member1 , member2 } from "module-name";

import { member1 , member2 as alias2 , [...] } from "module-name";

import defaultMember, { member [ , [...] ] } from "module-name";

import defaultMember, * as name from "module-name";

import "module-name";

引入模块的整个内容。下例会将myModule添加到当前作用域内，myModule会包含my-module模块暴露的所有东西（但不会包含默认输出的member）：

import * as myModule from 'my-module';

1	import * as myModule from 'my-module';

引入模块的单一member。下例会将myMember添加到当前作用域内。

import {myMember} from 'my-module';

1	import {myMember} from 'my-module';

引入模块的多个member。下例会将foo和bar都添加到当前作用域内。

import {foo, bar} from 'my-module';

1	import {foo, bar} from 'my-module';

将模块的一个member以别名进行引入。下例会将别名shortName添加到当前作用域内。

import {reallyReallyLongModuleMemberName as shortName} from 'my-module';

1	import {reallyReallyLongModuleMemberName as shortName} from 'my-module';

将整个模块引入，但是并不需要所引模块中暴露的方法、属性等，需要的只是side effects。可以通过下面这种方法进行引入。说明：比如，你引入一个模块不是为了要用它暴露出来的方法、属性等，只是为了实现某种初始化，这就算side effects。

import 'my-module';

1	import 'my-module';

引入模块默认输出的member。

import myDefault from 'my-module';

1	import myDefault from 'my-module';

默认member也可以和其他member一同引入。在这种情况下需要先声明默认member再声明其他member。比如这样：

import myDefault, * as myModule from 'my-module';

1	import myDefault, * as myModule from 'my-module';

或者这样：

import myDefault, {foo, bar} from 'my-module';

1	import myDefault, {foo, bar} from 'my-module';

二、export

export声明用于暴露给定文件（或模块）中的函数、对象、或JS基本数据类型。

语法：

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const

export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

export { name1, name2, …, nameN };

export { variable1 as name1, variable2 as name2, …, nameN };

export let name1, name2, …, nameN; // also var

export let name1 = …, name2 = …, …, nameN; // also var, const

export default expression;

export default function (…) { … } // also class, function*

export default function name1(…) { … } // also class, function*

export { name1 as default, … };

export * from …;

export { name1, name2, …, nameN } from …;

export { import1 as name1, import2 as name2, …, nameN } from …;

export分两种形式：Named exports和Default exports（每个脚本里只能有一个默认输出）。

下面是named exports的例子：

// 暴露一个事先声明的函数
export { myFunction };
// 暴露一个常量
export const foo = Math.sqrt(2);

// 暴露一个事先声明的函数

export { myFunction };

// 暴露一个常量

export const foo = Math.sqrt(2);

下面是default export（每个脚本里只能有一个默认输出）的例子（请注意，此处结尾处不用分号）：

export default function() {}

// 或者
export default class {}

export default function() {}

// 或者

export default class {}

请注意，下面这种写法不会暴露默认输出的member：

export * from …;

1	export * from …;

如果，你需要输出默认member，用下面这种写法替换上面的：

import mod from "mod";
export default mod;

1 2	import mod from "mod"; export default mod;

参考资料：

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import
https://stackoverflow.com/questions/41127479/es6-import-for-side-effects-meaning
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

ES6中的import和export

一、import

二、export

参考资料：

相关推荐

评论抢沙发

关于

分类目录

文章归档

最新评论

友情链接

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

QQ咨询

关注微信

回顶部

一、import

二、export

参考资料：

相关推荐

评论 抢沙发

关于

分类目录

文章归档

最新评论

友情链接

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

QQ咨询

关注微信

回顶部

评论抢沙发