Les essentiels de JavaScript : partie 7

Il s'agit de la 7ème partie de cette série JavaScript (en tant que partie du tout) et dans cette partie, nous verrons comment décomposer nos projets en petits morceaux afin qu'ils soient maniable. Nous créerons une sorte de séparation des préoccupations, rendant notre projet attrayant et facile à naviguer. Dans toute chose, il y a une partie belle et bien sûr une partie laide. Alors n’en faites pas trop. Faites-le quand cela doit être fait.

Comme mentionné précédemment, notre objectif ici est de diviser une partie de notre projet dans un fichier séparé, de l'exporter, puis de l'importer dans notre "application principale". Il existe actuellement deux façons de procéder en JavaScript. Utiliser l'approche commonjs ainsi que l'approche modulaire de l'ES6. Ils sont tous géniaux et nous examinerons les deux.

CommonJs

L'importation et l'exportation avec commonjs sont la valeur par défaut lorsqu'elles ne sont pas spécifiées. C'est ainsi que nous pourrions faire, const readline = require("readline");. readline est un package intégré. Nous pouvons utiliser cette approche sur les packages ou modules tiers écrits dans notre projet.

• L'importation avec commonjs se fait avec const someVarNameForTheModule = require("modNameOrPath");.
• On exporte en faisant, module.exports = thingToExportOrStructuredObjectToExport.

Projet

Commençons par un projet pour effectuer quelques mathématiques. Nous allons créer des fonctions pour ajouter et soustraire. Juste ces deux-là.

• Créez un dossier de projet, cmodule : cd ~/Projects && mkdir cmodule && cd cmodule
• Initiez le projet de nœud en faisant, npm init -y
• Vous pouvez choisir d'ajouter "type": "commonjs" au fichier package.json. Je dis que vous pouvez choisir parce que c'est la valeur par défaut.

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

• Créez deux fichiers, lib.js et main.js : touchez lib.js main.js
• Implémentez le corps de la fonction add dans le lib.js

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

• Maintenant que la fonction est implémentée, nous devons l'exporter pour l'utiliser dans notre main.js. Pour exporter, nous utilisons module.exports = functionName. Dans notre cas, nous faisons module.exports = add.

  module.exports = add;

• Ici, l'intégralité de lib.js n'est que la fonction d'ajout. Nous avons exporté lib.js comme fonction d'ajout. Nous pouvons donc l'importer sous la forme const someName = require("./lib");
• Dans le main.js, nous importerons le fichier lib.js et utiliserons la fonction 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));

• Ajoutons la fonction de soustraction

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

• Vous êtes censé implémenter ces fonctions vous-même ?

• La question est, comment exporter des sous ? Essayez-le et accédez-y dans main.js

• Sachez que, lorsque nous le faisons, module.exports = X, X est exporté dans son ensemble, donc lorsque nous importons const moduleName = require("moduleName");, nous avons directement accès à X. Nous ne peut pas exporter une autre valeur avec cette même approche.

• Dans un cas comme celui-ci, nous pouvons exporter à la fois l'ajout et le sous en les exportant en tant que groupe (objet).
  

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

• Maintenant, lorsque nous importons dans main.js nous pouvons faire

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

• Le module lib est exporté en tant qu'objet donc nous pouvons faire, moduleName.add et moduleName.sub.

• On peut aussi importer en faisant par déstructuration, const { add, sub } = require("./lib");
  

  module.exports = add;

• Il existe une autre façon de réaliser plusieurs exportations

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

Ou

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

• exports.alias = someThing et exports.someThing= someThing ou fonctionne également comme modules.exports = { someThing }. Je choisirais généralement exports.alias = someThing car module.exports = { ... } pourrait ajouter des lignes supplémentaires.

Module ES

L'importation et l'exportation avec le style de module ES ne sont pas la valeur par défaut actuellement et doivent donc être spécifiées explicitement en définissant la propriété type sur "module" dans le package.json fichier. Dans ce cas, nous pourrions importer readline depuis "readline" ; au lieu de const readline = require("readline");. Nous avons remplacé le const par import, le = et require par from.

