Курс по программированию на JavaScript

Урок 19: Модули ES6

Модули ES6 позволяют организовывать код в отдельные файлы и использовать их повторно. В этом уроке мы рассмотрим, как использовать экспорт и импорт модулей, а также преимущества использования модулей.

Экспорт и импорт модулей

Модули позволяют экспортировать переменные, функции и классы из одного файла и импортировать их в другой. Экспортировать можно с помощью ключевого слова export, а импортировать с помощью ключевого слова import.

Экспорт

Есть два способа экспорта: именованный экспорт и экспорт по умолчанию.

// Именованный экспорт
// file1.js
export const name = 'Alice';
export function greet() {
 console.log('Hello, ' + name);
}

// Экспорт по умолчанию
// file2.js
export default function() {
 console.log('This is the default export');
}

Импорт

Для импорта используется ключевое слово import. Именованный экспорт импортируется в фигурных скобках, а экспорт по умолчанию без них.

// Импорт именованного экспорта
// main.js
import { name, greet } from './file1.js';
greet(); // Hello, Alice

// Импорт экспорта по умолчанию
// main.js
import defaultFunction from './file2.js';
defaultFunction(); // This is the default export

Hello, Alice
This is the default export

В этом примере мы экспортируем переменную и функцию из file1.js и импортируем их в main.js. Также мы экспортируем функцию по умолчанию из file2.js и импортируем ее в main.js.

Преимущества использования модулей

Использование модулей имеет несколько преимуществ:

• Организация кода: Модули позволяют разделить код на логические части, что делает его более организованным и понятным.
• Повторное использование кода: Модули позволяют повторно использовать один и тот же код в разных частях приложения.
• Изоляция кода: Модули изолируют код, предотвращая конфликты переменных и функций в глобальной области видимости.
• Удобство тестирования: Модули упрощают тестирование кода, так как каждая часть кода может быть протестирована отдельно.

Пример использования модулей

Рассмотрим пример использования модулей для создания простого калькулятора.

// math.js
export function add(a, b) {
 return a + b;
}

export function subtract(a, b) {
 return a - b;
}

// main.js
import { add, subtract } from './math.js';

console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2

8
2

В этом примере мы создаем модуль math.js, который экспортирует функции сложения и вычитания. Затем мы импортируем эти функции в main.js и используем их для выполнения арифметических операций.

Упражнения

// stringUtils.js
export function capitalize(str) {
 return str.charAt(0).toUpperCase() + str.slice(1);
}

export function reverse(str) {
 return str.split('').reverse().join('');
}

// main.js
import { capitalize, reverse } from './stringUtils.js';

console.log(capitalize('hello')); // Hello
console.log(reverse('hello')); // olleh

Hello
olleh

// arrayUtils.js
export function sum(arr) {
 return arr.reduce((acc, val) => acc + val, 0);
}

export function average(arr) {
 return sum(arr) / arr.length;
}

// main.js
import { sum, average } from './arrayUtils.js';

let numbers = [1, 2, 3, 4, 5];
console.log(sum(numbers)); // 15
console.log(average(numbers)); // 3

15
3