ES6 export和import的用法

Export

模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过export输出

//moudle.js
export var name="John";
export var age=18;
export var gender=female;

或者用另一种方式：用大括号指定要输出的一组变量

//moudle.js
var name="John";
var age=18;
var gender=female;

export {name,age,gender};

export还能输出函数

//moudle.js
export function add(x,y){
    return x+y
};

还可以批量输出，同样是要包含在大括号里，也可以用as重命名：

//moudle.js
function fun1(){ ... };

function fun2(){ ... };

export {
    fun1 as m,
    fun2 as n
};

Import

export定义了模块的对外接口后，其他JS文件就可以通过import来加载这个模块

//main.js
import {name,age,gender} from './moudle';

function createPerson(){
    this.name=name;
    this.age=age;
    this.gender=gender;
}

import命令接受一对大括号，里面指定要从其他模块导入的变量名，必须与被导入模块（moudle.js）对外接口的名称相同。
如果想重新给导入的变量一个名字，可以用as关键字

//main.js
import {name as Name} from './moudle';

import后的from 可以指定需要导入模块的路径名，可以是绝对路径，也可以是相对路径， .js路径可以省略，如果只有模块名，不带有路径，需要有配置文件指定。
注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。（是在编译阶段执行的）

Moudle的整体加载

//moudle.js
function add(x,y){
    return x+y;
}

function mul(x,y){
    return x*y;
}

export {add,mul}

//main.js

import * as cal from './moudle';

console.log(cal.add(1,2));
console.log(cal.mul(1,2))

export default

//moudle.js
export default function (x,y){
    return x+y;
}

使用export default命令之后,import命令可以为该匿名函数指定任意名字。

//main.js
import add from './moudle';

console.log(add(1,2));

export default也可以用于非匿名函数前。

// 第一组
export default function add() { // 输出
  // ...
}

import add from 'moudle'; // 输入

// 第二组
export function add() { // 输出
  // ...
};

import {add} from 'moudle'; // 输入

可以看出，使用export default时，import语句不用使用大括号。