export与import
1、export default
import 加载模块时，需要知道所要加载的变量名或者函数名，否则无法加载。
export default 为模块指定默认输出。不用去了解模块中的属性或者方法。
一个模块只能有一个默认输出（export default）。
export default function () {
console.log('foo');
} // export-default.js
该模块输出的是一个函数。
import customName from'./export-default';
customName(); // import-default.js
import 加载模块时，import可以为该匿名函数指定任意名字（不使用大括号）。
（1） 非匿名函数同上
export default function foo(){console.log('foo');}
或者写成
function foo () { console.log('foo'); }
export default foo;
（2）语法格式
export default就是输出一个叫做default的变量或方法，系统允许你为它取任意名字。
export default
export { add as default }; <=> export default add;
import default
import { default as foo } from 'modules'; <=> import foo from 'modules';
（3）export default 不能直接跟声明变量
export var a=1; // 正确
var a=1;
export default a; // 正确
export default var a = 1; // 错误
（4）export 与 export default 赋值
export default命令的本质是将值赋值给 default。
export default 42; // 正确
export 42; // 报错
（5）export default 下的 import 同时输入默认方法和其他接口
import _ from 'lodash';
import _, { each, each as forEach } from 'lodash';
（6）export default 输出类
// MyClass.js
export default class{...}
// main.js
import MyClass from 'MyClass';
let o = new MyClass();
2、export 与 import 的复合用法
（1）输入与输出
写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar。
export { foo, bar } from 'my_module';
// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };
（2）接口改名和整体输出
// 接口改名
export { foo as myFoo } from 'my_module';
// 整体输出
export * from 'my_module';
（3）默认接口和具体接口
export { default } from 'foo';
1）具体接口 => 默认接口
export { es6 as default } from './someModule';
等同于
import { es6 } from './someModule';
export default es6;
2）默认接口 => 具体接口
export { default as es6 } from './someModule';
3、模块的继承
export *命令会忽略circle模块的default方法。
export * from 'circle'; // export { area as circleArea } from 'circle';
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}
import * as math from 'circleplus';
import exp from 'circleplus';
4、跨模块的常量
（1）const只在当前模块有效。设置跨模块的多用。
// constants.js 模块
export const A = 1;
export const B = 3;
// test1.js 模块
import * as constants from './constants';
console.log(constants.A + constants.B); // 4
// test2.js 模块
import {A, B} from './constants';
console.log(A + B); // 4
（2）多常量目录
// constants/db.js
export const db = {
url: 'http://my.couchdbserver.local:5984',
admin_username: 'admin',
};
// constants/user.js
export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];
// constants/index.js <=> 合并到 index.js
export {db} from './db';
export {users} from './users';
// script.js <=> 加载
import {db, users} from './constants/index';
5、import 的注意事项
（1）import和export命令只能在模块的顶层
import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行
// 报错
if (x === 2) {
import MyModual from './myModual';
}
引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。
在语法上，条件加载就不可能实现。
import()函数，完成动态加载。
import(specifier)
（2）require 与 import
import()返回一个 Promise 对象
const main = document.querySelector('main');
import(`./section-modules/${someVariable}.js`)
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});
import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。
import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。
import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。
（3）import 适用场合
1）按需加载。
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {})
});
2）条件加载
if (condition) {
import('moduleA').then(...);
} else {
import('moduleB').then(...);
}
3）动态的模块路径
import()允许模块路径动态生成。
import(f())
.then(...);
根据函数f的返回结果，加载不同的模块。
（4）注意点
import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。
import('./myModule.js')
.then(({export1, export2}) => {
// ...·
});
export1和export2都是myModule.js的输出接口，可以解构获得。
1）如果模块有default输出接口，可以用参数直接获得。
import('./myModule.js')
.then(myModule => {
console.log(myModule.default);
});
2）具名输入
import('./myModule.js')
.then(({default: theDefault}) => {
console.log(theDefault);
});
3）同时加载多个模块
Promise.all([
import('./module1.js'),
import('./module2.js')
])
.then(([module1, module2, module3]) => {});
4）import()也可以用在 async 函数之中。
async function main() {
const myModule = await import('./myModule.js');
const {export1, export2} = await import('./myModule.js');
const [module1, module2] =
await Promise.all([
import('./module1.js'),
import('./module2.js')
]);
}
main();
