angularjs是否在jQuery的回退时加载

Does angularjs gets loaded on fallback of jQuery?

本文关键字：回退 加载 jQuery 是否 angularjs      更新时间：2023-09-26

在下面的代码中，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Falback procedure</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
        </script>
        <script type="text/javascript">
            if(typeof jQuery === 'undefined')
                document.write('<script type="text/javascript" src="../localfolder/jquery.js"></script>');
        </script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.js">
        </script>
    </head>
    <body>
        <p>Hello</p>
    </body>
</html>

考虑一个场景，其中googleCDN具有可访问性问题，触发加载本地jQuery库（位于webserver中）的回退机制。

在这种情况下，angularjs库是否被加载？执行document.write 后

您的代码有两个问题，这可能会使它的行为与您预期的不一样：

  1. 您在脚本块中有一个文本</script>。它在字符串中并不重要，它终止了它所在的块。你必须将其分解，这样浏览器就不会将其视为块的末尾：

    <script type="text/javascript">
    if(typeof jQuery === 'undefined')
        document.write('<script type="text/javascript" src="../localfolder/jquery.js"><'/script>');
        // Note the '------------------------------------------------------------------^
</script>

    '在JavaScript中没有任何意义，但可以防止浏览器看到</script>，从而提前结束脚本块。你看到它完成的其他方式是'....<' + '/script>'或'...</scr' + 'ipt>'等。

  2. Angular脚本上的src不正确，因此无论jQuery是否加载（或从何处加载），它都无法工作。您已经使URL相对于页面的路径，但您需要通过添加//:使其在至少协议上相对

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.js">
</script>
<!-- here --------------------------^ -->

在评论中，你问

我想知道document.write是否是异步执行

不，当函数运行时会立即发生。在您的情况下，由于该函数位于script标记的顶层，没有特殊属性，HTML解析器必须急停并运行该JavaScript代码，处理JavaScript代码通过document.write输出的任何令牌，并等待JavaScript代码完成后再转到Angular部分。

浏览器可能能够提前扫描以预加载angular.js文件，但在解析器到达该文件的script标记之前，它不会执行该文件的内容，因为除非使用async或defer属性，否则脚本执行的顺序是明确定义的（例如，按文档顺序）。

相关文章：