Импорт JS: основные принципы и примеры

Сделай рерайт текста для публикации на сайте с html тегами, там где код сделать теги для highlight.js

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

Для использования ключевого слова import в JavaScript мы должны использовать модульную систему, такую как CommonJS или ECMAScript модуль (ESM). Давайте рассмотрим примеры использования импорта в JavaScript с помощью ESM.

Предположим, у нас есть два модуля: moduleA.js и moduleB.js. Давайте начнем с moduleA.js:

export function sayHello() {
  console.log("Привет, мир!");
}

export const favoriteNumber = 42;

export default class Person {
  constructor(name) {
    this.name = name;
  }
}

В модуле moduleA.js у нас есть три экспорта - функция sayHello, переменная favoriteNumber и класс Person (который экспортируется по умолчанию).

Теперь давайте рассмотрим, как мы можем импортировать эти экспорты в модуле moduleB.js:

import { sayHello, favoriteNumber } from './moduleA.js';
import Person from './moduleA.js';

sayHello(); // Выведет "Привет, мир!"
console.log(favoriteNumber); // Выведет 42

const john = new Person("John");
console.log(john.name); // Выведет "John"

В модуле moduleB.js мы импортируем функцию sayHello и переменную favoriteNumber из moduleA.js, используя фигурные скобки и указывая путь к модулю с помощью относительного пути "./". Затем мы импортируем класс Person из moduleA.js, используя ключевое слово default и также указывая путь к модулю.

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

Это основы использования ключевого слова import в JavaScript. Импорт помогает нам организовывать наш код в виде модулей и повышает его читаемость и поддерживаемость. Но импорт - это только одна из многих возможностей модульной системы JavaScript. Например, мы также можем использовать экспорт по умолчанию и именованный экспорт вместе, а также импортировать модули из сторонних библиотек.

Ознакомившись с основами импорта в JavaScript, вы можете использовать эту функциональность для организации своего кода и улучшения его модульности. Важно отметить, что модули JavaScript еще не поддерживаются во всех окружениях, поэтому при использовании модульной системы важно проверить поддержку в нужных вам браузерах или окружении выполнения.

Надеюсь, эта информация поможет вам разобраться с использованием ключевого слова import в JavaScript!