En introduktion till modulsystem i JavaScript

En introduktion till modulsystem i JavaScript

Konceptet med moduler kommer från det modulära programmeringsparadigmet. Detta paradigm föreslår att mjukvara ska vara sammansatt av separata, utbytbara komponenter som kallas 'moduler' genom att bryta ner programfunktioner i fristående filer som kan fungera separat eller kopplade i en applikation.





MAKEUSE AV DAGENS VIDEO

En modul är en fristående fil som kapslar in kod för att implementera viss funktionalitet och främja återanvändbarhet och organisation.



Här kommer du att täcka modulsystemen som används i JavaScript-applikationer, inklusive modulmönstret, CommonJS-modulsystemet som används i de flesta Node.js-applikationer och ES6 Module-systemet.





varför använder krom så mycket cpu

Modulmönstret

Innan introduktionen av inbyggda JavaScript-moduler användes moduldesignmönstret som ett modulsystem för att omfånga variabler och funktioner till en enda fil.

Detta implementerades med omedelbart anropade funktionsuttryck, populärt kända som IIFEs. En IIFE är en funktion som inte kan återanvändas som körs så snart den skapas.



Här är den grundläggande strukturen för en IIFE:

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

Kodblocket ovan beskriver IIFE:er som används i tre olika sammanhang.



IIFE:er användes för att variabler som deklareras inuti en funktion är scoped till funktionen, vilket gör dem endast tillgängliga i funktionen, och eftersom funktioner låter dig returnera data (gör dem offentligt tillgängliga).

Till exempel:



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

Kodblocket ovan är ett exempel på hur moduler skapades innan introduktionen av inbyggda JavaScript-moduler.

Kodblocket ovan innehåller en IIFE. IIFE innehåller en funktion som den gör tillgänglig genom att returnera den. Alla variabler som deklareras i IIFE är skyddade från den globala räckvidden. Alltså metoden ( säg Namn ) är endast tillgänglig via den offentliga funktionen, callSayName .

Observera att IIFE sparas i en variabel, foo . Detta beror på att, utan att en variabel pekar på dess plats i minnet, kommer variablerna att vara otillgängliga efter att skriptet körts. Detta mönster är möjligt pga JavaScript-stängningar .

CommonJS-modulsystemet

CommonJS-modulsystemet är ett modulformat som definieras av CommonJS-gruppen för att lösa problem med JavaScript-omfattning genom att exekvera varje modul i dess namnområde.

CommonJS-modulsystemet fungerar genom att tvinga moduler att explicit exportera variabler som de vill exponera till andra moduler.

Detta modulsystem skapades för JavaScript på serversidan (Node.js) och, som sådan, stöds inte som standard i webbläsare.

För att implementera CommonJS-moduler i ditt projekt måste du först initiera NPM i din applikation genom att köra:

npm init -y

Variabler som exporteras efter CommonJS-modulsystemet kan importeras så här:

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

Moduler importeras i CommonJS med hjälp av behöva uttalande, som läser en JavaScript-fil, kör läsfilen och returnerar export objekt. De export objektet innehåller alla tillgängliga exporter i modulen.

Du kan exportera en variabel efter CommonJS-modulsystemet med antingen namngivna exporter eller standardexporter.

Namngivna exporter

Namngivna exporter är exporter som identifieras av de namn de tilldelats. Namngivna exporter tillåter flera exporter per modul, till skillnad från standardexporter.

Till exempel:

//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"); 
};

I kodblocket ovan exporterar du två namngivna funktioner ( myExport och annan Export ) genom att fästa dem på export objekt.

På samma sätt kan du exportera funktionerna så här:

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

I kodblocket ovan ställer du in export objekt mot de namngivna funktionerna. Du kan bara tilldela export objekt till ett nytt objekt genom modul objekt.

Din kod skulle ge ett felmeddelande om du försökte göra det på detta sätt:

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

Det finns två sätt att importera namngivna exporter:

1. Importera alla exporter som ett enda objekt och få tillgång till dem separat med hjälp av punktnotationen .

Till exempel:

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

2. Destrukturera exporten från export objekt.

Till exempel:

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

En sak är gemensam i alla metoder för import, de måste importeras med samma namn som de exporterades med.

Standardexporter

En standardexport är en export som identifieras med valfritt namn. Du kan bara ha en standardexport per modul.

Till exempel:

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

I kodblocket ovan exporterar du en klass ( Foo ) genom att tilldela om export invända mot det.

Att importera standardexporter liknar att importera namngivna exporter, förutom att du kan använda valfritt namn för att importera dem.

Till exempel:

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

I kodblocket ovan namngavs standardexporten Bar , även om du kan använda valfritt namn.

ES6-modulsystemet

ECMAScript Harmony-modulsystem, populärt känt som ES6-moduler, är det officiella JavaScript-modulsystemet.

ES6-moduler stöds av webbläsare och servrar, även om du kräver lite konfiguration innan du använder dem.

I webbläsare måste du ange typ som modul i skriptimporttaggen.

Såhär:

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

I Node.js måste du ställa in typ till modul i ditt package.json fil.

Såhär:

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

Du kan också exportera variabler med ES6-modulsystemet med antingen namngivna exporter eller standardexporter.

hur man laddar ner pokemon på iphone

Namngivna exporter

I likhet med namngivna importer i CommonJS-moduler identifieras de av namnen de tilldelades och tillåter flera exporter per modul.

Till exempel:

//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"); 
};

I ES6-modulsystemet exporteras namngivna exporter genom att prefixet för variabeln exportera nyckelord.

Namngivna exporter kan importeras till en annan modul i ES6 på samma sätt som CommonJS:

  • Destrukturering av den nödvändiga exporten från export objekt.
  • Importera alla exporter som ett enda objekt och åtkomst till dem separat med hjälp av punktnotationen.

Här är ett exempel på destrukturering:

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

Här är ett exempel på hur du importerar hela objektet:

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

I kodblocket ovan visas asterisken ( * ) betyder 'alla'. De som nyckelordet tilldelar export invända mot strängen som följer den, i det här fallet, foo .

Standardexporter

I likhet med standardexporter i CommonJS identifieras de med valfritt namn och du kan bara ha en standardexport per modul.

Till exempel:

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

Standardexporter skapas genom att lägga till standard nyckelord efter exportera nyckelord, följt av namnet på exporten.

Att importera standardexporter liknar att importera namngivna exporter, förutom att du kan använda valfritt namn för att importera dem.

Till exempel:

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

Blandad export

ES6-modulstandarden låter dig ha både standardexporter och namngivna exporter i en modul, till skillnad från CommonJS.

Till exempel:

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

Vikten av moduler

Att dela upp din kod i moduler gör dem inte bara lättare att läsa utan det gör den mer återanvändbar och även underhållbar. Moduler i JavaScript gör också din kod mindre felbenägen, eftersom alla moduler körs i strikt läge som standard.