目录

• export 导出
• import 导入
• export default
• import()

export 导出

export 命令用于规定模块的对外接口

// 写法一，直接导出
export const m = 1;

// 写法二，使用解构导出
const m = 1;
export {m};

// 写法三，重命名导出的内容
const n = 1;
export {n as newName};

// 处于条件代码块之中，就没法做静态优化,就会报错
function foo() {
  export default 'bar' // SyntaxError
}
foo()

import 导入

import 命令用于输入其他模块提供的功能。

1. import 的变量都建议当作只读。
2. import 命令具有提升效果，是编译阶段执行的，在代码运行之前。
3. import 是静态执行，同样不能处于条件代码块之中。
4. import 语句是 Singleton （单例）模式，多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。

// import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（export.js）对外接口的名称相同。
import { m } from './export.js';

console.log(m)

//重命名
import { m as newName} from './export.js';

console.log(newName)

// import 命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。
import {a} from './xxx.js'
a = {}; // Syntax Error : 'a' is read-only;
// 如果a是一个对象，改写a的属性是允许的。不过，这种写法很难查错，建议凡是输入的变量，都当作完全只读，不要轻易改变它的属性。
a.foo = 'hello'; // 合法操作

// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}
export function circumference(radius) {
  return 2 * Math.PI * radius;
}

// main.js
// 逐一指定要加载的方法
import { area, circumference } from './circle';
// 整体加载
// import * as circle from './circle';
console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));

export default

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

// export-default.js
export default function () {
  console.log('foo');
}
// import-default.js
import customName from './export-default';
customName(); // 'foo'

import()

ES2020提案 引入import()函数，支持动态加载模块

// import()返回一个 Promise 对象。类似于 Node 的require方法，区别主要是前者 import() 是异步加载，后者是同步 require 加载。
const main = document.querySelector('main');
import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

// 按需加载，可以在需要的时候，再加载某个模块。
button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

// 条件加载，可以放在if代码块，根据不同的情况，加载不同的模块。
if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

// 动态的模块路径，允许模块路径动态生成。
import(f())
.then(...);