摘要：先來介紹下語法官方示例代碼模塊中對象暴露只需要即可，可以是任何類型的對象。手動導入模塊下某個對象，需要和模塊中定義的名字對應，順序無關。

看一下官方介紹：

Language-level support for modules for component definition.

JS在ES2015開始原生支持模塊化開發(fā)，我們之前也曾借助于諸如：

AMD

CommonJS

等的模塊加載器進行過模塊化開發(fā)，我想說的是那些都沒有今天要講的簡單好用。

?? 警告，正式版中的ES2015中沒有模塊加載器，所以我們依然需要之前的模塊加載器幫助我們。

先來介紹下語法(官方示例代碼)：

//lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

//app.js
import * as math from "lib/math";
import {sum, pi} from "lib/math";
console.log("2π = " + math.sum(math.pi, math.pi));

模塊中對象暴露

只需要 export xx 即可，可以是任何類型的對象。

從模塊中導入

使用 import 即可, 幾種方式

import * as xx from ..

導入某個模塊下的所有到某個命名空間下，如示例代碼中的 import * as math from "lib/math", 意即將lib/math下所有暴露的對象導入到math對象下，之后就可以只用math.xxx訪問了。

import {x, y, z} from ..

手動導入模塊下某個對象，x, y, z 需要和模塊中定義的名字對應，順序無關。

略微有點啰嗦了是吧？來看下面這種：

//lib/math.js
export default function (x, y) {
  return x + y;
}
//app.js
import sum from "lib/math";

這樣以來，寫法上簡單了許多，如果有default，也有其他的export怎么辦呢？如下：

import default, {other1, other2} from "someMoule";

一般在開發(fā)中，只暴露一個default的情況占大多數(shù)。

還有一個叫 export *, 用來在某個模塊內將另一個模塊的暴露的對象在這個模塊重新暴露出去，個人覺得用處不是很大，不做過多描述。

下面，我們繼續(xù)實戰(zhàn)，依然是在ES2015入門系列10-類 classes中寫的游戲，我們是在一個文件里運行的，下面我們將代碼進行分拆成幾個文件，進入模塊化開發(fā):

使用ES2015入門系列9-Babel和Rollup的配置，我們的目錄結構如下：

es2015-learning

dist

src

Game.js

Hero.js

main.js

Monster.js

Role.js

Game.js 代碼

import Monster from "./Monster.js";
import Hero from "./Hero.js";

export default class Game { //游戲世界

  constructor() {
    this.name = "權利的游戲";
    this.hero = new Hero("Jon Snow", 10); // 初始化英雄Jon Snow
    this.monsters = [ //怪物集合，模擬簡單的游戲關卡。
      new Monster("異鬼 01", 1, 10),
      new Monster("異鬼 02", 3, 30),
      new Monster("異鬼 03", 5, 50),
      new Monster("異鬼 04", 10, 100),
      new Monster("異鬼 05", 15, 150),
      new Monster("異鬼 06", 20, 200),
      new Monster("Night King", 50, 500)
    ];
    this.level = 0; // 游戲當前關卡記錄
    console.log(`你在[${this.name}]中扮演[${this.hero.name}], 征程即將開始...`);
  }

  play() { // 游戲開始
    while (this.level < this.monsters.length && ! this.hero.isDead()) {
      let monster = this.monsters[this.level];
      console.log(`關卡[${this.level + 1}] 你遇到了[${monster.name}], 進入戰(zhàn)斗:`);
      let offensive = this.hero;
      let defensive = monster;
      while (! this.hero.isDead() && ! monster.isDead()) {
        offensive.attack(defensive);
        let middleman = offensive;
        offensive = defensive;
        defensive = middleman;
      }
      if (this.hero.isDead()) {
        console.log(`你被[${monster.name}]打敗了, 游戲結束!`);
        break;
      }
      if (monster.isDead()) {
        console.log(`你打敗了[${monster.name}] 等級提升:[${monster.level}]`);
        this.hero.levelUp(monster.level);
        this.level ++;
      }
    }
    if (this.level === this.monsters.length) {
        console.log(`恭喜你通關游戲!`);
    }
  }

}

Hero.js 代碼

import Role from "./Role.js";

export default class Hero extends Role {

    attack(role) { //攻擊，有概率是用必殺攻擊
        if (! this.isCriticalStrike()) {
            return this.criticalStrike(role);
        }

        return this.strike(role);
    }

    criticalStrike(role) { //必殺攻擊
        let power = parseInt(200 * Math.random() + 50);
        role.damage(power);
        console.log(`[${this.name}]使用必殺攻擊了[${role.name}], 造成了[${power}]點傷害`);
    }

    isCriticalStrike() {
        return Math.random() > 0.70;
    }

}

Monster.js 代碼

import Role from "./Role.js";

export default class Monster extends Role {

}

Role.js 代碼

export default class Role { //角色基類

  constructor(name, level = 1, health = 100) {
      this.name = name;
      this.level = level;
      this.health = health;
  }

  isDead() { //判斷角色是否死亡
    return this.health <= 0;
  }

  levelUp(level = 1) { //升級
    this.level += level;
  }

  damage(power) { //受到傷害
    this.health = this.health - power;
  }

  attack(role) { //攻擊
    this.strike(role);
  }

  strike(role) { //普通攻擊
    let power = parseInt(Math.random() * 20 * this.level / 10);
    role.damage(power);
    console.log(`[${this.name}]攻擊了[${role.name}], 造成了[${power}]點傷害`);
  }

}

最后， main.js 代碼

import Game from "./Game.js";

new Game().play();

一切準備就緒，執(zhí)行:

npm run build

將編譯后的dist/main.js,放入網頁中，運行，Yeah！It works!

恭喜，我們一起學會了ES2015帶給我們的模塊化開發(fā)!

Keep on hacking!