• L'importation du module ES se fait avec import someVarNameForTheModule from "modNameOrPath";.
• Nous exportons en faisant, exportons thingToExportOrStructuredObjectToExport par défaut ou exportons thingToExportOrStructuredObjectToExport.

Projet

Nous allons construire un projet similaire en utilisant le style d'importation et d'exportation du module ES. Nous allons créer des fonctions pour ajouter et soustraire comme nous l’avons fait précédemment. Vous pouvez donc le copier et le coller cette fois.

• Créez un dossier de projet, emodule : cd ~/Projects && mkdir emodule && cd emodule
• Initialiser le projet de nœud : npm init -y
• Ajoutez "type": "module" au fichier package.json.

  module.exports = { add, sub };

• Créez deux fichiers, lib.js et main.js : touchez lib.js main.js

• Implémentez le corps de l'ajout dans le 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": ""
  }

• Maintenant que la fonction d'ajout est implémentée, nous devons l'exporter pour l'utiliser dans notre main.js. Pour exporter, nous pouvons utiliser export default functionName. Dans notre cas, nous exportons l'ajout par défaut.

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

• On aurait pu aussi faire

  module.exports = add;

• Ici, l'intégralité de lib.js n'est que la fonction d'ajout. Nous avons exporté lib.js comme fonction d'ajout. Nous pouvons donc l'importer sous, importer someName from "./lib" ;
• Dans le main.js, nous importerons le fichier lib.js et utiliserons la fonction 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));

• Ajoutons la fonction de soustraction

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

• La question est : comment exporter des sous ?
• Dans un cas comme celui-ci, nous pouvons exporter à la fois add et sub en les exportant en tant que groupe (objet).

  module.exports = { add, sub };

• Maintenant, lorsque nous importons dans main.js nous pouvons faire

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

• On peut aussi importer en faisant, import { add, sub } from "./lib";

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

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

• Il existe une autre façon de réaliser plusieurs exportations

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

Ou

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

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

• Avec ce type d'approche, soit nous regroupons toutes les exportations en une seule importation, soit nous accédons aux importations individuelles une par une.

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

OU

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

Résumé

Utiliser le style d'importation et d'exportation du module commonjs ou es est relatif. commonjs n'est livré avec aucune configuration, on pourrait donc se demander pourquoi ne pas l'utiliser tel quel ? module.exports = someObject est identique à someObject par défaut d'exportation. Nous pouvons importer avec const someObject = require("pathToModule"); et importez someObject depuis "pathToModule" ;. J'aime dire, celui que vous choisissez est acceptable. Vous pouvez avoir un export module/par défaut ainsi que des exports individuels dans le même fichier.

Voici quelques règles que j'essaie de respecter lorsque je développe mes projets backend :

• J'évite autant que possible l'export par défaut ou les exports de modules et j'utilise l'export d'objet individuel
• Si j'ai un contrôleur, j'utilise une exportation par défaut/module sans rien exporter d'autre à partir de ce même fichier. Ainsi, chaque fois que j'utilise module.exports ou export default, je n'effectue aucune autre exportation à partir du même fichier
• Soit j'utilise un objet pour regrouper mes constantes et je l'exporte par défaut, soit je ferais des exportations individuelles de toutes les constantes.
• On peut exporter des objets sans les nommer et ça marche bien avec l'alias (nom que vous lui donnez) mais je préfère nommer mes exports

Pouvez-vous deviner la suite ? Eh bien, nous commencerions à faire de la magie backend. Nous allons commencer le développement backend.

Projet parallèle

Si cela vous met au défi, réécrivez le programme Mastermind en utilisant plusieurs fichiers. Pendant que je suis sur le sujet, je vais vous mettre au défi. Terminez ce projet. Soit vous le réécrivez pour que cela fonctionne, soit vous faites tout ce que vous devez faire pour que cela fonctionne et appliquez la leçon d'aujourd'hui.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!