Как загрузить один файл 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.

    });
});

Использование const dataName =require('./fileName.js');

Другие вопросы по тегам