JavaScript の基礎: パート 7

これは、この JavaScript シリーズ (全体の一部として) の 7 番目のパートです。このパートでは、プロジェクトを小さな部分に分割して、管理可能。ある種の関心事の分離を作成し、プロジェクトを魅力的でナビゲートしやすいものにします。何事にも美しい部分もあれば、もちろん醜い部分もあります。だから、やりすぎないでください。やる必要があるときにやってください。

前述したように、ここでの焦点は、プロジェクトの一部を別のファイルに分割し、エクスポートして、「メイン アプリ」にインポートすることです。現時点では、JavaScript でこれを行う方法が 2 つあります。 commonjs アプローチと ES6 のモジュラー アプローチを使用します。どれも素晴らしいので、両方見てみましょう。

CommonJ

指定しない場合は、commonjs によるインポートとエクスポートがデフォルトになります。これが、const readline = require("readline"); の方法です。 readline は組み込みパッケージです。このアプローチは、プロジェクトで記述されたサードパーティのパッケージまたはモジュールに使用できます。

• commonjs でのインポートは const someVarNameForTheModule = require("modNameOrPath"); で行われます。
• module.exports = thingToExportOrStructuredObjectToExport.
を実行してエクスポートします。

プロジェクト

計算を実行するプロジェクトから始めましょう。足し算と引き算を行う関数を作成します。この2つだけです。

• プロジェクト フォルダーを作成します。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": ""
  }

• 2 つのファイル、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 を追加関数としてエクスポートしました。したがって、次のようにインポートできます。 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
  }

• これらの関数は自分で実装する必要がありますか?

• 問題は、サブをどのようにエクスポートするかです。試してみて、main.js

  内にアクセスしてください。

• module.exports = X とすると、X はモジュール全体としてエクスポートされるため、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 および imports.someThing= someThing または modules.exports = { someThing } のように動作します。 module.exports = { ... } では余分な行が含まれる可能性があるため、通常は、exports.alias = someThing を選択します。

ESモジュール

ES モジュール スタイルでのインポートとエクスポートは現在デフォルトではないため、 の type プロパティを "module" に設定して明示的に指定する必要があります。 package.json ファイル。この場合、「readline」から readline をインポートすることができます。 const readline = require("readline"); の代わりに。 const を import に置き換え、= と require を from に置き換えました。

• 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 };

• 2 つのファイル、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": ""
  }

• 追加関数を実装したので、main.js で使用できるようにそれをエクスポートする必要があります。エクスポートするには、エクスポートのデフォルトの functionName を使用できます。私たちの場合は、デフォルトの追加をエクスポートします。

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

• こんなこともできたでしょう

  module.exports = add;

• ここでは、lib.js の全体が単なる add 関数です。 lib.js を追加関数としてエクスポートしました。したがって、次のようにインポートできます。 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
  };

• この種のアプローチでは、エクスポート全体を 1 つのインポートとしてバンドルするか、個々のインポートに 1 つずつアクセスします。

  {
    "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 またはエクスポートデフォルトを使用するときは常に、同じファイルから他のエクスポートを実行しません
• オブジェクトを使用して定数をグループ化し、それをデフォルトでエクスポートするか、すべての定数を個別にエクスポートします。
• オブジェクトに名前を付けずにエクスポートすることもでき、エイリアス (指定した名前) で問題なく動作しますが、エクスポートには名前を付けたいと思います

次に何が起こるかわかりますか?さて、バックエンドの魔法をいくつか始めます。バックエンドの開発を開始します。

サイドプロジェクト

それが難しい場合は、複数のファイルを使用してマスターマインド プログラムを書き換えてください。本題に沿って、私はあなたに挑戦します。このプロジェクトを完了します。動作するように書き直すか、動作させるためにやるべきことを何でもして、今日のレッスンを適用してください。

  {
    "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 中国語 Web サイトの他の関連記事を参照してください。