将类放在脚本标签上是否有好处？答案

【问题标题】：Is there a benefit to putting a class on a script tag?将类放在脚本标签上是否有好处？
【发布时间】：2011-07-27 06:28:39
【问题描述】：

我遇到了这段代码

<script class="example" type="text/javascript">

并且很好奇将其写入代码是否有好处

【问题讨论】：

我认为你可能遗漏了一些代码... :)
有什么好处？我不明白你在问什么。
它的好处是使 HTML 无效，因为在 HTML4、XHTML 和 HTML5 上，script 上不允许使用 class。现在没有人关心了。
@KenLiu：我想你可以自己找到它们：here is a XHTML dtd, and the defaults %attrs (which include 'class') are not found on the script element。但是，HTML5 是一个移动目标，现在该版本允许使用它。您可以使用validator.w3.org：<script class="foobar"></script> 在 HTML4 或 XHTML 中失败，但现在在 HTML5 中是允许的。
是的，在 HTML5 中是允许的：dev.w3.org/html5/markup/…dev.w3.org/html5/markup/script.html#script

标签： javascript html css

【解决方案1】：

我刚刚使用此标记进行了快速测试：

<!DOCTYPE html>
<html>
<head>
    <style>
        .foo {
            display: block;
            border: 2px solid red;
            width: 10px;
            height: 10px;
        }
    </style>
</head>
<body>
    <script class="foo" type="text/javascript">
        alert("can you see me?");
    </script>
    after the script  
</body>
</html>

结果是屏幕上出现一个红色块，并且在 Chrome 中运行时可以看到脚本标记的内容。 IE 根本不显示脚本内容。所以<script> 可以像任何其他标签一样对待，至少在 Chrome 中是这样。我认为这是 Chrome 的疏忽。这是 32 位 Windows 7 上的 Chrome 10.0.648.204。

编辑：Firefox 4 也呈现相同的东西。

EDIT2：可能的用例？将它用作页面上脚本的“显示源”，向人们展示它是如何工作的，也许在有关 JavaScript 的博客上？

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
    <script class="foo" type="text/javascript">
        function foobar() {
            var a = 1;
        }   
    </script>
    after the script
    <a href="#">show me the script</a>

    <script type="text/javascript">
        $('a').click(function(event) {
            event.preventDefault();
            $("<div>").html($(".foo").text()).appendTo($("body"));
        });
    </script>
</body>
</html>

【讨论】：

我在实践中见过content-editable <style> 一次。很酷的想法，如果你问我的话。

【解决方案2】：

视觉样式可能不是一个很好的例子。它可以用于从许多脚本 sn-ps 中动态选择一个以在其他地方使用的地方，例如使用 javascript 模板语言。

人为的车把示例：

<script class="greeting english" type="text/x-handlebars-template">
    <p>Hello {{name}}</p>
</script>
<script class="greeting spanish" type="text/x-handlebars-template">
    <p>Hola {{name}}</p>
</script>

...

var greeting_template = Handlebars.compile($('script.greeting.' + language).html()); 
$('#header').append(greeting_template(user));

【讨论】：

【解决方案3】：

我能想到的唯一有用的实例是脚本标签被动态添加到页面（彗星功能）时，因为这是您可能实际与脚本标签交互的少数情况之一。

【讨论】：

但是为什么要在加载后使用脚本标签呢？这是历史，你无能为力。
谁知道呢，你可能出于某种原因想要跟上它的存在
简单示例：使用脚本标签放置模板。

【解决方案4】：

我能想到的对脚本拥有class 属性的唯一好处是，jQuery 可以选择元素并进行一些操作，例如复制它。

【讨论】：

【解决方案5】：

根据 w3c 标准，如 w3schools.com 所述，script tag 确实支持 Global Attributes，其中之一是“类”属性。因此，拥有具有特定类属性的脚本标签是完全“合法的”，而破坏这一点的浏览器并不完全符合 w3c。脚本标签也支持全局属性“id”。

至于使用带有“class”或“id”的脚本标签的可能实用程序，在将其发送给客户端呈现之前，需要一个非常具体的用例来遍历 w3c 文档或 DOM 抽象浏览器，处理。在这种情况下，可以使用 css 样式选择来完成对文档进行更改的方法，并且出于多种不同原因，使用“id”和“class”对脚本进行分组可能很有用。

这是一个狭隘而具体的案例，但我此时此刻真正参与其中。说它没有用是狭隘的，说它按照标准是非法的是错误的。可能并非所有浏览器都支持它，但对于浏览器（即使是现代浏览器）以不同方式解释 w3c 标准并以自己的方式实现其标准支持版本的情况并不少见。

【讨论】：

【解决方案6】：

在使用脚本标签本身作为相邻选择器的参考时很有用。

即

.example + iframe {height: none;}

<script class="example" type="text/javascript" src="//weird-addon.js">
</script>

在上面的示例中，我将脚本加载到页面上。该脚本正在将一个元素（在本例中为 iframe）直接写入 DOM。

