es6- export and import

一： export和import的正经常使用法
1：export变量

// ./module/example.js

export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

// index.js
import  {firstName, lastName, dob} from './module/example.js';

2：export方法

// ./module/example.js
//定义方法的时候，就能够export
export function sum(a, b) {
    return a + b;
}

function multiply(a, b) {
    return a * b;
}
//也能够先定义，再export
export { multiply };

在别的文件里面import上面2个方法，是同样的

//./index.js
import  {sum, multiply} from './module/example.js';

3：export重命名
有时候你也许不想用一个变量，方法，类的本来的名字，而是想换一个别的名字。那么你可使用 as
，并且在export和import的时候均可以，例如：

// ./module/example.js
function sum(a, b) {
    return a + b;
}
export {sum as add};

//./index.js
import  {add} from './module/example.js';

4: import重命名
在第三点里面，咱们看到了能够在export的时候重命名变量。一样的效果，也能够在import的时候作，依然是用as：

// ./module/example.js
function sum(a, b) {
    return a + b;
}
export {sum};

//./index.js
import  {sum as add} from './module/example.js';

//此时在index.js里面能够被使用的方法是add()，而不是sum()

5：export default
咱们能够给一个js module制定默认值，也就是这里的default。导出一个default和前面咱们讲到的导出一个变量同样也是有三种方式：

1. 在定义的时候export

//./module/example.js
    export  default  function(a, b) {
        return a + b;
    }
    
    //./index.js
    import  sum  from './module/example.js';

export的能够是一个匿名函数，在导入的时候，用任意合理的名字表明默认导出，可是注意与非default变量的区别在于，这里没有花括号({})
2. 先定义再export

//./module/example.js
    function sum(a, b) {
        return a + b;
    }
    export default sum;
    
    //./index.js
    import  sum  from './module/example.js';

在import的时候，依然能够是任意的合理的变量名，不必定得是sum。

3. 使用 as

//./module/example.js
    function sum(a, b) {
        return a + b;
    }
    export {sum as default}

    //./index.js
    import  sum  from './module/example.js';

在import的时候，依然能够是任意的合理的变量名，不必定得是sum。

6：export default和其余变量一块儿
一个module能够export default的同时export其余变量，语法与只export其中同样没有区别；只是在import的时候，default必定要在非default前：

//./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

function sum(a, b) {
    return a + b;
}
export {sum as default}

// ./index.js
//语法正确
import  sum, {firstName, lastName, dob}  from './module/example.js';

//error: 语法错误
import  {firstName, lastName, dob}, sum  from './module/example.js';

7: import *
当咱们想把一个module全部export的东西都一次性import的时候，就可使用 import * as

// ./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

function sum(a, b) {
    return a + b;
}
export {sum as default}

//./index.js
import  * as example  from './module/example.js';

console.log(example.firstName);
console.log(example.lastName);
console.log(example.dob);
example.default(1, 2);

这里特别注意的是，这里的example.default就是咱们export的default变量。

8：export import
咱们能够把从别的module导入的变量做为本module的导出。例以下面的例子./mian.js从./idnex.js导入变量firstName, 而firstName本来是./index.js从./module/example.js导入的：

//./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

function sum(a, b) {
    return a + b;
}
export {sum as default}

//./index.js
import {firstName}  from './module/example.js';
export {firstName};

//./main.js
import {firstName} from './index.js'

在./index.js文件里的2行代码等同于下面的一行：

export {firstName} from './module/example';

这个时候也可使用 as:

export {firstName as nickName} from './module/example';

也可使用 *

export * from './module/example';

export *的时候，是不包含default的。若是咱们想要包含default,得单独导入和导出default：

//./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

function sum(a, b) {
    return a + b;
}
export {sum as default}

//./index.js
export * from './module/example';
import sum from './module/example';
export {sum};

//./main.js
import {firstName, lastName, dob} from './index.js'
import {sum} from './index'

二：export和import的注意点可能的错误

1：在没有default的状况下，不能export匿名函数

前面咱们讲到能够在定义一个函数的时候就export，可是这个函数不能是匿名函数，除非这个函数做为default导出。

2：export和import都只能用在module的最高层scope

不能在if..else，方法里，或者任何须要在runtime的时候才能肯定下来的状况下，使用export和import。