html5 содержание шаблона (документ фрагмент) порядок загрузки на AppendChild

Question

рассмотрим следующий код ->

<template id="foo"> 
    <script type="text/javascript"> 
     console.log("00000000"); 
    </script> 

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 

    <script type="text/javascript"> 
     console.log(11111111); 
    </script> 
    <script type="text/javascript"> 
     console.log(22222222); 
     var xyz = $; 
     console.log(33333333); 
    </script> 
</template> 

теперь это добавление к DOM

var template = document.getElementById('foo') 
var clone = document.importNode(template.content,true); 
document.appendChild(clone); 

дает этот вывод в консоли ->

00000000 
    11111111 
    22222222 
    Uncaught ReferenceError: $ is not defined 

Так что вопрос в целом ->

Как правильно загрузить в DOM, HTML-<template>, который имеет внешний скрипт (как JQuery в данном случае), а затем инлайн сценарий, имеющий некоторую зависимость от него.

Кроме того - это не произойдет, если шаблон тег удаляется ->

<script type="text/javascript"> 
     console.log("00000000"); 
    </script> 

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 

    <script type="text/javascript"> 
     console.log(11111111); 
    </script> 
    <script type="text/javascript"> 
     console.log(22222222); 
     var xyz = $; 
     console.log(33333333); 
    </script> 

Как в последнем случае, это браузер загрузить его синхронно?

Возможно ли иметь сценарий блокировки загрузки (строка за строкой) в первом случае (с шаблоном)?

Answer 1

Проблема в том, что скрипт загружается async. Это означает, что он начинает загружать скрипт из Интернета, но продолжает выполнение кода ниже. Таким образом, в этом случае он выполнит код ниже, не загрузив jQuery.

Вам нужно только загрузить его один раз, так что вы могли бы сделать это в самом начале, и только один раз:

var template = document.getElementById('foo') 
 
var clone = document.importNode(template.content,true); 
 
document.body.appendChild(clone);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<template id="foo"> 
 
    <script type="text/javascript"> 
 
    console.log(00000000); 
 
    </script> 
 

 
    <script type="text/javascript"> 
 
    console.log(11111111); 
 
    </script> 
 
    <script type="text/javascript"> 
 
    console.log(22222222); 
 
    var xyz = $; 
 
    console.log(33333333); 
 
    </script> 
 
</template>

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

var template = document.getElementById('foo') 
 
var clone = document.importNode(template.content, true); 
 
document.body.appendChild(clone);

<template id="foo"> 
 
    <script type="text/javascript"> 
 
    console.log(00000000); 
 
    </script> 
 

 
    <script type="text/javascript"> 
 
    function scriptOnload() { 
 
     console.log(11111111); 
 
     console.log(22222222); 
 
     var xyz = $; 
 
     console.log(33333333); 
 
    } 
 
    </script> 
 

 
    <script onload="scriptOnload()" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
</template>