JavaScript 基础知识：第 7 部分-js教程-PHP中文网

JavaScript Essentials: Part 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中文网其他相关文章！