ES6中模块的export语句

一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取，使用export关键字输出的模块内部变量外部才能够读取

export语句规定的是对外的接口，必须与模块内部的变量建立一一对应关系，即export导出的仅仅是变量而非这个变量指向的值

由于export导出的仅仅是一个变量，那么只要能被变量指向的数据都可以实现导出，无论是数字、字符串、数组、集合、对象、函数、类等等，都是可以导出的

export语句可以出现在模块顶层代码中的任何位置，如果处于块级作用域内会报错，因为处于块级代码块之中，就没法做静态优化了，违背了ES6模块的设计初衷

在定义时导出：在变量定义时就添加关键子export进行导出

export let name = "qingheluo";
export let age  = 35;
export let info = {
    like:'no job',
    firends:['张三','李四','王五','赵六']
}
export function sleep(){
    console.log('i am sleeping');
}
以上表示每个变量在定义时就指定了要导出

export "qingheluo"; //报错，不能直接导出数据

统一导出：使用一个export语句统一导出所有需要导出的变量

上例中的所有变量定义前的export去掉，在最后面添加语句

export {name , age , info , sleep};

即可一次性导出所有到导出的变量

这种写法导出必须为含导出变量的集合，否则报错

let name = 'myname';
export name; //报错，必须为集合
export { name }; //正确

实际使用中应优先考虑这种写法。这样可以在脚本尾部一眼看清楚输出了哪些变量，便于维护

使用别名

导出时使用as关键字可以对导出的变量名进行重命名："name as new_name"

可以为一个变量进行多次重命名，多个名称指向同一个变量

export {
    name as myname,
    name as mingzi,
    info as myinfo
};

动态绑定：

由于export导出的仅仅是一个变量，即一个数据的引用，其对应的值是动态绑定关系，通过该变量可以取到模块内部实时的值

export let name = 'myname';
setTimeout(() => name = 'newname', 1000);

上面代码导出变量foo，值为myname，1 秒之后变成newname

这一点与CommonJS规范完全不同，CommonJS模块输出的是值的副本，不存在动态更新

export default语句

使用import语句的时候，正常情况下需要知道所要export语句导出的变量名，否则无法加载

为了使用的方便，在不知道export语句导出的变量名时，用export default语句为模块指定默认输出

导出语句

在定义时设置：仅可使用在函数、类等没有使用var、let、const关键字的定义，在定义语句之前添加"export default"

export default function () {}
export default class {}

一般我们使用匿名函数或类，当函数或类不是匿名时会忽略名称，视为匿名
export default function func_name(){}
    //会忽略func_name函数名，视为匿名函数

在模块文件末尾设置：export default val;

导出的变量无需使用大括号，直接导出即可

引入语句

其他模块加载该模块时，import语句可以为export default导出的值绑定任意变量名，且引入时无需使用大括号

import my_val from 'path/demo.js';
    // my_val可以随意，无需知道原模块使用export defult语句导出的变量名
    // 无需使用大括号，一旦使用了大括号，就会寻找与名称对应的常规导出变量

一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许为它取任意名字

function func() {}
export {func as default};
    // 等同于
export default func;

import { default as foo } from 'path/demo.js';
    // 等同于
import foo from 'path/demo.js';

正是因为export default命令其本质就是输出一个叫做default的变量，所以它后面不能跟变量声明语句。

export default var a = 1;  // 错误

var a = 1;
export default a;  // 正确
    // 含义是将变量a的值赋给变量default

因为export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后

export default 42;  // 正确
export 42;  // 报错

同时导入模块默认值和指定变量

import default_val,{val1,val2,...} from 'path/demo.js';

导出其他模块中的变量

export { val1, val2, ... } from 'path/test.js';
export { val1 as v1, val2 as v2, ... } from 'path/test.js';
export { default } from 'path/test.js';
    // 将其他模块中的默认接口作为该模块的默认接口导出
export { val1 as default } from 'path/test.js';
    // 将其他模块中的指定变量的值作为该模块的默认接口导出
    // 等同于
    import { val1 } from 'path/test.js';
    export default val1;
export { default as val1 } from 'path/test.js';
    // 将其他模块中的默认接口作为该模块的指定变量导出

export * from 'path/test.js';
    // 导出其他模块中的所有变量，忽略默认接口
export * as val from 'path/test.js';
    // 将其他模块中的所有变量作为一个对象val导出
    // 等同于
    import * as val from 'path/test.js';
    export { val };

export和import语句结合在一起写成一行后，导出的其他模块的变量实际上并没有被导入当前模块
只是相当于对外转发了这两个接口，当前模块不能直接使用导出的变量