Как загрузить один файл JavaScript из другого?
Как загрузить один файл JavaScript из другого файла JavaScript, например CSS? В CSS мы используем write @import url("mycss.css");
,
Есть ли способ сделать это в JavaScript?
5 ответов
Да. Если вы хотите в чистом JavaScript, вы должны динамически создавать script
и добавьте его в документ.
Да. Если вы используете библиотеку jQuery, вы можете использовать $.getScript
метод.
$.getScript("another_script.js");
В Javascript нет функции / метода @import-ish, но вы можете просто добавить скрипт в <head>
пометить так:
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = '/path/to/js/file';
document.getElementsByTagName('head')[0].appendChild(newScript);
Или, как Эдгар упоминал прямо передо мной, вы можете использовать jQuery.
Просто потому, что никто еще не упомянул об этом, есть еще один вариант, который не требует каких-либо модных библиотек или хитрого кодирования, document.write
, В принципе, это выглядело бы так, хотя см. Ниже предостережение:
document.write('<script src="myscript.js" type="text/javascript"></script>');
Это будет выполнено после полного разбора тега script, и если вы поместите свой тег script в заголовок, новый тег script также будет в заголовке, сразу после того, как выполняется. Позаботьтесь о том, чтобы выполнить его напрямую, а не когда документ был загружен (как в $(function(){})
Перезвоните. Это то, что я использую:
(function(){
function load(script) {
document.write('<'+'script src="'+script+'" type="text/javascript"><' + '/script>');
}
load("script1.js");
load("script2.js");
load("etc.js");
})();
Функция включения просто не должна загрязнять глобальное пространство имен.
Предостережение (и почему "скрипт" разбит выше) заключается в том, что в теге скрипта могут отсутствовать конечные теги скрипта, анализатор HTML не знает, что он является частью скрипта. Есть другой вопрос на эту тему.
Сам Javascript не предоставляет никакой помощи с модульностью, кроме возможности eval
строка. Но это достаточно распространенная потребность в том, что большинство крупных инфраструктур javascript предлагают свои собственные решения, и в последнее время были предприняты попытки стандартизировать эти API в проекте http://requirejs.org/. Если вы используете фреймворк, такой как Dojo или jQuery, вам, вероятно, лучше всего научиться использовать их возможности, но если нет, requirejs
это легкий автономный инструмент. Вы в основном просто добавляете
<script data-main="scripts/main" src="scripts/require.js"></script>
на ваш <head>
раздел, а затем поместите свой собственный JavaScript в некоторый код обертки, как это (украдено из require.js
сайт):
require(["helper/util"], function() {
//This function is called when scripts/helper/util.js is loaded.
require.ready(function() {
//This function is called when the page is loaded
//(the DOMContentLoaded event) and when all required
//scripts are loaded.
});
});