【JS基础】ES6模块系统
export
export 导出方式有两种，命名导出和默认导出。
- 命名导出还是默认导出都是都导出模块中内容的一种方式，可以混合使用。
- 个人理解：默认导出其实是导出了
default别名变量。 - 一个模块只能有一个默认导出
- 不同的导出方式也对应了不同的导入方式
// 命名行内导出
export const baz = 'baz';
export const foo = 'foo', bar = 'bar';
export function foo() {}
export function* foo() {}
export class Foo {}
// 命名子句导出
export { foo };
export { foo, bar };
export { foo as myFoo, bar };
// 默认导出
export default 'foo';
export default 123;
export default /[a-z]*/;
export default { foo: 'foo' };
export { foo, bar as default };
export default foo
export default function() {}
export default function foo() {}
export default function*() {}
export default class {}
import
-
导入对模块而言是只读的，相当于const 变量
-
import导入的值是无法直接修改的，但可以修改导入对象的属性。
import foo, * as Foo './foo.js';
foo = 'foo'; // 错误
Foo.foo = 'foo'; // 错误
foo.bar = 'bar'; // 允许
- 对应不同的导出方式，需要使用不同的导入方式：
// export.js
const foo = 'foo', bar = 'bar', baz = 'baz';
export { foo, bar, baz }
export default foo
// import .js
import * as Foo from './foo.js'; // 导入命名导出内容
import { foo, bar, baz as myBaz } from './foo.js'; // 导入命名导出内
// 导入默认导出的内容
import { default as foo } from './foo.js';//导入默认导出，与下边等效
import foo from './foo.js';//导入默认导出，与上边边等效
- 如果模块同时使用了命名导出和默认导出，可以这样来在import中同时导入
import foo, { bar, baz } from './foo.js';
import { default as foo, bar, baz } from './foo.js';
import foo, * as Foo from './foo.js';
模块转移导出
// 导出foo.js所有命名导出
export * from './foo.js';
// 将foo.js中默认导出修改为命名导出
export {default as foo} from './foo.js'
在组件库或函数库中，我们经常能看到模块转移导出，将需要导出到外部的内容有一个统一的出口，这时要注意导出名称是否会重名等问题
