为什么导入JS文件时脚本标签需要留空？答案

【问题标题】：Why do script tags need to be left empty when importing a JS file?为什么导入JS文件时脚本标签需要留空？
【发布时间】：2016-03-05 22:56:11
【问题描述】：

我正在学习 JavaScript 以及 HTML 和 CSS。我编写了 JavaScript 文件 Primes.js，其中包含一些用于测试的素数查找相关函数。

为了使用外部 .js 文件进行测试，我编写了以下 HTML 文件：

...
<body>
    <script src="Primes.js">
        console.log("Loaded...");

        var n = 13;
        alert(n + " is prime?: " + isPrime(n));

        console.log("Ending...");
    </script>
</body>
...

但它从未执行脚本块中的语句。

看了一圈，找到this answer，把正文改成：

...
<body>
    <script src="Primes.js"></script>
    <script>
        console.log("Loaded...");

        var n = 13;
        alert(n + " is prime?: " + isPrime(n));

        console.log("Ending...");
    </script>
</body>
...

神奇的是，它按预期工作。需要一个空的脚本标签来导入文件似乎很奇怪。

为什么要求导入.js文件的脚本标签为空？如果脚本是它们使用的同一标签中的源，是否/是否有后果？

【问题讨论】：

标准就是这样定义的。没有“理由”为什么它更好/更糟，就是这样。
我不认为语言设计师的设计选择是完全随机的。这种限制一定是有原因的。
我并没有暗示它是随机的，但如果您的问题是试图猜测原因是什么，那么它对 SO 来说不是主题。
我怀疑它是随机的。我个人认为支持你提到的内容令人困惑。首先执行的是 src 还是标签之间的内容？意思是 src 中的文件是在正文之前还是之后插入的？拥有两个单独的标签可以消除任何歧义。不知道你能不能找到一个权威的答案……

标签： javascript html

【解决方案1】：

通常，如果您不从另一个文件导入脚本，您会在脚本标签之间键入脚本。但是由于您是通过声明src 来导入的，因此您正在导入的文件中的脚本会被您的浏览器视为插入到（空）脚本标签之间。

【讨论】：

【解决方案2】：

src 属性指定脚本应该被导入。渲染引擎在看到 src 属性时将忽略放置在脚本标签之间的任何内容。

在没有 src 属性的脚本标签之间放置文本会告诉渲染引擎将其作为内联脚本运行。

你的导入也是如此，然后在一组新的脚本标签之间添加你的内联脚本。

【讨论】：

【解决方案3】：

正如w3c 中所写，当存在src 属性时，脚本内的内容应该用于脚本文档。

如果指定了 script 元素的 src 属性，则 script 元素的内容（如果有）必须使源自元素内容的文本 IDL 属性的值与以下文档生成相匹配ABNF，其字符集为 Unicode。

【讨论】：