Una introducció als sistemes de mòduls en JavaScript

El concepte de mòduls prové del paradigma de programació modular. Aquest paradigma proposa que el programari hauria d'estar compost de components separats i intercanviables anomenats 'mòduls' desglossant les funcions del programa en fitxers autònoms que poden funcionar per separat o acoblats en una aplicació.

MAKEUSEO VÍDEO DEL DIA

Un mòdul és un fitxer autònom que encapsula codi per implementar determinades funcionalitats i promoure la reutilització i l'organització.

Aquí parlareu dels sistemes de mòduls utilitzats a les aplicacions JavaScript, inclòs el patró de mòduls, el sistema de mòduls CommonJS utilitzat a la majoria d'aplicacions Node.js i el sistema de mòduls ES6.

El patró del mòdul

Abans de la introducció dels mòduls JavaScript natius, el patró de disseny de mòduls s'utilitzava com a sistema de mòduls per abastar variables i funcions en un sol fitxer.

Això es va implementar mitjançant expressions de funció invocades immediatament, conegudes popularment com a IIFE. Un IIFE és una funció no reutilitzable que s'executa tan bon punt es crea.

Aquesta és l'estructura bàsica d'un IIFE:

(function () { 
  //code here 
})(); 
   
(() => { 
  //code here 
})(); 
   
(async () => { 
  //code here 
})();

El bloc de codi anterior descriu els IIFE utilitzats en tres contextos diferents.

Els IIFE es van utilitzar perquè les variables declarades dins d'una funció tenen l'abast de la funció, fent-les accessibles només dins de la funció, i perquè les funcions permeten retornar dades (fer-les accessibles públicament).

Per exemple:

const foo = (function () { 
  const sayName = (name) => { 
    console.log(`Hey, my name is ${name}`); 
  }; 
  //Exposing the variables 
  return { 
    callSayName: (name) => sayName(name), 
  }; 
})(); 
//Accessing exposed methods 
foo.callSayName("Bar");

El bloc de codi anterior és un exemple de com es van crear els mòduls abans de la introducció dels mòduls JavaScript natius.

El bloc de codi anterior conté un IIFE. L'IIFE conté una funció que fa accessible tornant-la. Totes les variables declarades a l'IIFE estan protegides de l'àmbit global. Així, el mètode ( dirNom ) només és accessible a través de la funció pública, trucaSayName .

Observeu que l'IIFE es desa en una variable, foo . Això és degut a que, sense una variable que apunti a la seva ubicació a la memòria, les variables seran inaccessibles després de l'execució de l'script. Aquest patró és possible a causa de Tancaments de JavaScript .

El sistema de mòduls CommonJS

El sistema de mòduls CommonJS és un format de mòdul definit pel grup CommonJS per resoldre problemes d'abast de JavaScript executant cada mòdul al seu espai de noms.

El sistema de mòduls CommonJS funciona forçant els mòduls a exportar explícitament les variables que volen exposar a altres mòduls.

Aquest sistema de mòduls va ser creat per JavaScript del costat del servidor (Node.js) i, com a tal, no és compatible per defecte als navegadors.

Per implementar mòduls CommonJS al vostre projecte, primer heu d'inicialitzar NPM a la vostra aplicació executant:

com esborra una pàgina addicional en word

npm init -y

Les variables exportades seguint el sistema de mòduls CommonJS es poden importar així:

//randomModule.js 
//installed package 
const installedImport = require("package-name"); 
//local module 
const localImport = require("/path-to-module");

Els mòduls s'importen a CommonJS mitjançant l' requereixen declaració, que llegeix un fitxer JavaScript, executa el fitxer de lectura i retorna el fitxer exportacions objecte. El exportacions L'objecte conté totes les exportacions disponibles al mòdul.

Podeu exportar una variable seguint el sistema de mòduls CommonJS mitjançant exportacions amb nom o exportacions per defecte.

Exportacions anomenades

Les exportacions amb nom són exportacions identificades pels noms que se'ls van assignar. Les exportacions amb nom permeten múltiples exportacions per mòdul, a diferència de les exportacions predeterminades.

Per exemple:

//main.js 
exports.myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
exports.anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

Al bloc de codi anterior, esteu exportant dues funcions amb nom ( myExport i una altra exportació ) adjuntant-los al exportacions objecte.

De la mateixa manera, podeu exportar les funcions de la següent manera:

const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 
module.exports = { 
  myExport, 
  anotherExport, 
};

Al bloc de codi anterior, configureu el exportacions objecte a les funcions anomenades. Només podeu assignar el exportacions objecte a un objecte nou a través del mòdul objecte.

