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()方法能够实现按需导入，条件导入、动态的模块路径（即路径中含有相关的变量）