ES6--Module

export

export命令可以输出变量、类、函数

export输出变量就是本来的名字，但可以通过as关键字重命名

export命令规定对外接口，必须与模块内部变量一一建立连接对应关系

//报错
export 1;

//报错
var m = 1;
export m;
//报错
function f() {}
export f;
//正确
export var m = 1;
export function fn() {}

var m = 1;
export {m};
export {m as n};
function fn() {}
export {fn}

export语句输出的接口与其对应的值是动态绑定关系，即通过该接口可以去到模块内部实时的值

export命令只要处于模块顶层就可以，若处于块级作用域则会报错，import类似

import

import { localname, oldname as newname } from 'path';

import命令具有提升效果，会提升到整个模块头部并首先执行，在编译阶段执行，静态执行，不能使用表达式和变量

多次重复执行同一句import语句，只会执行一次

import { foo } from 'my_module';
import { bar } from 'my_module';

//等同于
import { foo, bar } from 'my_module';

import * as myFun from 'my_module';
myFun.foo();
myFun.bar();

export default

扫描二维码关注公众号，回复： 2539775 查看本文章

import引入时不需要大括号

import加载时，export default暴露的函数都被视为匿名函数

export default命令用于指定模块的默认输出，一个模块只能有一个默认输出，本质是输出一个叫做default的变量，将后面的值付给default，因此后面不能跟变量声明语句

//正确
var a = 1;
export default a;

//错误
export default var a = 1;

//正确
export default 42;

export与import复合写法

export { foo, bar } from 'my_module';

//等同于
import { foo, bar } from 'my_module';
export { foo, bar };

//下面3种import没有复合写法
import * as some from 'my_module';
import some from 'my_module';
import some, { named } from 'my_module';;

import()

import无法做到像require一样动态加载，有一个提案建议引入import()函数完成动态加载，import()类似于Node的require方法，区别在于前者是异步加载，后者是同步加载

适用场景：

按需加载

条件加载

动态的模块路径

猜你喜欢