ES6中的import()函數

import(specifier)

上面代碼中，import函數的參數specifier，指定所要加載的模塊的位置。import命令能夠接受什么參數，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方法，區別主要是前者是異步加載，后者是同步加載。

適用場合

下面是import()的一些適用場合。

（1）按需加載。

import()可以在需要的時候，再加載某個模塊。

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

上面代碼中，import()方法放在click事件的監聽函數之中，只有用戶點擊了按鈕，才會加載這個模塊。

（2）條件加載

import()可以放在if代碼塊，根據不同的情況，加載不同的模塊。

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

上面代碼中，如果滿足條件，就加載模塊 A，否則加載模塊 B。

（3）動態的模塊路徑

import()允許模塊路徑動態生成。

import(f())
.then(...);

上面代碼中，根據函數f的返回結果，加載不同的模塊。