El vostre codi generaria un error si intenteu fer-ho d'aquesta manera:

//wrong way 
exports = { 
  myExport, 
  anotherExport, 
};

Hi ha dues maneres d'importar exportacions amb nom:

com fer doble flux en contracció

1. Importeu totes les exportacions com un sol objecte i accediu-hi per separat mitjançant la notació de punts .

Per exemple:

//otherModule.js 
const foo = require("./main"); 
foo.myExport(); 
foo.anotherExport();

2. Desestructurar les exportacions del exportacions objecte.

Per exemple:

//otherModule.js 
const { myExport, anotherExport } = require("./main"); 
myExport(); 
anotherExport();

Una cosa és habitual en tots els mètodes d'importació, s'han d'importar amb els mateixos noms amb què s'han exportat.

Exportacions per defecte

Una exportació predeterminada és una exportació identificada amb qualsevol nom que trieu. Només podeu tenir una exportació predeterminada per mòdul.

Per exemple:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
module.exports = Foo;

Al bloc de codi anterior, esteu exportant una classe ( Foo ) reassignant el exportacions oposar-s'hi.

La importació d'exportacions predeterminades és similar a la d'importació d'exportacions amb nom, excepte que podeu utilitzar qualsevol nom que vulgueu per importar-les.

Per exemple:

//otherModule.js 
const Bar = require("./main"); 
const object = new Bar(); 
object.bar();

Al bloc de codi anterior, s'anomenava l'exportació predeterminada Bar , tot i que podeu utilitzar qualsevol nom que vulgueu.

El sistema de mòduls ES6

El sistema de mòduls ECMAScript Harmony, conegut popularment com a mòduls ES6, és el sistema de mòduls JavaScript oficial.

Els mòduls ES6 són compatibles amb navegadors i servidors, encara que necessiteu una mica de configuració abans d'utilitzar-los.

Als navegadors, heu d'especificar tipus com mòdul a l'etiqueta d'importació de l'script.

Així:

//index.html 
<script src="./app.js" type="module"></script>

A Node.js, heu de configurar tipus a mòdul en el teu package.json dossier.

Així:

//package.json 
"type":"module"

També podeu exportar variables mitjançant el sistema de mòduls ES6 mitjançant exportacions amb nom o exportacions per defecte.

Exportacions anomenades

De manera similar a les importacions amb nom als mòduls CommonJS, s'identifiquen pels noms que se'ls han assignat i permeten exportar múltiples per mòdul.

Per exemple:

//main.js 
export const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
export const anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

Al sistema de mòduls ES6, les exportacions amb nom s'exporten prefixant la variable amb el exportar paraula clau.

Les exportacions amb nom es poden importar a un altre mòdul a ES6 de la mateixa manera que CommonJS:

Desestructuració de les exportacions necessàries del exportacions objecte.
Importar totes les exportacions com un únic objecte i accedir-hi per separat mitjançant la notació de punts.

Aquí teniu un exemple de desestructuració:

quant d'espai al disc dur utilitza Windows 10

//otherModule.js 
import { myExport, anotherExport } from "./main.js"; 
myExport() 
anotherExport()

Aquí teniu un exemple d'importació de l'objecte sencer:

import * as foo from './main.js' 
foo.myExport() 
foo.anotherExport()

Al bloc de codi anterior, l'asterisc ( * ) significa 'tots'. El com paraula clau assigna el exportacions objecte a la cadena que la segueix, en aquest cas, foo .

Exportacions per defecte

De manera similar a les exportacions predeterminades a CommonJS, s'identifiquen amb qualsevol nom que trieu i només podeu tenir una exportació predeterminada per mòdul.

Per exemple:

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

Les exportacions predeterminades es creen afegint el per defecte paraula clau després de exportar paraula clau, seguida del nom de l'exportació.

La importació d'exportacions predeterminades és similar a la d'importació d'exportacions amb nom, excepte que podeu utilitzar qualsevol nom que vulgueu per importar-les.

Per exemple:

//otherModule.js 
import Bar from "./main.js";

Exportacions mixtes

L'estàndard del mòdul ES6 us permet tenir exportacions per defecte i exportacions amb nom en un mòdul, a diferència de CommonJS.

Per exemple:

//main.js 
export const myExport = function () { 
  console.log("This is another example of a named export"); 
}; 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

Importància dels mòduls

Dividir el vostre codi en mòduls no només els fa més fàcils de llegir, sinó que el fa més reutilitzable i també fàcil de mantenir. Els mòduls de JavaScript també fan que el vostre codi sigui menys propens a errors, ja que tots els mòduls s'executen en mode estricte de manera predeterminada.