Загружаются ли JavaScript синхронно, если используется document.write? - PullRequest
Новая
       3

Загружаются ли JavaScript синхронно, если используется document.write?

7 голосов
/ 20 марта 2011

Это то же самое, если вы загружаете javascript на страницу следующим образом: 

<script src="http://domain.net/script.js" type="text/javascript"></script>

и так 

<script type="text/javascript">
  document.write("<script src='http://domain.net/script.js' type='text/javascript'></script>");

У меня много зависимостей в js и я хочузатем сконфигурируйте его как отдельный массив, который просто упакован в index.html следующим образом: 

<script type="text/javascript">
  for (i in config.files.javascripts) {
    document.write("<script src='config.files.javascripts[i]' type='text/javascript'></script>");
  }
</script>

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

Это не серверная сторона во внешнем интерфейсе, который я делаю, и он также иногда будет работать как виджет, хотя для разработки и тестирования мы должны загружать файлы в распакованном и несжатом виде для тестирования.

Спасибо!

Ответы [ 3 ]

7 голосов
/ 20 марта 2011

Чтобы ответить на ваш вопрос: Да, скрипты, загруженные с document.write, гарантированно будут выполняться в написанном порядке.

То же самое относится к сценариям, загруженным с использованием методов W3C DOM. 

var scriptElm = document.createElement('script');
scriptElm.defer = true; // Causes faster (parallel) loading in some browsers.
scriptElm.src = 'path/to/script.js';
document.getElementsByTagName('head')[0].appendChild( scriptElm );

Тем не менее, document.write() обычно считается очень плохой практикой (по разным причинам) и может в дальнейшем привести к поломке и досадным проблемам. Поэтому я рекомендую вам использовать инъекцию DOM W3C, показанную выше, если ничего другого.

- - - -
Кроме того, существуют библиотеки загрузки сценариев, которые делают загрузку таких ресурсов проще, элегантнее, а иногда и быстрее. Некоторые загружают сценарии параллельно, но выполняются в предсказуемом порядке - как тот, с которым уже связан @ CoBaLt2760 http://www.dustindiaz.com/scriptjs

jQuery также имеет очень простой метод $.getScript( 'path/to/script.js' ); ( документация ), который вы можете использовать. Если память мне не изменяет, она использует простое внедрение W3C DOM.

Google "загрузка javascript" или что-то подобное, или поиск здесь, на StackOverflow, com, если вам интересно больше ссылок на такие библиотеки.

1 голос
/ 20 марта 2011

если ваш config.files.javascripts является массивом, вам не следует использовать for ... in, так как этот синтаксис предназначен для зацикливания именованных ключей в объектах.

Для массивов используйте традиционный стиль C для синтаксиса цикла: 

for (var i=0; i<array.length; i++) {

Так что для вашего конкретного случая это должно сработать: 

var headerElm = document.getElementsByTagName('head')[0],
    scripts = config.files.javascripts;

for (var i=0, l=scripts.length; i<l; i++)
{
  var scriptElm = document.createElement('script');
  scriptElm.defer = true; // causes faster (parallel) loading in some browsers.
  scriptElm.src = scripts[i];
  headerElm.appendChild( scriptElm );
}
1 голос
/ 20 марта 2011

Если вы хотите загрузить асинхронные сценарии JavaScript в правильном порядке, я порекомендую вам $ script.js, разработанный javascript lead dev dev http://www.dustindiaz.com/scriptjs

Это действительно здорово !!

...