Модули

Введение в модули

Последнее обновление: 19.11.2023

Модули позволяют организовать функционал в отдельные блоки, которые затем можно использовать в других приложениях.

Отличие модулей от обычных скриптов:

  • Для загрузки модулей применяется политика CORS. Это значит, что мы не можем просто кинуть в браузер html-страницу, которая подключает модуль. Модуль загружается с использованием протокола http/https. То есть страница html, которая загружает модуль, должна располагаться на каком-нибудь веб-сервере.

  • Модули всегда выполняются в режиме strict mode.

  • Модули по умолчанию загружаются асинхронно.

  • Модули загружаются и выполняются только один раз.

  • Модули позволяют использовать выражения await верхнего уровня без определения и вызова асинхронной функции.

  • Модули могут имортировать функционал из других модулей и, в свою очередь, экспортировать свою функциональность в другие модули.

  • Модули выполняются не в глобальном контексте, а в своей собственной области видимости. То есть переменные, константы, функции, классы и т.д., определенные внутри модуля, не доступны извне, пока они не будут явным образом экспортированы. А чтобы другой модуль мог их использовать, он должен их импортировать.

Если файл содержит выражения import или export, он рассматривается как модуль. Так, Чтобы сделать из простого скрипта модуль, достаточно добавить в файл:

export {};

Определение модуля. Экспорт.

Определим простейший модуль. Для этого создадим файл message.js, в котором определим следующий код:

export function sayHello() {
  console.log("Hello METANIT.COM");
}

Здесь определена обычная функция sayHello(), которая выводит некоторое сообщение на консоль. Но она определена с ключевым словом export, а это значит, что данный файл представляет модуль, а функцию sayHello() можно импортировать в другие модули.

Подключение модуля. Импорт

Теперь подключим эту функцию в другой файл. Для этого возьмем файл main.js:

import {sayHello} from "./message.js";
sayHello();

Для подключения функционала из другого модуля применяется ключевое слово import, после которого идут названия подключаемых компонентов. Все подключаемые из модуля компоненты помещаются в фигурные скобки: import {sayHello} - в данном случае подключается функция sayHello.

Затем после оператора from указывается модуль, из которого идет импорт. В данном случае указываем "./message.js". В данном случае предполагается что оба модуля - main.js и message.js будут находиться в одной папке.

Загрузка модулей

Для загрузки модулей определим в папке со скомпилированными файлами веб-страницу index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>METANIT.COM</title>
</head>
<body>
<script type="module" src="main.js"></script>
</body>
</html>

Для загрузки главного модуля приложения - main.js определяется элемент <script>, у которого устанавливается атрибут type="module".

Загрузка модулей производится через AJAX, поэтому скомпилированные модули должны быть размещены на веб-сервере. То есть у нас не получится просто кинуть страницу в веб-браузер и загрузить на нее модули. Такая веб-страница должна быть размещена на веб-сервере. Поэтому прежде всего надо определиться с веб-сервером. Веб-сервер может быть любым. В данном случае воспользуемся самым простым вариантом - Node.js. Но опять же вместо node.js это может быть любая другая технология сервера - php, asp.net, python и т.д. либо какой-то определенный веб-сервер типа Apache или IIS.

Итак, создадим в папке с файлами модулей файл сервера. Пусть он будет называться server.js и будет иметь следующий код:

const http = require("http");
const fs = require("fs");
  
http.createServer(function(request, response){
      
    // получаем путь после слеша
    let filePath = request.url.substring(1);
	if(filePath == "") filePath = "index.html";	
    fs.readFile(filePath, function(error, data){
              
        if(error){
            response.statusCode = 404;
            response.end("Resourse not found!");
        }   
        else{
			if(filePath.endsWith(".js")) response.setHeader("Content-Type", "text/javascript");
            response.end(data);
        }
    });
}).listen(3000, function(){
    console.log("Server started at 3000");
});

Это самый примитивный сервер, который отдает пользователю статические файлы. Для создания сервера применяется функция http.createServer(), а для считывания и отправки файлов - функция fs.readFile(). Если имя файла не указано, то отправляется файл index.html. Сервер будет запускаться по адресу http://localhost:3000/

Стоит отметить, что при отправке модулей js нам надо устанавливать mime-тип отправляемого контента в "text/javascript":

if(filePath.endsWith(".js")) response.setHeader("Content-Type", "text/javascript");

Структура финального проекта:

Определение модулей JavaScript

Теперь запустим сервер с помощью команды

node server.js
Загрузка модулей ES2015 в JavaScript и Node.js

После запуска сервера мы можем перейти в браузере по адресу http://localhost:3000, нам отобразится страница, а в консоли браузера мы сможем увидеть результат работы модуля main.js:

Загрузка и выполнение модулей в JavaScript и Node.js

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850