ES6模块化导出（export）、导入（import）的几种书写方式

1. 导出单个特性

a.js中导出：

// 导出一个变量
export let name = 'Jack';
// 导出一个函数
export function numProduct(num1, num2) {
  return num1 * num2;
}
// 导出一个类
export class Person {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  calcArea() {
    return this.height * this.width;
  }
}

b.js中导入及应用：

import { name, numProduct, Person } from './a.js';  // {}中的变量名要与export导出的变量名保持一致
console.log(name);  // Jack
console.log(numProduct(1, 7));  // 7
let p = new Person(10, 20);
console.log(p.height, p.width, p.calcArea());  // 10 20 200


// 导出的变量较多时可以使用*通配符代替变量名
import * as all from './a.js';
console.log(all);

console.log(all.name);
console.log(all.numProduct(1, 7));
let p = new all.Person(10, 20);
console.log(p);
console.log(p.height, p.width, p.calcArea());

2. 先定义再导出

a.js中导出：

let flag = true;
function sum(num1, num2) {
  return num1 + num2
}

if (flag) {
  console.log(sum(1, 2));
}

export {
  flag,
  sum
}

 b.js中导入及应用：

import { flag, sum } from './a.js';  // {}中的变量名要与export导出的变量名保持一致

console.log(flag);  // true
if (flag) {
  console.log(sum(100, 200));  // 300
}

3. 重命名导出

a.js中导出：

export { flag as isShow, sum as count}

b.js中导入： 

import { isShow, count } from './a.js';

4. 导出默认值export default（只能有一个）

a.js中导出：

const x = 1024;
export default x;

b.js中导入，不需要与export default后面的名称保持一致，导入者可以直接重命名：

import y from './a.js';  // 此处的变量名不加{}
console.log(y);  // 1024