基本上我要问的是给我的脚本标签一个 id 属性有什么意义？由于这种标识，它们内部的例程是否可以被不同地调用或引用？这是否会导致使脚本/页面表现得有趣的任何问题？
【问题讨论】：
id 到 script 标记时很有用。
标签： javascript html dom
id 只是 DOM 树中 <script> 标记的另一个访问器。理论上，您可以使用document.getElementById() 检索<script> 节点并将其删除或添加其他属性（尽管我不相信您可以在将src 属性加载到DOM 后对其进行修改）。 id 并不是这些操作所必需的——它也可以被任何 DOM 函数（例如 getElementsByTagName("script")）访问。
如果您确实需要通过 DOM 操作访问 <script> 标记，id 会更容易一些。否则，几乎没有什么好处1。
1向any DOM 节点添加id 属性有点道理，尽管影响呈现的节点也可以从针对id 的CSS 中受益，不像<script> 标签...
【讨论】：
正如前面的答案所提到的，一旦脚本标签中的代码运行，它的结果将不会通过替换/删除脚本节点来撤消。
但是如果代码到现在还没有运行，那么 id 会很有用。下面是这样一个脚本标签：
<script id="code1" type="text/myjs">.....</script>
由于浏览器不知道这种类型的脚本，它会忽略它的执行，但标签和它的代码仍然在 DOM 中可用。
工作示例：http://jsfiddle.net/sv_in/rt9Q2/
这主要用于客户端模板。一个模板，例如Mustache.js，存储在这样一个脚本标签中。当需要编译时，使用它的id从tag中获取。这种方法的优点是视图（模板）和模型（包含要在视图中显示的数据的 js 变量）是完全分开的。
除了这种做法，脚本标签的 id 没有通用用途
【讨论】：
给你的脚本标签赋予id是没有意义的，页面上的脚本只是按照它们在页面上的顺序执行。
【讨论】：
向脚本元素添加 id 属性有两个特定目的：
1. 阅读网页源代码时可以识别你的脚本；
2. HTML 参考说您应该能够覆盖可识别元素的内容（但经验告诉我们，实际上很少有浏览器会这样做）。
例如，如果您已经有一个 id="myParticularScript" 的脚本，那么添加一个具有相同 id 的新脚本元素应该替换旧的，加载您在 src 属性中指定的任何新（或相同）源.
虽然我在动态加载 javascripts 方面的经验证明新脚本确实会加载到浏览器中，但我测试过的浏览器都没有设法替换拥有相同 id 的旧元素。
所以只剩下第一个目的：易于识别。在我的工作中，我们使用系统来生成网页，我们并不总是知道哪个脚本（或 css 链接，就此而言）是由哪个组件添加的。我们通过向脚本标签和 css 链接标签添加 id 来解决这个问题 - 我们能够识别并追溯到我们的系统的 id。
【讨论】：
这对于检查服务器中 src url 属性中的资源文件是否存在可能很有用。对于缓存清除，需要尊重 .js 和 .css 文件的文件名。这将有助于检查服务器中的文件名是否已更改，然后通过代码重新加载
$window.location.reload()
代码示例（angularjs）：
service.reloadApplication = function () {
var script = document.getElementsById("scriptAppMin");
if (!!script.getAttribute('src') && doesFileExist(script.getAttribute('src')) == false)
$window.location.reload();
}
function doesFileExist(fileUrl) {
var xhr = new XMLHttpRequest();
xhr.open('HEAD', fileUrl, false);
xhr.send();
return !(xhr.status == "404");
}
【讨论】：
我发现了一个非常新颖的用途，可以将 ID 赋予 script 标签。我在我的网站中嵌入了tawk.to 脚本来显示它的聊天小部件。问题是，当我想打印页面时，小部件并没有隐藏。因此，您会在打印预览的每个页面上看到该小部件重复出现，通常会遮盖页面内容！
为了解决问题，我首先观察了widget是如何添加的。我发现小部件是在脚本标签之后添加的。但是这个小部件（封装在div标签中）没有任何类，它有一个随机生成的ID，每次都不一样。
必须有另一种方法来获取该小部件（div 标签），而不依赖于 JavaScript 技巧。就在那时，我了解到 CSS 有一个 "adjacent sibling" 或“下一个兄弟”选择器，令人惊讶的是它具有非常不错的浏览器支持。
首先，我为脚本标签提供了一个 ID。
<script type="text/javascript" id="tawk-to-script">
然后我使用 ID 和下一个兄弟选择器将 CSS 应用到小部件。
@media print {
script#tawk-to-script + div {
display: none !important;
}
}
维奥拉！问题解决了。
【讨论】：
我在书签中使用了script id 标签；我通过Javascript将script元素添加到DOM以及div；然后使用它； & 当/如果用户点击我添加的div 上的Close 按钮；我通过 ID 找到了这个 script 元素并从 DOM 中删除它以离开我找到的页面。
【讨论】：
当您想到延迟加载脚本时，它们可能会派上用场。另外，我记得我曾经在脚本标签上使用 ID 来促进元内容的更改，每个状态更改（它是一个单页应用程序）。
使用脚本标签上的 ID，您可以检查特定实例上是否存在具有特定 ID 的脚本标签是否存在于 DOM 中。如果它不存在，并且如果您的路线要求它存在，则可以加载它（在某些条件下）。
假设有一个脚本需要延迟加载。让我们以一些聊天小部件为例。可能会出现这样的情况，您可能会倾向于仅在用户碰巧点击（例如，聊天按钮）时才加载聊天小部件。
在这里，您将懒惰地加载聊天。因此，可能的情况是： “如果用户点击聊天按钮，则将聊天小部件 js 注入 DOM”。
简单吗？当然好。但是，考虑一下用户再次单击聊天按钮的情况。会发生什么？会再次注入相同的脚本，但您当然不希望这种情况发生，对吗？
所以，假设聊天小部件 js 通过以下方式进入 DOM：
<script id="chatWidgetScript" src="...whatever..."></script>
解决聊天按钮上的“第二次点击”问题的一个很好的解决方案是查看脚本是否已经存在于 DOM 中，如果存在，不要让相同的脚本两次附加到 DOM 中。
所以，您的按钮可能是：
<button onclick="loadChatWidget()"> Chat! </button>
您的 loadChatWidget() 函数可能是：
loadChatWidget(){
if(document.getElementById("chatWidgetScript")){
//chat script is already there in the DOM, no need to load it again.
return;
}
/*
if document.getElementById("chatWidgetScript") returns null, this would
mean that the chat widget isn't there in the DOM, and you might want to
load the same now.
*/
// LOAD SCRIPT HERE
}
这只是在脚本标签上使用 ID 的一种方式，它也很有用！
【讨论】：