0

考虑下面的代码 -->

<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，一个<template> 具有外部脚本（如本例中的 jQuery）的 html，后跟一个对其有一定依赖性的内联脚本。

另外 - 如果模板标签被删除，这不会发生 ->

   <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>

在后一种情况下，浏览器如何同步下载它？

在前一种情况下（使用模板）是否可以阻止脚本下载（逐行）？

4

2 回答 2

0

问题是脚本是异步加载的。这意味着它开始从网络加载脚本，但继续运行下面的代码。所以在这种情况下，它会在没有加载 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>

于 2015-12-30T21:54:21.647 回答
0

这是我在我的应用程序中处理它的方式（使用 jQuery）：

//Load the template from an external file and append it to the HEAD of the document
$.get("/path/to/your_external_template_file.html", function (html_string) {
    $('head', top.document).append(
        new DOMParser().parseFromString(html_string, 'text/html').querySelector('template')
    );
}, 'html');

//Locate the template after you've imported it
var $template = $("#top_template_element_id");

//If you want to reuse the content, be sure to clone the node.
var content = $template.prop('content').cloneNode(true);

//Add a copy of the template to desired container on the page
var $container = $('#target_container_id').append(content);
于 2018-08-21T13:55:15.703 回答