Как включить файл JavaScript в другой файл JavaScript? - PullRequest
Новая
       339

Как включить файл JavaScript в другой файл JavaScript?

4674 голосов
/ 04 июня 2009

Есть ли в JavaScript что-то похожее на @import в CSS, которое позволяет включать файл JavaScript в другой файл JavaScript?

Ответы [ 55 ]

37 голосов
/ 08 июля 2015

Вот обобщенная версия того, как Facebook делает это для их вездесущей кнопки «Нравится»: 

<script>
  var firstScript = document.getElementsByTagName('script')[0],
      js = document.createElement('script');
  js.src = 'https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js';
  js.onload = function () {
    // do stuff with your dynamically loaded script
    snowStorm.snowColor = '#99ccff';
  };
  firstScript.parentNode.insertBefore(js, firstScript);
</script>

Если это работает для Facebook, оно будет работать для вас.

Причина, по которой мы ищем первый элемент script вместо head или body, заключается в том, что некоторые браузеры не создают его в случае его отсутствия, но мы обязательно имеем элемент script - это один. Узнайте больше на http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/.

32 голосов
/ 13 ноября 2013

Если вы хотите использовать чистый JavaScript, вы можете использовать document.write. 

document.write('<script src="myscript.js" type="text/javascript"></script>');

Если вы используете библиотеку jQuery, вы можете использовать метод $.getScript. 

$.getScript("another_script.js");
25 голосов
/ 28 декабря 2010

Вы также можете собрать свои скрипты, используя PHP :

Файл main.js.php: 

<?php
    header('Content-type:text/javascript; charset=utf-8');
    include_once("foo.js.php");
    include_once("bar.js.php");
?>

// Main JavaScript code goes here
24 голосов
/ 14 июля 2013

Большинство представленных здесь решений предполагают динамическую загрузку. Вместо этого я искал компилятор, который собирает все зависимые файлы в один выходной файл. Так же, как препроцессоры Меньше / Sass работают с правилом CSS @import. Поскольку я не нашел ничего приличного в этом роде, я написал простой инструмент для решения этой проблемы.

Итак, вот компилятор, https://github.com/dsheiko/jsic,, который надежно заменяет $import("file-path") на запрошенное содержимое файла. Вот соответствующий плагин Grunt : https://github.com/dsheiko/grunt-jsic.

В основной ветке jQuery они просто объединяют атомарные исходные файлы в один, начиная с intro.js и заканчивая outtro.js. Это меня не устраивает, так как не обеспечивает гибкости при разработке исходного кода. Посмотрите, как это работает с jsic:

ЦСИ / main.js 

var foo = $import("./Form/Input/Tel");

ЦСИ / Форма / вход / Tel.js 

function() {
    return {
          prop: "",
          method: function(){}
    }
}

Теперь мы можем запустить компилятор: 

node jsic.js src/main.js build/mail.js

и получить объединенный файл

сборка / main.js 

var foo = function() {
    return {
          prop: "",
          method: function(){}
    }
};
20 голосов
/ 24 июля 2015

Если вы намерены загрузить файл JavaScript с использованием функций из импортированного / включенного файла , вы также можете определить глобальный объект и установить функции как элементы объекта. Например:

global.js 

A = {};

file1.js 

A.func1 = function() {
  console.log("func1");
}

file2.js 

A.func2 = function() {
  console.log("func2");
}

main.js 

A.func1();
A.func2();

Вам просто нужно быть осторожным, когда вы включаете скрипты в файл HTML. Порядок должен быть таким, как показано ниже: 

<head>
  <script type="text/javascript" src="global.js"></script>
  <script type="text/javascript" src="file1.js"></script>
  <script type="text/javascript" src="file2.js"></script>
  <script type="text/javascript" src="main.js"></script>
</head>
18 голосов
/ 24 марта 2013

Это должно сделать: 

xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);
17 голосов
/ 08 июня 2012

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

Я использую Звездочки (я не знаю, есть ли другие). Вы строите свой код JavaScript в отдельных файлах и включаете комментарии, которые обрабатываются механизмом Sprockets, как и включенные. Для разработки вы можете включить файлы последовательно, а затем для производства, чтобы объединить их ...

Смотри также:

14 голосов
/ 01 января 2015

Если вы используете Web Workers и хотите включить дополнительные сценарии в область работника, другие ответы о добавлении сценариев в тег head и т. Д. Не будут работать для вас. .

К счастью, веб-работники имеют собственную importScripts функцию , которая является глобальной функцией в веб-редакторе, встроенной в сам браузер, так как является частью спецификации .

В качестве альтернативы, в качестве второго наиболее высоко оцененного ответа на ваш вопрос выделяет , RequireJS также может обрабатывать в том числе скрипты внутри Web Worker (вероятно, вызывая сам importScripts, но с несколькими другие полезные функции).

14 голосов
/ 22 июля 2015

У меня была простая проблема, но я был озадачен ответами на этот вопрос.

Мне пришлось использовать переменную (myVar1), определенную в одном файле JavaScript (myvariables.js), в другом файле JavaScript (main.js).

Для этого я сделал, как показано ниже:

Загружен код JavaScript в файле HTML, в правильном порядке, сначала myvariables.js, затем main.js: 

<html>
    <body onload="bodyReady();" >

        <script src="myvariables.js" > </script>
        <script src="main.js" > </script>

        <!-- Some other code -->
    </body>
</html>

Файл: myvariables.js 

var myVar1 = "I am variable from myvariables.js";

Файл: main.js 

// ...
function bodyReady() {
    // ...
    alert (myVar1);    // This shows "I am variable from myvariables.js", which I needed
    // ...
}
// ...

Как вы видели, я использовал переменную в одном файле JavaScript в другом файле JavaScript, но мне не нужно было включать одну в другую. Мне просто нужно было убедиться, что первый файл JavaScript загружен до второго файла JavaScript, а переменные первого файла JavaScript доступны во втором файле JavaScript автоматически.

Это спасло мой день. Надеюсь, это поможет.

12 голосов
/ 14 марта 2014

Синтаксис @import для достижения CSS-подобного импорта JavaScript возможен с помощью такого инструмента, как Mixture, через специальный тип файла .mix (см. здесь ). Я предполагаю, что приложение просто использует один из вышеупомянутых методов, хотя я не знаю.

Из документации Mixture по .mix файлам:

Файлы микширования - это просто файлы .js или .css с .mix. в имени файла. Микс файл просто расширяет функциональность обычного стиля или Файл сценария и позволяет импортировать и объединять.

Вот пример .mix файла, который объединяет несколько .js файлов в один: 

// scripts-global.mix.js
// Plugins - Global

@import "global-plugins/headroom.js";
@import "global-plugins/retina-1.1.0.js";
@import "global-plugins/isotope.js";
@import "global-plugins/jquery.fitvids.js";

Смесь выводит это как scripts-global.js, а также как уменьшенную версию (scripts-global.min.js).

Примечание: я никоим образом не связан с Mixture, кроме того, что использую его в качестве инструмента разработки переднего плана. Я столкнулся с этим вопросом, увидев .mix файл JavaScript в действии (в одном из шаблонов Mixture) и будучи немного смущенным этим («Вы можете сделать это?» - подумал я про себя). Затем я понял, что это тип файла для приложения (несколько разочаровывающий, согласился). Тем не менее, полагал, что знания могут быть полезны для других.

ОБНОВЛЕНИЕ : смесь теперь свободна (в автономном режиме).

ОБНОВЛЕНИЕ : Смесь больше не выпускается. Старые версии смеси все еще доступны

Страница:
...