Module
Introducere în module
Modulele permit organizarea funcționalităților în blocuri separate, care apoi pot fi utilizate în alte aplicații.
Diferența dintre module și scripturi obișnuite:
- Pentru încărcarea modulelor se aplică politica CORS. Asta înseamnă că nu putem pur și simplu să aruncăm o pagină HTML în browser care să conecteze un modul. Modulul este încărcat folosind protocolul http/https. Adică, pagina HTML care încarcă modulul trebuie să fie amplasată pe un server web
- Modulele sunt executate întotdeauna în modul strict mode
- Modulele sunt încărcate asincron, în mod implicit
- Modulele sunt încărcate și executate doar o singură dată
- Modulele permit utilizarea expresiilor await la nivelul superior fără a defini și apela o funcție asincronă
- Modulele pot importa funcționalități din alte module și, la rândul lor, pot exporta funcționalitatea lor în alte module
- Modulele nu sunt executate în contextul global, ci în propriul lor domeniu de vizibilitate. Asta înseamnă că variabilele, constantele, funcțiile, clasele etc., definite în interiorul unui modul, nu sunt accesibile din exterior, până când nu sunt exportate explicit. Și pentru ca un alt modul să le poată utiliza, trebuie să le importe
Dacă un fișier conține expresii import sau export, este considerat un modul. Astfel, pentru a transforma un simplu script într-un modul, este suficient să adăugați în fișier:
export {};Definirea unui modul - Export
Definim cel mai simplu modul. Pentru asta, creăm fișierul message.js, în care definim următorul cod:
export function sayHello(){
console.log("Hello FDC.COM");
}Aici este definită funcția obișnuită sayHello(), care afișează un anumit mesaj în consolă. Dar este definită cu cuvântul cheie export, ceea ce înseamnă că acest fișier reprezintă un modul, iar funcția sayHello() poate fi importată în alte module.
Conectarea modulului - Import
Acum vom conecta această funcție într-un alt fișier. Pentru asta, luăm fișierul main.js:
import {sayHello} from "./message.js";
sayHello();Pentru conectarea funcționalității din alt modul se utilizează cuvântul cheie import, după care urmează numele componentelor conectate. Toate componentele importate din modul sunt plasate între acolade: import {sayHello} - în acest caz, este conectată funcția sayHello.
Apoi, după operatorul from se specifică modulul din care se face importul. În acest caz, specificăm "./message.js". Se presupune că ambele module - main.js și message.js vor fi situate în același folder.
Încărcarea modulelor
Pentru încărcarea modulelor, definim în folderul cu fișierele compilate o pagină web index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<script type="module" src="main.js"></script>
</body>
</html>Pentru încărcarea modulului principal al aplicației - main.js se definește elementul <script>, căruia i se setează atributul type="module".
Încărcarea modulelor se face prin AJAX, deci modulele compilate trebuie să fie amplasate pe un server web. Deci, nu putem pur și simplu să aruncăm pagina în browser și să încărcăm modulele pe ea. O astfel de pagină web trebuie să fie amplasată pe un server web.
Prin urmare, în primul rând trebuie să decidem asupra serverului web. Serverul web poate fi oricare. În acest caz, vom folosi cea mai simplă opțiune - Node.js. Dar, din nou, în loc de Node.js, poate fi orice altă tehnologie de server - PHP, ASP.NET, Python etc., sau un anumit server web, cum ar fi Apache sau IIS.
Deci, creăm în folderul cu fișierele modulelor un fișier server. Să îl numim server.js și să aibă următorul cod:
const http = require("http");
const fs = require("fs");
http.createServer(function(request, response){
// obținem calea după slash
let filePath = request.url.substring(1);
if(filePath == "") filePath = "index.html";
fs.readFile(filePath, function(error, data){
if(error){
response.statusCode = 404;
response.end("Resursa nu a fost găsită!");
}
else{
if(filePath.endsWith(".js")) response.setHeader("Content-Type", "text/javascript");
response.end(data);
}
});
}).listen(3000, function(){
console.log("Serverul a fost pornit la 3000");
});Acesta este cel mai primitiv server, care oferă utilizatorului fișiere statice. Pentru crearea serverului se utilizează funcția http.createServer(), iar pentru citirea și trimiterea fișierelor - funcția fs.readFile(). Dacă numele fișierului nu este specificat, atunci se trimite fișierul index.html. Serverul va fi lansat la adresa http://localhost:3000/
Este de remarcat că, atunci când trimitem module js, trebuie să setăm tipul mime al conținutului trimis ca "text/javascript":
if(filePath.endsWith(".js")) response.setHeader("Content-Type", "text/javascript");Structura proiectului final:
Acum vom lansa serverul folosind comanda:
node server.js
După lansarea serverului, putem accesa în browser adresa http://localhost:3000, ne va fi afișată pagina, iar în consola browserului vom putea vedea rezultatul funcționării modulului main.js:
