Вызов функции из другого js-файла: работа с first.js и second.js

Быстрый ответ

Для вызова функции, расположенной в другом файле с расширением .js, вам нужно подключить оба эти файлы на веб-странице. Используйте для этого теги <script>, соблюдая правильную последовательность: сначала подключается файл, в котором объявлена необходимая функция, а затем — файл, в котором эта функция будет вызываться.

<script src="first.js"></script> <!-- Здесь определена функция `fn1()` -->
<script src="second.js"></script> <!-- Здесь происходит вызов функции `fn1()` -->

Вызов функции в файле second.js можно сделать так:

fn1(); // Функция `fn1()` объявлена в first.js

Чтобы гарантировать, что функция будет доступна и DOM будет готов, оберните вызов функции в обработчик события DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
  fn1(); // Теперь мы можем быть уверены, что функцию fn1() можно вызвать
});

Делаем функции глобальными

В файле first.js вы можете сделать функцию глобальной, присвоив её объекту window: window.fn1 = function() {}. После этого эта функция становится доступной в других скриптах, в том числе в second.js, при условии, что first.js был подключен ранее.

Модули ES6: преимущества передачи функций

Для более удобного взаимодействия с кодом используйте ES6 модули. Вы можете экспортировать функции из first.js и затем импортировать их в second.js.

first.js:

export function fn1() {
  // Функциональный код
}

В файле second.js импортируйте функцию fn1:

import { fn1 } from './first.js'; // Функция fn1 теперь доступна 

fn1(); // Теперь функция вызывается

При работе с модулями не забывайте указывать атрибут type="module" для тегов script:

<script type="module" src="second.js"></script>

Подробнее об этом расскажет наш спикер на видео

Обработка динамических импортов

Используя динамические импорты, будьте готовы к возможным ошибкам или проблемам с загрузкой. Не стесняйтесь использовать блок try...catch и другие способы обработки исключений.

Уменьшаем количество глобальных функций

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

Визуализация

Представьте, что в файле first.js вам нужно включить свет в комнате [💡], нажав на кнопку [🔘]. Для этого нужно импортировать соответствующую функцию из second.js.

import { turnOnLight } from 'second.js'; // Импортируем функцию включения света

Теперь, когда вы нажмёте на кнопку:

// В 'first.js'
turnOnLight(); // И в комнате включается свет! 💡

Импорт создаёт между компонентами связь:

🔘 → 🎛️ → 💡

Важность порядка скриптов и корректных путей

Убедитесь, что все браузеры поддерживают ES6 модули и все пути к файлам указаны правильно. В противном случае работа скриптов может быть нарушена.

Глобальная поддержка

Использование модулей способствует поддержке и развитию проекта на глобальном уровне. При этом инструменты сборки позволяют оптимизировать процесс разработки.

Обращение к глобальным переменным

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

Пример использования экспорта и импорта

Ниже представлен пример того, как можно экспортировать функцию из first.js и затем импортировать её в second.js:

first.js:

export const backstagePass = () => {
  console.log('Доступ открыт!'); // Функция выполнена
};

second.js:

import { backstagePass } from './first.js';

backstagePass(); // Вызываем функцию

Полезные материалы

1. Модули JavaScript – MDN — Полное руководство по модулям JS.
2. export – MDN — Информация о синтаксисе и использовании экспорта в ES6.
3. Как включить JavaScript файл в другой JavaScript файл? – Stack Overflow — Статья о подключении JS-файлов.
4. Модули, введение – javascript.info — Введение в модули JavaScript.
5. Модули: модули CommonJS – документация Node.js — Руководство по модулям CommonJS от Node.js.
6. Понимание модулей ES6 — SitePoint — Подробные примеры работы с модулями ES6.
7. Модули ES6 подробно – ponyfoo.com — Глубокое изучение модулей ES6.