JavaScript 基礎：第 7 部分

這是這個JavaScript 系列的第七部分（作為整體的一部分），在這一部分中，我們將研究如何將我們的專案分解成小塊，以便它們易於管理。我們將創建某種關注點分離，使我們的專案有吸引力且易於導航。凡事都有美好的一面，當然也有醜陋的一面。所以，不要做得太過分。該做的時候就做。

如前所述，我們的重點是將專案的某些部分分解為單獨的文件，將其匯出，然後將其匯入到我們的「主應用程式」中。目前在 JavaScript 中有兩種方法可以做到這一點。使用 commonjs 方法以及 ES6 的模組化方法。他們都很棒，我們都會去看看。

CommonJs

不指定時預設使用commonjs匯入導出。這就是我們可以做的，const readline = require("readline");。 readline 是內建套件。我們可以在我們專案中編寫的第三方包或模組上使用這種方法。

• 使用 commonjs 導入是透過 const someVarNameForTheModule = require("modNameOrPath"); 完成的。
• 我們透過 module.exports = thingToExportOrStructuredObjectToExport 進行導出。

專案

讓我們從一個進行數學計算的專案開始。我們將創建加法和減法函數。就這兩個。

• 建立專案資料夾，cmodule: cd ~/Projects && mkdir cmodule && cd cmodule
• 透過執行 npm init -y 來初始化節點項目
• 您可以選擇將 "type": "commonjs" 加入到 package.json 檔案中。我是說你可以選擇，因為這是預設的。

  {
    "name": "cmodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "commonjs",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

• 建立兩個文件，lib.js 和 main.js： touch lib.js main.js
• 在lib.js中實作add函數的主體

  function add(x, y) {
    // return the sum of x and y
  }

• 現在我們已經實作了該功能，我們必須將其匯出以在 main.js 中使用。要導出，我們使用 module.exports = functionName。在我們的例子中，我們執行 module.exports = add。

  module.exports = add;

• 這裡整個lib.js只是add函數。我們導出 lib.js 作為 add 函數。因此我們可以將其導入為 const someName = require("./lib");
• 在main.js中，我們將匯入lib.js檔案並使用add函數。

  const lib = require("./lib");
  // we did, "./lib", "dot slash lib", because main.js and lib.js are in the same folder.

  console.log(lib(1, 2));

• 讓我們加入減法函數

  function sub(x, y) {
    // returns the difference x and y
  }

• 你應該自己實現這些功能嗎？

• 問題是，我們要如何匯出 sub？嘗試一下並在 main.js

  中存取它

• 知道，當我們這樣做時， module.exports = X ，X 被導出為整個模組，因此當我們 import const moduleName = require("moduleName"); 時，我們可以直接存取 X。所以我們無法使用相同的方法導出另一個值。

• 在這種情況下，我們可以透過將 add 和 sub 作為一個群組（物件）導出來匯出它們。
  

  {
    "name": "cmodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "commonjs",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

• 現在，當我們匯入main.js時，我們可以這樣做

  function add(x, y) {
    // return the sum of x and y
  }

• lib 模組導出為一個對象，因此我們可以執行 moduleName.add 和 moduleName.sub。

• 我們也可以解構來導入， const { add, sub } = require("./lib");
  

  module.exports = add;

• 還有另一種方法可以進行多次導出

  const lib = require("./lib");
  // we did, "./lib", "dot slash lib", because main.js and lib.js are in the same folder.

  console.log(lib(1, 2));

或

  function sub(x, y) {
    // returns the difference x and y
  }

• Exports.alias = someThing 和exports.someThing= someThing 或也可以像modules.exports = { someThing } 一樣運作。我通常會選擇exports.alias = someThing，因為module.exports = { ... } 可以添加額外的行。

ES模組

ES 模組樣式的匯入和匯出目前不是預設的，因此必須透過將 中的type 屬性設定為"module" 來明確指定package.json 文件。在這種情況下，我們可以從「readline」匯入readline；而不是 const readline = require("readline");。我們用 import 取代了 const，用 from 取代了 = 和 require。

• ES 模組導入是透過 import someVarNameForTheModule from "modNameOrPath";.
完成的
• 我們透過執行匯出，匯出預設的 thingToExportOrStructuredObjectToExport 或匯出 thingToExportOrStructuredObjectToExport。

專案

我們將使用ES模組風格的導入和導出來建立一個類似的專案。我們將像之前一樣創建加法和減法函數。所以這次你可以複製並貼上它。

• 建立專案資料夾，emodule: cd ~/Projects && mkdir emodule && cd emodule
• 初始化節點項目：npm init -y
• 將 "type": "module" 加入 package.json 檔案中。

  module.exports = { add, sub };

• 建立兩個文件，lib.js 和 main.js： touch lib.js main.js

• 在 lib.js
  中實作新增的主體

  {
    "name": "cmodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "commonjs",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

• 現在我們已經實作了 add 函數，我們必須將其匯出以在 main.js 中使用。要導出，我們可以使用導出預設函數名。在我們的例子中，我們導出預設添加。

  function add(x, y) {
    // return the sum of x and y
  }

• 我們也可以這樣做

  module.exports = add;

• 這裡整個lib.js只是add函數。我們導出 lib.js 作為 add 函數。所以我們可以將其導入為， import someName from "./lib";
• 在main.js中，我們將匯入lib.js檔案並使用add函數。

  const lib = require("./lib");
  // we did, "./lib", "dot slash lib", because main.js and lib.js are in the same folder.

  console.log(lib(1, 2));

• 讓我們加入減法函數

  function sub(x, y) {
    // returns the difference x and y
  }

• 問題是，我們要如何導出sub？
• 在這種情況下，我們可以透過將 add 和 sub 作為一個群組（物件）導出來匯出它們。

  module.exports = { add, sub };

• 現在，當我們匯入main.js時，我們可以這樣做

  const lib = require("./lib");
  // lib is an object so we can do lib dot someThing

  console.log(lib.add(1, 2));
  console.log(lib.sub(1, 2));

• 我們也可以透過以下方式導入： import { add, sub } from "./lib";

  const { add, sub } = require("./lib");

  console.log(add(1, 2));
  console.log(sub(1, 2));

• 還有另一種方法可以進行多次導出

  exports.add = function add(x, y) {
    // return the sum of x and y
  };

  exports.sub = function sub(x, y) {
    // return the difference of x and y
  };

或

  exports.add = function (x, y) {
    // return the sum of x and y
  };

  exports.sub = function (x, y) {
    // return the difference of x and y
  };

• 透過這種方法，我們要么將整個導出捆綁為一個導入，要么逐一訪問單個導入

  {
    "name": "emodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "module",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

或

  function add(x, y) {
    // return the sum of x and y
  }

概括

使用commonjs或es模組導入導出風格是相對的。 commonjs 沒有配置，所以有人會問為什麼不直接使用它？ module.exports = someObject 與匯出預設 someObject 相同。我們可以使用 const someObject = require("pathToModule"); 導入並從“pathToModule”導入 someObject；。我喜歡說，無論你選哪一個都可以。您可以在同一文件中進行模組/預設導出以及單獨導出。

這些是我在開發後端專案時嘗試遵守的一些規則：

• 我盡可能避免預設匯出或模組匯出，並使用單一物件匯出
• 如果我有一個控制器，我會使用預設/模組匯出，而不從同一檔案匯出任何其他內容。因此，每當我使用 module.exports 或匯出預設值時，我不會從同一檔進行任何其他匯出
• 我要么使用一個物件對常數進行分組並預設導出它，要么我會單獨導出所有常數。
• 我們可以匯出物件而無需命名它們，並且它可以與別名（您指定的名稱）配合使用，但我更喜歡為我的匯出命名

你能猜到接下來會發生什麼事嗎？好吧，我們開始做一些後端魔術。我們將開始後端開發。

副業項目

如果它對您提出挑戰，請使用多個檔案重寫 mastermind 程式。在談論這個話題時，我會向你挑戰。完成這個項目。要么重寫它以使其工作，要么盡一切努力使其工作並應用今天的課程。

  {
    "name": "cmodule",
    "version": "1.0.0",
    "main": "index.js",
    "type": "commonjs",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
  }

以上是JavaScript 基礎：第 7 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！