我不希望它立即显示，所以我使用脚本类来选择相邻的 iframe 以在页面加载时将其隐藏。

控制实际脚本标签显示本身可能没有用，但与相邻的选择器结合使用时，它确实值得使用。

【讨论】：

【解决方案7】：

出于安全原因，您可能可以使用 class 或 id 擦除其中编写的脚本。

<script id="erasable" type="text/javascript">
    //your code goes here
    document.getElementById('erasable').innerHTML = "";
</script>

【讨论】：

【解决方案8】：

我没有看到任何好处，因为：

通过 CSS 选择它不不应该做任何事情（视觉上）
通过 JS 选择它并没有用，因为复制、删除等都不起作用（因为里面的 JS 只加载一次 - 任何更改后记都将被丢弃）。

【讨论】：

好吧，至少如果你从 JS 中选择它，你可以从页面中删除脚本标签本身来清理它，加上模板。
我不确定你所说的“清理”是什么意思，更不用说“模板”了。如果要在页面中添加 JS，有很多方法可以不使用脚本标签（例如：eval()）。
如果您大量使用 ajax，并且每个 ajax 都附加到页面上，那么您最终会添加许多脚本标签，其中一些可能只运行一次。因此，因为无论如何它已经被执行，所以在页面的源代码中看不到它们，您可以删除它们（它们无论如何都没有用）。评估是一个坏建议。再加上使用 ajax，您通常会拥有 html 和脚本。
对于“模板”，在网上搜索 jquery 模板，您就会明白我的意思。模板通常包含在脚本标签中。
呃，AJAX 永远不会附加到页面......即使是这样，理想情况下也应该更改现有脚本的 src 而不是创建一个新脚本（无论如何它更好地提高性能）。关于模板，我明白你的意思，坦率地说，我认为这是一个糟糕的 hack。我们正在讨论的这个功能只是增加了一层糟糕的编码。

【解决方案9】：

我认为使用类属性并不完全正确。根据w3schools，脚本标签不支持类属性所属的标准属性。所以 jQuery 可能会在对类使用过滤时选择它，但你不能保证。此外，不确定所有浏览器的行为是否相同。

【讨论】：

【解决方案10】：

我想到的一个直接好处是 Javascript/Jquery/etc 现在可以通过类名选择该脚本元素。

【讨论】：

确实如此。但是，一旦您选择了该元素，您可以对它做什么有用的事情呢？
@lonesomeday：例如模板，或者如果你使用完整的 ajax 则清理页面
@MykaEyl type="text/javascript" 表示它不能是模板。但一般来说，是的，如果您不关心有效文件，您是对的。
@lonesomeday 我同意你的看法。我不得不说我不喜欢在脚本标签中添加类名，而是添加了一个自定义的 'data-something="scriptid"' 属性（也可以使用 jQuery 来选择）。
一旦内部的任何代码执行完毕，您就可以删除<script> 标签。

【解决方案11】：

可能的情况：

当您想使用 css 将 .png 放在脚本之上时。使用 z-index。

【讨论】：

你为什么要那样做？

【解决方案12】：

添加类或 ID 让您可以使用 Javascript 选择脚本标记，然后获取其内容，例如 JSON 对象或任何内容。这样可以避免创建全局变量（在此处使用 jQuery）：

<script id="datas" type="text/javascript">
    {"id": 1}
</script>

<script type="text/javascript">
    // This part of the code should be in a JS module
    // To avoid creating a global "object" variable
    var object = JSON.parse($('#datas').html());
    console.log(object.id); // Log "1"
</script>

Javascript 模板引擎也使用这种技术，例如 (Handlebars)：

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
      <h1>{{title}}</h1>
      <div class="body">
        {{{body}}}
      </div>
    </div>
</script>

更多关于这个问题的阅读：Is there a standard for embedding JSON in HTML?

【讨论】：

【解决方案13】：

我发现在脚本标签中添加一个类对于开发代码编辑器很有用，该编辑器允许在页面上的特定块中编辑 javascript，

<div id="idForABlock">
<script class="jsCustomJavascript">
//user generated code
</script>
</div>

【讨论】：

【解决方案14】：

古老的线程，但我想在今天补充一点，即 2021 年，不再有“只有 jQuery”，因为我们生活在 Cloudflare 工人世界。因此，命名脚本元素确实有助于定位它们。例如，要在更新文件并使用 Cloudflare 缓存完整 HTML 时更新缓存清除 (CB) 查询，您需要使用 CF 工作者脚本更新 CB 查询。

<script class="xyz-cb-query xyz-cb-vendor-js" src="/assets/vendor.js?v=938750039">    
<script class="xyz-cb-query xyz-cb-app-js" src="/assets/app.js?v=938750039">

一个 CLASS 来统治他们，一个 CLASS 来找到他们，一个 CLASS 来把他们都带来，并在 Cloudflare 中绑定他们。（来自“指环王”WHERE CLASS = RING... ;）

【讨论】：