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();