ES2015模塊，我應該導入/導出所有內容嗎？

Question

我最近開始在javascript中使用導入和導出 ，但是我有點困惑。 我不確定我應該導出什么，以及我應該保留在文件本地。 我不知道如何用英語來表達這一點，因此這是我的代碼中的一小部分：

/client/js/Inventory.js文件，模塊：

import {
  $,
  renderHTML,
  game
} from "../main.js";

const template = {
  titanium: {
    name: "Titanium",
    description: "Description here..."
  }
}

export default class Inventory {
  constructor(inventory) {
    this._name = inventory.name;
    this._description = inventory.description;
  }

  get name() {return this._name}
  get description() {return this._description}

  generate(id) {
    renderHTML("inventory, `
      <div class="inventory" id="${id}">
        content here...
      </div>
    `);
  }

  static make(id) {
    game.inventory[id] = new Inventory(template[id]);
    game.inventory[id].generate(id);
}

我的/client/main.js文件看起來像這樣：

import Inventory from "./js/Inventory.js";

const $ = (id) => document.getElementById(id);
const renderHTML = (id, str) => $(id).insertAdjacentHTML("beforeend", str);

const game = {
  inventory: {}
};

Inventory.make("titanium");

export {
  $,
  renderHTML,
  game
};

由於我要從main.js文件中導出game對象，這是否意味着導入后在Inventory.js文件中創建了一個新的game對象，或者這意味着Inventory.js文件現在可以訪問main.js了文件的game對象？

由於我正在調用main.js文件中的類，因此我是否還需要從Inventory.js文件中導出template對象，並將其導入main.js文件中？

僅導出類工作正常，但是如果不導出，我不知道main.js如何訪問模板？ 如果在main.js中找不到文件，它是否會在Inventory.js文件中查找 ？

謝謝！

Answer 1

很簡單 模塊是在不同代碼段之間共享代碼或數據的結構化方式。

您導出要與其他模塊共享的功能或數據，這些模塊將加載您的模塊。

如果您不打算共享它或不需要共享它，請不要導出它。 如果確實需要共享它或某些其他模塊需要訪問它，則可以導出它。 導出是與其他模塊共享的方式。

您可以從需要在此模塊中使用的其他模塊導入任何屬性。

對於導入，您僅導入現在需要的內容。 將來無需導入您“可能”需要的東西。 您始終可以在實際需要時添加導入。

對於導出，您僅導出您現在打算共享的內容。 如果您發現以后需要共享更多內容，則可以隨時稍后添加另一個導出。

---

僅在此模塊內使用的代碼不需要導出。 實際上，模塊的好處之一是您可以維護模塊中的代碼隱私或保護，因為其他代碼無法訪問未通過導出以某種方式導出或共享的模塊中的任何內容。

---

您可以在邏輯上將導出視為模塊的“ api”。 這是其他模塊可以在您的模塊中調用的內容。

從其他模塊中指定要使用的“ api”時，您可以在邏輯上考慮導入。

當所有內容都位於全局名稱空間中時（與原始瀏覽器設計一樣），則沒有顯式導出或導入。 在頂層聲明的所有內容都是公開和共享的。 這引起了各種各樣的問題，尤其是當項目變得越來越大，文件越來越多，而當您開始嘗試使用第三方代碼時，問題變得更加復雜。

模塊系統是一種結構化的說法，默認情況下，一切都是私有的。 然后，您僅顯式導出要共享的內容。 然后，當有人想要使用您的api時，他們會顯式導入他們想要使用的api。 每個模塊都位於其自己的范圍內，因此具有自己的名稱空間。 模塊也是一個非常自然的可測試單元。

在Javascript模塊標准化之前，開發人員已經建立了許多不同的約定，以嘗試解決Javascript中的大型扁平全局命名空間。 如果您使用的是第三方庫，則在同一項目中遇到多個約定的情況並不少見。 對於不嘗試使用約定來解決此問題的開發人員，代碼可能會變得很混亂，有很多潛在的變量命名沖突，功能意外替換以及文件之間通常沒有文檔證明的依存關系等等……標准化模塊設計試圖提供了解決這些問題的一種通用方法，並且在此過程中，還使編寫可重用，可測試，可共享的代碼變得更加容易。

---

由於我要從main.js文件中導出游戲對象，這是否意味着導入后在Inventory.js文件中創建了一個新的游戲對象，或者這意味着Inventory.js文件現在可以訪問main.js了文件的游戲對象？

這意味着Inventory.js現在可以導出在main.js中創建的一個game對象。 導出或導入時沒有隱式復制。

由於我正在調用main.js文件中的類，因此我是否還需要從Inventory.js文件中導出模板對象，並將其導入main.js文件中？

您只需要從inventory.js中導出內容，而您需要直接從其他文件中引用這些內容。 由於main.js不需要引用template變量目錄，因此無需導出它。 從inventory.js導入操作將加載並運行該模塊。 這使得template變量可用於inventory.js中的所有代碼，這正是您的所有代碼需求。 因此，無需導出它。

僅導出類工作正常，但是如果不導出，我不知道main.js如何訪問模板？ 如果在main.js中找不到文件，它是否會在Inventory.js文件中查找？

導出Inventory類允許任何其他模塊使用該類及其所有方法。 從inventory.js 。js導入任何東西的過程都會導致模塊本身被加載，因此在inventory.js中定義的所有變量都在inventory.js 。 當你創建一個Inventory通過出口類對象，你正在運行的代碼inventory.js有權訪問該模塊中的所有數據。

導入的東西是兩個步驟。 首先加載引用的模塊（如果尚未加載）。 然后，獲取您要求進口的出口。