Wprowadzenie do systemów modułowych w JavaScript

Wprowadzenie do systemów modułowych w JavaScript

Pojęcie modułów wywodzi się z paradygmatu programowania modułowego. Paradygmat ten sugeruje, że oprogramowanie powinno składać się z oddzielnych, wymiennych komponentów zwanych „modułami” poprzez rozbicie funkcji programu na samodzielne pliki, które mogą działać oddzielnie lub połączone w aplikacji.





MAKEUSEOF WIDEO DNIA

Moduł to samodzielny plik, który zawiera kod w celu zaimplementowania określonej funkcjonalności oraz promowania ponownego wykorzystania i organizacji.



Tutaj omówisz systemy modułów używane w aplikacjach JavaScript, w tym wzorzec modułów, system modułów CommonJS używany w większości aplikacji Node.js oraz system modułów ES6.





Wzorzec modułu

Przed wprowadzeniem natywnych modułów JavaScript, wzorzec projektowy modułu był używany jako system modułów do zawężenia zmiennych i funkcji do pojedynczego pliku.

Zostało to zaimplementowane przy użyciu natychmiast wywoływanych wyrażeń funkcyjnych, popularnie znanych jako IIFE. IIFE to funkcja, której nie można ponownie użyć, która jest uruchamiana natychmiast po utworzeniu.



Oto podstawowa struktura IIFE:

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

Powyższy blok kodu opisuje IIFE używane w trzech różnych kontekstach.



IIFE były używane, ponieważ zmienne zadeklarowane wewnątrz funkcji są objęte zakresem funkcji, dzięki czemu są dostępne tylko wewnątrz funkcji, a funkcje umożliwiają zwracanie danych (czyniąc je publicznie dostępnymi).

Na przykład:



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

Powyższy blok kodu jest przykładem tego, jak tworzono moduły przed wprowadzeniem natywnych modułów JavaScript.

Powyższy blok kodu zawiera IIFE. IIFE zawiera funkcję, którą udostępnia, zwracając ją. Wszystkie zmienne zadeklarowane w IIFE są chronione przed zasięgiem globalnym. Tak więc metoda ( powiedz Imię ) jest dostępna tylko poprzez funkcję publiczną, callSayName .

Zauważ, że IIFE jest zapisany w zmiennej, bla . Dzieje się tak, ponieważ bez zmiennej wskazującej jej lokalizację w pamięci zmienne będą niedostępne po uruchomieniu skryptu. Ten wzór jest możliwy dzięki Zamknięcia JavaScript .

System modułów CommonJS

System modułów CommonJS to format modułu zdefiniowany przez grupę CommonJS do rozwiązywania problemów z zakresem JavaScript poprzez wykonanie każdego modułu w jego przestrzeni nazw.

System modułów CommonJS działa wymuszając na modułach jawne eksportowanie zmiennych, które chcą udostępnić innym modułom.

Ten system modułowy został stworzony dla JavaScript po stronie serwera (Node.js) i jako taki nie jest domyślnie obsługiwany w przeglądarkach.

Aby zaimplementować moduły CommonJS w swoim projekcie, musisz najpierw zainicjować NPM w swojej aplikacji, uruchamiając:

npm init -y

Zmienne wyeksportowane po systemie modułu CommonJS można importować w następujący sposób:

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

Moduły są importowane w CommonJS za pomocą wymagać instrukcja, która odczytuje plik JavaScript, wykonuje odczytany plik i zwraca eksport obiekt. The eksport obiekt zawiera wszystkie dostępne eksporty w module.

jak zrobić obrysowany tekst w Photoshopie

Możesz wyeksportować zmienną zgodnie z systemem modułu CommonJS, używając eksportów nazwanych lub eksportów domyślnych.

Nazwane eksporty

Nazwane eksporty to eksporty identyfikowane przez przypisane im nazwy. Nazwane eksporty umożliwiają wiele eksportów na moduł, w przeciwieństwie do eksportów domyślnych.

Na przykład:

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

W powyższym bloku kodu eksportujesz dwie nazwane funkcje ( mójEksport oraz innyEksport ) dołączając je do eksport obiekt.

Podobnie możesz wyeksportować funkcje takie jak:

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

