ES6中的export以及import的使用多樣性

模塊功能主要由兩個命令構成：export和import。export命令用於規定模塊的對外接口，import命令用於輸入其餘模塊提供的功能。

1、export導出模塊使用部分的幾種方式

一個模塊就是一個獨立的文件。該文件內部的全部變量，外部沒法獲取。若是你但願外部可以讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量。下面是一個 JS 文件，裏面使用export命令輸出變量。

 （1）利用default作接口導出

var a=1;
export default a;
export default function scc(){}
//錯誤的使用方式
export default var a=1

本質上，export default就是輸出一個叫作default的變量或方法，而後系統容許你爲它取任意名字,正是由於export default命令其實只是輸出一個叫作default的變量，因此它後面不能跟變量聲明語句，並且一個模塊中只能有一個default。同時一樣地，由於export default本質是將該命令後面的值，賦給default變量之後再默認，因此直接將一個值寫在export default以後是能夠的：

export default 1

 （2）直接導出變量以及方法

export var a=1;
export function fun(){}

可是不能直接使用以下形式：

export 1；

var a=1;
export a //以上兩種方式中均直接導出是常量而不是接口

（3）將上訴的方式用對象的形式導出

var a=1;
var b=5;
function c(){}
export {a,b,c}
或者
export {a}

該方式的導出更直觀，一般採用該方式進行。

2、import導入方式

（1）對應第一種導出方式，能夠爲default任意命名

import name from modulePath;
import{default as name} from modulePath
//兩種方式實現的效果是同樣的

（2）對應與第二種和第三種方式的導入方式是同樣的：

import {a, b,c} from modulePath  //按名稱一次導入模塊直接使用

import * as ddd from modulePath  //導出模塊的全部部分並重命名爲ddd，經過ddd.a的形式進行調用,
//該形式和
var aaa={a:a,b:b,c:c}
export default aaa
import ddd from modulePath
的形式是相似的,至關於導出時對對象進行命名爲default，導入的時候重命名

import {a} from modulePath  //只導入導出模塊的部分 
//以上三種方式均沒有修改導出部分的名稱

import{a as aaa} from modulePath  //給a進行重命名，經過aaa進行調用

須要注意的是不要將導入導出的對應弄混了，某則將其不了做用的。

（3）import和export的複合寫法

export { foo, bar } from 'my_module';

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

3、ES6的導入導出方式和node的require（commonJS）的區別

 （1）ES6的import主要用於客戶端導入模塊，同時導入是出於編譯階段的，於是不能實現按需導入以及在語句塊中導入模塊，而應該在頂級做用域中。同時不能再import中使用變量

// 報錯不能進行條件導入
if (x === 2) {
  import MyModual from './myModual';
}

// 報錯不能使用變量，編譯階段沒法識別變量
import aa from '/index'+path  

（2）import命令會被 JavaScript 引擎靜態分析，先於模塊內的其餘模塊執行，能夠在import的前面調用方法

aa();//不會報錯
import aa from modulePath

 （3）import是異步加載模塊的，require是發生在執行階段，同步加載的。

注意：在 export default 和其餘形式的export是能夠同時使用的，導入的時候區別對待就好

export default a=1;
export function b(){};

import a,{b} from modulePath;//其中a對應的是default

 

4、相似require模塊引入的方法

import()方法能夠實現按需導入，條件導入、動態的模塊路徑（即路徑中含有相關的變量）