Модули в JavaScript (ES6)
В программировании всегда была необходимость делить один большой кусок кода на несколько маленьких, на более-менее крупных проектах. Так вот, модули - это просто маленькие куски JavaScript кода. Стандарт ES6 сделал использование модулей очень удобным, хотя такая возможность организации кода, существовала и раньше.
В больших приложениях, самый лучший способ организации кода, является разбиение его на небольшие файлы. Каждый файл формируется по принципу выполнения какой-нибудь функциональности или с целью группировки однотипных данных. Каждый файл отвечает за определенную часть программы. В дальнейшем все это собирается в один проект. Модульная структура основана на экспорте и импорте из одного файла в другой.
Экспорт
Ключевое слово export можно ставить перед объявлением переменных, функций и классов. Так мы экспортируем их значения в другие модули. Самое главное, чтобы у всех сущностей были свои уникальные имена. Записывать можно двумя вариантами.
Пример экспорта переменных (ES6)
Перед тем, чем что-то экспортировать, ставим ключевое слово export. Затем указывает то, что нужно экспортировать, например переменную modul_x со значением 10.
// экспорт переменной, способ 1
export let modul_x = 10;
Сначала объявляем переменную modul_x, присваиваем ей значение 10. После ключевого слова export, внутри фигурных скобок помещаем переменную, которую хотим экспортировать.
// экспорт переменной, способ 2
let modul_x = 10;
export {modul_x};
Пример экспорта классов (ES6)
export class Brand {
constructor(smartphone) {
this.smartphone = smartphone
}
}
Пример экспорта функций (ES6)
export function goToWork() {
console.log('I am worker!')
}
Делаем экспорт сразу нескольких объектов
class Brand {
constructor(smartphone) {
this.smartphone = smartphone
}
}
function goToWork() {
console.log('I am worker!')
}
export {Brand, goToWork};
Переименование экспортируемых объектов
При помощи ключевого слова as можно переименовывать экспортируемые объекты. Переменная one будет экспортирована под именем first, а two - под именем second.
export {one as first, two as second};
Экспорт по умолчанию
Экспорт по умолчанию может быть только один. Например экспортируем по умолчанию функцию sayHello. Когда полезно использовать экспорт по умолчанию? Если я хочу экспортировать только одно значение.
export default class {
constructor(user, pass) {
this.user = user;
this.pass = pass;
}
};
Импорт
В файле, куда будет происходить импорт, появятся локальные переменные first и second. После ключевого слова from, указывается имя файла, откуда происходит импорт.
import {first, second} from './main.js'
Импортированные сущности в файлик main, можно сразу же использовать.
console.log(`${first} and ${second}`);
Переименование при импорте
Делая импорт, можно на ходу переименовывать импортируемые объекты. Обычно так делают, когда импортируется какое-то длинное название, с которым неудобно будет работать.
import {first as one} from './main.js';
Также можно импортировать абсолютно все, что находится в экспортном файле. Для этого, нужно поставить звездочку и придумать свое ключевое слово наиболее подходящее по смыслу.
import * as serial from './main.js';
Заключение
JavaScript изначально был задуман, как простой язык программирования для веб-дизайнеров, чтобы добавить минимальную интерактивность на сайты. Именно поэтому JavaScript один из немногих языков, который появился без поддержки модулей. Но по мере усложнения проектов, JavaScript не стоял на месте, а шел в ногу со временем и наконец добрался до модулей в ES6.
-
Создано 04.09.2020 10:47:57
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.