一 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的尿性， 像数字或者字符串类型或者布尔值的原始值要被复制， 而不是赋址；
