import export

一 import

导入整个模块的内容

用于导入由另一个模块导出的绑定。

import * as myModule from '/modules/my-module.js';

在这里，访问导出意味着使用模块名称（在这种情况下为“myModule”）作为命名空间。例如，如果上面导入的模块包含一个doAllTheAmazingThings()，你可以这样调用：

myModule.doAllTheAmazingThings();

导入单个导出

给定一个名为myExport的对象或值，它已经从模块my-module导出（因为整个模块被导出）或显式地导出（使用export语句），将myExport插入当前作用域。

import {myExport} from '/modules/my-module.js';

导入多个导出

这将foo和bar插入当前作用域。

import {foo, bar} from '/modules/my-module.js';

导入带有别名的导出

导入时可以重命名导出。例如，将shortName插入当前作用域。

import {reallyReallyLongModuleExportName as shortName}
  from '/modules/my-module.js';

导入时重命名多个导出

使用别名导入模块的多个导出。

import {
  reallyReallyLongModuleMemberName as shortName, 
  anotherLongModuleName as short
} from "my-module";

导入默认值

可以使用默认export（无论是对象，函数，类等）。然后可以使用import语句来导入这样的默认值。

最简单版本，直接导入默认值：

import myDefault from "my-module";

也可以使用默认语法与上述（命名空间导入或命名导入）。在这种情况下，默认导入将必须首先声明。 例如：

import myDefault, * as myModule from "my-module";
// myModule used as a namespace

或者

import myDefault, {foo, bar} from "my-module";
// specific, named imports

示例

从辅助模块导入以协助处理AJAX JSON请求。

模块：file.js

function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
    callback(this.responseText) 
  };
  xhr.open('GET', url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

主程序：main.js

import { getUsefulContents } from '/modules/file.js';

getUsefulContents('http://www.example.com',
    data => { doSomethingUseful(data); });

二 export

在创建JavaScript模块时，从模块中导出函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const

export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

• 有两种不同的导出方式，每种方式对应于上述的一种语法：

  • 命名导出：

    // exports a function declared earlier
    export { myFunction }; 

    // exports a constant
    export const foo = Math.sqrt(2);

默认导出（函数）：

export default function() {}

默认导出（类）：

export default class {}

命名导出对导出多个值很有用。在导入期间，必须使用相应对象的相同名称.但是,只能有一个默认的导出
以下语法不会导出已导入模块中的默认导出：

export * from …;

如果需要导出默认值，请使用下列代码：

import mod from "mod";
export default mod;

注意，不能使用var，let或const作为默认导出。

三 import和export使用方式

第一种导出的方式：
　　在lib.js文件中， 使用 export{接口} 导出接口， 大括号中的接口名字为上面定义的变量， import和export是对应的；

//lib.js 文件
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
    console.log("fn0");
};
let fn1 = function() {
    console.log("fn1");
};
export{ bar , foo, fn0, fn1}

//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

第二种导出的方式：
　　在export接口的时候， 我们可以使用 XX as YY， 把导出的接口名字改了， 比如： closureFn as sayingFn， 把这些接口名字改成不看文档就知道干什么的：

//lib.js文件
let fn0 = function() {
    console.log("fn0");
};
let obj0 = {}
export { fn0 as foo, obj0 as bar};

//main.js文件
import {foo, bar} from "./lib";
foo();
console.log(bar);

第三种导出的方式：
　　这种方式是直接在export的地方定义导出的函数，或者变量：

//lib.js文件
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";

//main.js文件
import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);

第四种导出的方式：
　　这种导出的方式不需要知道变量的名字， 相当于是匿名的， 直接把开发的接口给export；
　　如果一个js模块文件就只有一个功能， 那么就可以使用export default导出；

//lib.js
export default "string";

//main.js
import defaultString from "./lib";
console.log(defaultString);

第五种导出方式：
　　export也能默认导出函数， 在import的时候， 名字随便写， 因为每一个模块的默认接口就一个：

//lib.js
let fn = () => "string";
export {fn as default};

//main.js
import defaultFn from "./lib";
console.log(defaultFn());

第六种导出方式：
　　使用通配符* ,重新导出其他模块的接口 (其实就是转载文章， 然后不注明出处啦);

//lib.js
export * from "./other";
//如果只想导出部分接口， 只要把接口名字列出来
//export {foo,fnFoo} from "./other";

//other.js
export let foo = "stringFoo", fnFoo = function() {console.log("fnFoo")};

//main.js
import {foo, fnFoo} from "./lib";
console.log(foo);

四 ES6导入的模块都是属于引用

每一个导入的js模块都是活的， 每一次访问该模块的变量或者函数都是最新的， 这个是原生ES6模块 与AMD和CMD的区别之一;

//lib.js
export let counter = 3;
export function incCounter() {
    counter++;
}
export function setCounter(value) {
    counter = value;
}


//main.js
import { counter, incCounter ,setCounter} from './lib';

// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4
setCounter(0);
console.log(counter); // 0

在main.js中， counter一直指向lib.js中的局部变量counter， 按照JS的尿性， 像数字或者字符串类型或者布尔值的原始值要被复制， 而不是赋址；