JavaScript-Grundlagen: Teil 7

Dies ist der 7. Teil dieser JavaScript-Serie (als Teil des Ganzen) und in diesem Teil werden wir uns damit befassen, wie wir unsere Projekte in kleine Teile zerlegen können, damit sie entstehen überschaubar. Wir werden eine Art Interessenstrennung schaffen, die unser Projekt ansprechend und einfach zu navigieren macht. In allen Dingen gibt es einen schönen Teil und natürlich auch einen hässlichen Teil. Übertreiben Sie es also nicht. Tun Sie es, wenn es nötig ist.

Wie bereits erwähnt, liegt unser Fokus hier darauf, einen Teil unseres Projekts in eine separate Datei aufzuteilen, sie zu exportieren und sie dann in unsere „Haupt-App“ zu importieren. Derzeit gibt es in JavaScript zwei Möglichkeiten, dies zu tun. Verwendung des commonjs-Ansatzes und auch des modularen Ansatzes des ES6. Sie sind alle großartig und wir werden uns beide ansehen.

CommonJs

Der Import und Export mit commonjs ist die Standardeinstellung, wenn nicht anders angegeben. So könnten wir es machen: const readline = require("readline");. readline ist ein integriertes Paket. Wir können diesen Ansatz für die in unserem Projekt geschriebenen Pakete oder Module von Drittanbietern verwenden.

• Der Import mit commonjs erfolgt mit const someVarNameForTheModule = require("modNameOrPath");.
• Wir exportieren, indem wir module.exports = thingToExportOrStructuredObjectToExport.
tun

Projekt

Beginnen wir mit einem Projekt, bei dem wir etwas Mathe durchführen. Wir werden Funktionen zum Addieren und Subtrahieren erstellen. Nur diese beiden.

• Erstellen Sie einen Projektordner, cmodule: cd ~/Projects && mkdir cmodule && cd cmodule
• Initiieren Sie das Knotenprojekt mit npm init -y
• Sie können „type“: „commonjs“ zur Datei package.json hinzufügen. Ich sage, Sie können wählen, weil das die Standardeinstellung ist.

  {
    "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": ""
  }

• Erstellen Sie zwei Dateien, lib.js und main.js: Berühren Sie lib.js main.js
• Implementieren Sie den Textkörper für die Add-Funktion in der lib.js

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

• Da wir nun die Funktion implementiert haben, müssen wir sie exportieren, um sie in unserem main.js zu verwenden. Zum Exportieren verwenden wir module.exports = functionName. In unserem Fall machen wir module.exports = add.

  module.exports = add;

• Hier ist die Gesamtheit von lib.js nur die Add-Funktion. Wir haben lib.js als Add-Funktion exportiert. Wir können es also importieren als: const someName = require("./lib");
• In der Datei main.js importieren wir die Datei lib.js und nutzen die Add-Funktion.

  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));

• Fügen wir die Subtraktionsfunktion hinzu

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

• Sie sollen diese Funktionen selbst implementieren?

• Die Frage ist, wie exportieren wir Subs? Probieren Sie es aus und greifen Sie in main.js

  darauf zu

• Wissen Sie, dass, wenn wir module.exports = X tun, X als ganzes Modul exportiert wird. Wenn wir also const moduleName = require("moduleName"); importieren, erhalten wir direkten Zugriff auf Mit diesem gleichen Ansatz kann kein anderer Wert exportiert werden.

• In einem solchen Fall können wir sowohl Add als auch Sub exportieren, indem wir sie als Gruppe (Objekt) exportieren.
  

  {
    "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": ""
  }

• Wenn wir jetzt in main.js importieren, können wir es tun

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

• Das Modul lib wird als Objekt exportiert, sodass wir moduleName.add und moduleName.sub.

  ausführen können

• Wir können den Import auch durch Destrukturieren durchführen, const { add, sub } = require("./lib");
  

  module.exports = add;

• Es gibt eine andere Möglichkeit, mehrere Exporte durchzuführen

  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));

Oder

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

• exports.alias = someThing und exports.someThing= someThing oder funktioniert auch wie module.exports = { someThing }. Normalerweise würde ich exports.alias = someThing wählen, da module.exports = { ... } zusätzliche Zeilen enthalten könnte.

ES-Modul

Der Import und Export mit dem ES-Modulstil ist derzeit nicht die Standardeinstellung und muss daher explizit angegeben werden, indem die Eigenschaft type im auf "module" gesetzt wird package.json-Datei. In diesem Fall könnten wir readline aus „readline“ importieren; statt const readline = require("readline");. Wir haben const durch import, = und require durch from.

