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。