W powyższym bloku kodu ustawiasz eksport obiekt do nazwanych funkcji. Możesz przypisać tylko eksport sprzeciwić się nowemu obiektowi poprzez moduł obiekt.

Twój kod wygeneruje błąd, jeśli spróbujesz zrobić to w ten sposób:

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

Istnieją dwa sposoby importowania nazwanych eksportów:

1. Zaimportuj wszystkie eksporty jako pojedynczy obiekt i uzyskaj do nich dostęp oddzielnie za pomocą notacja z kropkami .

Na przykład:

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

2. Destrukturyzuj eksport z eksport obiekt.

Na przykład:

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

Jedna rzecz jest wspólna we wszystkich metodach importowania, muszą być importowane przy użyciu tych samych nazw, pod którymi zostały wyeksportowane.

Windows 10 rozpocznij wyszukiwanie nie działa

Domyślne eksporty

Eksport domyślny to eksport oznaczony dowolną wybraną nazwą. Możesz mieć tylko jeden domyślny eksport na moduł.

Na przykład:

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

W powyższym bloku kodu eksportujesz klasę ( bla ) poprzez ponowne przypisanie eksport sprzeciwić się temu.

Importowanie domyślnych eksportów jest podobne do importowania nazwanych eksportów, z tą różnicą, że do ich importowania można użyć dowolnej nazwy.

Na przykład:

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

W powyższym bloku kodu domyślny eksport został nazwany Bar , chociaż możesz użyć dowolnej nazwy.

System modułów ES6

System modułów ECMAScript Harmony, popularnie znany jako moduły ES6, jest oficjalnym systemem modułów JavaScript.

Moduły ES6 są obsługiwane przez przeglądarki i serwery, chociaż przed ich użyciem wymagana jest trochę konfiguracji.

W przeglądarkach musisz określić rodzaj jak moduł w tagu importu skryptu.

Tak jak:

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

W Node.js musisz ustawić rodzaj do moduł w Twoim pakiet.json plik.

Tak jak:

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

Można również eksportować zmienne za pomocą systemu modułów ES6, używając eksportów nazwanych lub eksportów domyślnych.

Nazwane eksporty

Podobnie jak nazwane importy w modułach CommonJS, są one identyfikowane przez przypisane im nazwy i umożliwiają wiele eksportów na moduł.

Na przykład:

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

W systemie modułu ES6 nazwane eksporty są eksportowane przez poprzedzenie zmiennej przedrostkiem eksport słowo kluczowe.

Nazwane eksporty można importować do innego modułu w ES6 w taki sam sposób jak CommonJS:

  • Destrukturyzacja wymaganego eksportu z eksport obiekt.
  • Importowanie wszystkich eksportów jako pojedynczego obiektu i uzyskiwanie do nich oddzielnego dostępu za pomocą notacji kropkowej.

Oto przykład destrukturyzacji:

jak wyjść z mediów społecznościowych 
//otherModule.js 
import { myExport, anotherExport } from "./main.js"; 
myExport() 
anotherExport()

Oto przykład importowania całego obiektu:

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

W powyższym bloku kodu gwiazdka ( * ) oznacza „wszystkie”. The jak słowo kluczowe przypisuje eksport obiekt do ciągu, który następuje po nim, w tym przypadku, bla .

Domyślne eksporty

Podobnie jak domyślne eksporty w CommonJS, są one identyfikowane przez dowolną wybraną nazwę i możesz mieć tylko jeden domyślny eksport na moduł.

Na przykład:

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

Domyślne eksporty są tworzone przez dodanie domyślna słowo kluczowe po eksport słowo kluczowe, po którym następuje nazwa eksportu.

Importowanie domyślnych eksportów jest podobne do importowania nazwanych eksportów, z tą różnicą, że do ich importowania można użyć dowolnej nazwy.

Na przykład:

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

Eksport mieszany

Standard modułu ES6 pozwala na posiadanie zarówno domyślnych, jak i nazwanych eksportów w jednym module, w przeciwieństwie do CommonJS.

Na przykład:

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

Znaczenie modułów

Podział kodu na moduły nie tylko ułatwia ich czytanie, ale także sprawia, że ​​można go ponownie wykorzystać i konserwować. Moduły w JavaScript sprawiają, że kod jest mniej podatny na błędy, ponieważ wszystkie moduły są domyślnie wykonywane w trybie ścisłym.