• Der ES-Modulimport erfolgt mit import someVarNameForTheModule from „modNameOrPath“;.
• Wir exportieren, indem wir das Standard-thingToExportOrStructuredObjectToExport exportieren oder thingToExportOrStructuredObjectToExport exportieren.

Projekt

Wir werden ein ähnliches Projekt mit dem ES-Modulstil für Import und Export erstellen. Wir werden wie zuvor Funktionen zum Addieren und Subtrahieren erstellen. Dieses Mal können Sie es also kopieren und einfügen.

• Erstellen Sie einen Projektordner, emodule: cd ~/Projects && mkdir emodule && cd emodule
• Initiieren Sie das Knotenprojekt: npm init -y
• Fügen Sie „type“: „module“ zur Datei package.json hinzu.

  module.exports = { add, sub };

• Erstellen Sie zwei Dateien, lib.js und main.js: Berühren Sie lib.js main.js

• Implementieren Sie den Text für das Add in der 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": ""
  }

• Da wir nun die Add-Funktion implementiert haben, müssen wir sie exportieren, um sie in unserem main.js zu verwenden. Zum Exportieren können wir den Export-Standardfunktionsnamen verwenden. In unserem Fall exportieren wir das Standardadd.

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

• Das hätten wir auch machen können

  module.exports = add;

• Hier ist die Gesamtheit von lib.js nur die Add-Funktion. Wir haben lib.js als Add-Funktion exportiert. Wir können es also importieren als: import someName from „./lib“;
• In main.js importieren wir die Datei lib.js und nutzen die Add-Funktion.

  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));

• Fügen wir die Subtraktionsfunktion hinzu

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

• Die Frage ist, wie exportieren wir Subs?
• In einem solchen Fall können wir sowohl add als auch sub exportieren, indem wir sie als Gruppe (Objekt) exportieren.

  module.exports = { add, sub };

• Wenn wir jetzt in main.js importieren, können wir es tun

  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));

• Wir können auch importieren, indem wir Folgendes tun: import { add, sub } from „./lib“;

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

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

• Es gibt eine andere Möglichkeit, mehrere Exporte durchzuführen

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

Oder

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

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

• Bei diesem Ansatz bündeln wir entweder die gesamten Exporte als einen Import oder greifen einzeln auf einzelne Importe zu

  {
    "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": ""
  }

ODER

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

Zusammenfassung

Der Import- und Exportstil für die Verwendung von CommonJS- oder ES-Modulen ist relativ. commonjs wird ohne Konfigurationen geliefert, daher würde man sich fragen, warum man es nicht so verwenden sollte, wie es ist. module.exports = someObject ist dasselbe wie export default someObject. Wir können mit const someObject = require("pathToModule"); importieren. und importiere someObject aus „pathToModule“;. Wie gesagt, was auch immer Sie wählen, es ist in Ordnung. Sie können einen Modul-/Standardexport und auch einzelne Exporte in derselben Datei durchführen.

Dies sind einige Regeln, die ich bei der Entwicklung meiner Backend-Projekte einzuhalten versuche:

• Ich vermeide Standardexporte oder Modulexporte so weit wie möglich und verwende den Einzelobjektexport
• Wenn ich einen Controller habe, verwende ich einen Standard-/Modulexport, ohne etwas anderes aus derselben Datei zu exportieren. Wenn ich also module.exports oder export default verwende, mache ich keinen weiteren Export aus derselben Datei
• Ich verwende entweder ein Objekt, um meine Konstanten zu gruppieren und es standardmäßig zu exportieren, oder ich würde alle Konstanten einzeln exportieren.
• Wir können Objekte exportieren, ohne sie zu benennen, und es funktioniert gut mit dem Alias ​​(Name, den Sie ihm geben), aber ich bevorzuge es, meine Exporte zu benennen

Kannst du erraten, was als nächstes kommt? Nun, wir würden anfangen, ein paar Backend-Zaubereien durchzuführen. Wir werden mit der Backend-Entwicklung beginnen.

Nebenprojekt

Wenn es Sie herausfordert, schreiben Sie das Mastermind-Programm mit mehreren Dateien neu. Während ich mich mit dem Thema befasse, werde ich Sie herausfordern. Schließen Sie dieses Projekt ab. Schreiben Sie es entweder um, damit es funktioniert, oder tun Sie alles, was Sie tun müssen, damit es funktioniert, und wenden Sie die heutige Lektion an.

  {
    "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": ""
  }

Das obige ist der detaillierte Inhalt vonJavaScript-Grundlagen: Teil 7. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!