es6 module

export负责将模块内的内容导出,import负责从其他模块导入内容.

原文件foo.js

const name = 'coderwhy';
const age = 18;
let message = "my name is why";

function sayHello(name) {
  console.log("Hello " + name);
}

导出方式一：

export const name = 'coderwhy';
export const age = 18;
export let message = "my name is why";

export function sayHello(name) {
  console.log("Hello " + name);
}

方式二：

const name = 'coderwhy';
const age = 18;
let message = "my name is why";

function sayHello(name) {
  console.log("Hello " + name);
}

export {
  name,
  age,
  message,
  sayHello
}

方式三：

export {
  name as fName,
  age as fAge,
  message as fMessage,
  sayHello as fSayHello
}

导入的方式一：

import {标识符列表} from '模块'

import { name, age, message, sayHello } from './modules/foo.js';

方式二：

import { name as wName, age as wAge, message as wMessage, sayHello as wSayHello } from './modules/foo.js';

方式三：

import * as foo from './modules/foo.js';
foo.sayHello("Kobe");

export和import结合使用

导出一个sum函数

export const sum = function(num1, num2) {
  return num1 + num2;
}

做一个中转

export { sum } from './bar.js';

直接从中转导入

export { sum as barSum } from './bar.js';

default用法

默认导出，不需要指定名字，也不需要使用{}。

export default function sub(num1, num2) {
  return num1 - num2;
}

导入

import sub from './modules/foo.js';
console.log(sub(20, 30));

在一个模块中，只能有一个默认导出

动态加载一个模块，使用import函数

let flag = true;
if (flag) {
  import('./modules/aaa.js').then(aaa => {
    aaa.aaa();
  })
} else {
  import('./modules/bbb.js').then(bbb => {
    bbb.bbb();
  })
}

ES Module的原理

ES Module加载js文件的过程是编译（解析）时加载的，并且是异步的。

编译时（解析）时加载，意味着import不能和运行时相关的内容放在一起使用。

异步的意味着：JS引擎在遇到import时会去获取这个js文件，但是这个获取的过程是异步的，并不会阻塞主线程继续执行。