Меню

Импорт/Экспорт в javascript

09.05.2018 - java script, ЯП
Импорт/Экспорт в javascript

Модули в JS

Есть соглашение, что файлы с модулями в JS нужно называть с большой буквы.

Начнем с экспорта по умолчанию:
Допустим нам нужно экспортировать строку 😏
Здесь мы не указываем ни константу, ни переменную.

Экспорт по дефаулту:

export default 'I am an export string.';

Этот тип экспорта используется, когда нам нужно экспортировать какую-нибудь одну штуку из модуля.

Теперь, если мы захотим импортировать это в другом файле, то мы сделаем так:

Мы пишем ключевое слово import потом придумываем имя переменной для импортируемых данных, например str, затем пишем ключевое слово from и указываем путь, откуда будем импортировать. При этом нам не нужно указывать раширения файла.

import str from './models/Search'

Multiple export (Множественный экспорт)

Теперь, если мы хотим экспортировать несколько штук 🙊 с одного модуля, тогда нам нужно использовать именованный экспорт (named export).

Для этого в файле с которого мы экспортируем, мы опять начинаем с ключевого слова export. Однако следующим шагом вместо ключевого слова default мы указываем константу или переменную, которую мы хотим от сюда экспортировать.
Представим, что мы хотим экспортировать функцию add, функцию multiply и константу ID:

export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export const ID = 23;

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

import {add, multiply, ID} from './views/searchView';

Т.е. в данном случае мы импортировали только две функции и указали те же имена, что мы указывали при экспорте. Именно поэтому этот вид экспорта называется именованный.
Но если мы хотим использовать другие имена переменных, то нужно использовать ключевое слово as:

import {add as a, multiply as b, ID} from './views/searchView';

3й способ импортировать данные

Допустим мы хотим импортировать все данные из какого либо места, тогда мы указываем *

import * as searchView from './views/searchView';

И теперь, когда нам нужно использовать какую либо херовину из импортированных данных, то мы вызываем как метод объекта, например searchView.add()

console.log(${searchView.add(2,3)});
Метки: , , ,

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *