Возможный дубликат:
Включение файла .js в файл .js
Как я могу добавить файл js в другой файл js, чтобы придерживаться принципа > и избегать дублирования кода.
Возможный дубликат:
Включение файла .js в файл .js
Как я могу добавить файл js в другой файл js, чтобы придерживаться принципа > и избегать дублирования кода.
Вы можете включить только файл script в HTML-страницу, а не в другой файл script. Тем не менее, вы можете написать JavaScript, который загружает ваш "включенный" script в ту же страницу:
var imported = document.createElement('script');
imported.src = '/path/to/imported/script';
document.head.appendChild(imported);
У вас есть хороший шанс, что ваш код зависит от вашего "включенного" script, но в этом случае он может выйти из строя, потому что браузер будет загружать "импортированный" script асинхронно. Лучше всего будет использовать стороннюю библиотеку, такую как jQuery или YUI, которая решает эту проблему для вас.
// jQuery
$.getScript('/path/to/imported/script.js', function()
{
// script is now loaded and executed.
// put your dependent JS here.
});
Я не согласен с критикой техники document.write
(см. предложение Ваана Маргаряна). Мне нравится способ document.getElementsByTagName('head')[0].appendChild(...)
(см. предложение Мэтта Болла), но есть одна важная проблема: порядок выполнения сценариев, включенных в путь. Я должен описать проблему более точно ниже.
В последнее время я трачу много времени, чтобы воспроизвести одну близкую проблему. Хорошо известный плагин jQuery использует ту же технику (см. Src здесь) для загрузки файлов, но разные люди сообщали о проблеме с работой этого. Я могу описать проблему следующим образом. Позвольте нам иметь библиотеку JavaScript, которая состоит из множества скриптов, и один loader.js
загружает все части. Некоторые из частей зависят от другого. Позвольте нам включить еще один скрипт main.js
для <script>
, который использует объекты из loader.js
сразу после loader.js
. Проблема заключалась в том, что когда-нибудь main.js
выполнялись раньше всех скриптов, загруженных loader.js
. Использование $(document).ready(function () {/*code here*/});
внутри скрипта main.js
также не могло помочь. Использование каскадного обработчика событий onload
в loader.js
приведет к последовательной, а не параллельной загрузке сценариев, и затруднит использование сценария main.js
, который должен быть просто включен где-то после loader.js
.
Я мог бы воспроизвести проблему в моей среде и увидеть, что порядок выполнения сценариев в Internet Explorer 8 может быть другим, как порядок включения JavaScripts. Это очень сложная проблема, если вам нужно включить некоторые скрипты, где один зависит от другого. Проблема и описана в Загрузка файлов Javascript параллельно. В качестве обходного пути предлагается использовать document.writeln
:
document.writeln("<script type='text/javascript' src='Script1.js'></script>");
document.writeln("<script type='text/javascript' src='Script2.js'></script>");
Описано, что в случае "сценарии загружаются параллельно, но выполняются в порядке их записи на страницу". После перехода от техники document.getElementsByTagName('head')[0].appendChild(...)
к document.writeln
я больше никогда не видел никаких проблем.
Поэтому я рекомендую вам использовать document.writeln
.
ОБНОВЛЕНО: если у кого-то есть интерес, он может попытаться загрузить (и перезагрузить) страницу в Internet Explorer (страница использует технику document.getElementsByTagName('head')[0].appendChild(...)
) и сравнить с фиксированной версией Используется document.writeln
. (Код страницы довольно грязный и не от меня, но его можно использовать для воспроизведения проблемы, которую я описываю).
Это невозможно напрямую. Вы также можете написать какой-нибудь препроцессор, который справится с этим.
Если я правильно понимаю, ниже приведены вещи, которые могут быть полезны для достижения этого:
Используйте препроцессор, который будет работать с вашими файлами JS, например, для поиска таких шаблонов, как "@import somefile.js", и замените их содержимым реального файла. Николас Закас (Yahoo) написал одну такую библиотеку на Java, которую вы можете использовать (http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/)
Если вы используете Ruby on Rails, тогда вы можете попробовать упаковку ресурсов Jammit, он использует файл конфигурации assets.yml, в котором вы можете определить свои пакеты, которые могут содержать несколько файлов, а затем ссылаться на них на вашей реальной веб-странице по имени пакета.
Попробуйте использовать загрузчик модулей, например RequireJS, или загрузчик сценариев, например LabJs, с возможностью управления последовательностью загрузки, а также преимуществами параллельной загрузки.
В настоящее время JavaScript не предоставляет "родного" способа включения файла JavaScript в другой файл, такой как CSS (@import), но все вышеупомянутые инструменты/способы могут быть полезны для достижения упомянутого вами принципа СУХОЙ. Я могу понять, что, возможно, вы не чувствуете себя интуитивно понятным, если вы работаете на стороне сервера, но это так. Для разработчиков переднего плана эта проблема обычно является "проблемой развертывания и упаковки".
Надеюсь, это поможет.
Вам нужно написать объект document.write:
document.write('<script type="text/javascript" src="file.js" ></script>');
и поместите его в свой основной файл JavaScript