Существует ли в JavaScript что-либо подобное @import
в CSS, что позволяло бы включать файл JavaScript в другой файл JavaScript?
Перевод вопроса «Include a JavaScript file in another JavaScript file?» @Alec Smart.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуСуществует ли в JavaScript что-либо подобное @import
в CSS, что позволяло бы включать файл JavaScript в другой файл JavaScript?
Перевод вопроса «Include a JavaScript file in another JavaScript file?» @Alec Smart.
В JavaScript нет операторов import
, include
или require
. (на самом деле, с 2015-го года есть в модулях ES6) Однако в JavaScript существуют другие способы включить внешний JavaScript-код.
С помощью Ajax вы можете загрузить дополнительный сценарий и затем воспользуйтесь eval
. Это самый простой способ, но он пригоден только при работе на вашем собственном домене (причина – модель безопасности JavaScript sandbox security model). Использование eval
также открывает двери перед «багами» и «хаками».
Библиотека jQuery предоставляет возможность загрузки одной строкой:
$.getScript("my_lovely_script.js", function(){
alert("Сценарий загружен, но необязательно выполнен.");
});
Добавьте тег script c URL сценария в HTML. Это идеальное решение для того чтобы избежать вычислительных затрат появляющихся при работе с jQuery. Сценарий может находиться на другом сервере.
Тег <script>
можно вставить либо в раздел <head>
веб-страницы, либо перед закрывающимся тегом </body>
.
Оба эти решения обсуждались и иллюстрировались в статье Безумие JavaScript: загрузка динамических сценариев.
Теперь об одной серьёзной проблеме, связанной с удалённой загрузкой кода, о которой нельзя забывать. Современные веб-браузеры загружают файл и продолжают исполнение текущего сценария, так как они загружают всё асинхронно в целях повышения быстродействия (это справедливо как для jQuery, так и для ручного метода загрузки динамического сценария.)
Это значит, что если вы воспользуетесь подобными приёмами в чистом виде, вы не сможете использовать только что загруженный код в строке, следующей за командой загрузки, потому что он всё ещё будет «подгружаться».
Например: my_lovely_script.js
содержит MySuperObject
:
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
Затем вы обновляете страницу, нажав F5. И всё работает! Непонятно...
Как же быть?
Вы можете использовать небольшую хитрость (см. ссылку, которую я давал ранее). Вкратце: при загрузке сценария он использует заданное событие для запуска функции обратного вызова. Таким образом, вы можете поместить весь код, использующий удалённую библиотеку, в функцию обратного вызова. Например:
function loadScript(url, callback)
{
// Добавляем тег сценария в head – как и предлагалось выше
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Затем связываем событие и функцию обратного вызова.
// Для поддержки большинства обозревателей используется несколько событий.
script.onreadystatechange = callback;
script.onload = callback;
// Начинаем загрузку
head.appendChild(script);
}
И затем код, который вы хотите использовать после загрузки сценария вы записываете в лямбда-функцию:
var myPrettyCode = function() {
// А здесь делайте, что хотите
};
Запускаем то, что получилось:
loadScript("my_lovely_script.js", myPrettyCode);
Учтите, что сценарий может выполняться после или до загрузки DOM — в зависимости от браузера и от наличия в коде строки script.async = false;
. Существует великолепная общая статья по загрузке в Javascript, в которой это рассматривается.
Ещё одно решение – объединить два файла в один. Это можно сделать с минификацией, что позволит получить на выходе единый JavaScript-файл минимального размера, который будет делать всё нам необходимое.
Перевод ответа «Include a JavaScript file in another JavaScript file?» @e-satis.