javascript 将类放在脚本标签上有好处吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5506610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 17:26:04  来源:igfitidea点击:

Is there a benefit to putting a class on a script tag?

javascripthtmlcss

提问by Matt Elhotiby

I came across this code

我遇到了这个代码

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

and was curious if there is a benefit to writing that into your code

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

采纳答案by Matt Greer

I just ran a quick test with this markup:

我刚刚用这个标记运行了一个快速测试:

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

The result was a red block on the screen and the contents of the script tag visible when ran in Chrome. IE does not render the script content visibly at all. So <script>can be treated like any other tag, at least in Chrome. I'd argue that's an oversight on Chrome's part. This is Chrome 10.0.648.204 on 32bit Windows 7.

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

effect of rendering the above html

渲染上述html的效果

EDIT: Firefox 4 also renders the same thing.

编辑:Firefox 4 也呈现同样的东西。

EDIT2: Possible use case? Use it as a "show source" for script on your page to show people how it works, perhaps on a blog about JavaScript?

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>

回答by Parker

Visual styling's probably not a great case for this. Somewhere it could be used is dynamically selecting one from many script snippets to use elsewhere, for instance with with a javascript templating language.

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

Contrived Handlebars example:

人为的把手示例:

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

回答by mcdonasm

According to w3c Standard, as described by w3schools.coma script tagdoes indeed support Global Attributes, one of which is the 'class' attribute. Thus it is perfectly "legal" to have script tags with a specific class attribute, and browsers that break this are not fully w3c compliant. The Global Attribute 'id' is also supported by the script tag.

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

As for the possible utility of having script tags with a 'class' or 'id' there would need to be a very specific usecase for which traversing a w3c document or a DOM abstraction, before sending it to be rendered by a client browser, is handled. In this case the means of making changes to a document could be done using css style selection and having 'id' and 'class' for grouping scripts could be useful for a number of different reasons.

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

It is a narrow and specific case, but one that I am actually involved in at this very moment. To say there is no usefulness to it is narrow minded and to say it is illegal by the standards is false. It may not be supported on all browsers, but it is not uncommon for browsers, even modern ones, to interpret the w3c standard differently and implement their version of standards support in their own way.

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

回答by Jacob

The only benefit I can think of for having a classproperty for a script is that jQuery may be able to select the element and do some manipulation, for example duplicate it.

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

回答by jdc0589

The only instance I can think of when this would be useful is when script tags are dynamically added to a page (comet functionality), as that is one of the few times when you might actually interact with a script tag.

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

回答by inkovic

It is useful when using the script tag itself as a reference for adjacent selectors.

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

i.e.

IE

.example + iframe {height: none;}
<script class="example" type="text/javascript" src="//weird-addon.js">
</script>

In the above example, I am loading a script onto the page. The script is writing an element, in this case an iframe, directly to the DOM.

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

I don't want it to be shown immediately, so I am using the script class to select the adjacent iframe to hide it on page load.

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

Controlling the actualscript tag display might not be itself useful, but used in combination with adjacent selectors, it does merit its uses.

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

回答by Zeeshan Cornelius

You can probably use class or id to erase your script written inside it for security reason like.

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

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

回答by Russell Ward

I have found adding a class to a script tag useful in developing a code editor that allows editing the javascript in specific blocks on a page,

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

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

回答by Mike Lewis

A immediate benefit that comes to my mind is that Javascript/Jquery/etc can now select that script element by the class name.

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

回答by Christian

I don't see any benefit since:

我没有看到任何好处,因为:

  • Selecting it through CSS doesn'tshouldn't do anything (visually)
  • Selecting it through JS isn't useful since duplicating, deleting etc, doesn't do a thing (since the JS inside is only loaded once - any changes afterwords are discarded).
  • 通过 CSS 选择它应该做任何事情(视觉上)
  • 通过 JS 选择它没有用,因为复制、删除等不会做任何事情(因为里面的 JS 只加载一次 - 任何更改后记都会被丢弃)。