Есть ли преимущество для размещения класса в теге script?

Я наткнулся на этот код

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

и было любопытно, есть ли возможность записать это в свой код

ОТВЕТЫ

Ответ 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>

Результатом стал красный блок на экране, а содержимое тега script видно при запуске в Chrome. IE практически не отображает содержимое script. Таким образом, <script> можно рассматривать как любой другой тег, по крайней мере, в Chrome. Я бы сказал, что надзор за Chrome. Это Chrome 10.0.648.204 на 32-битной Windows 7.

effect of rendering the above html

EDIT: Firefox 4 также делает то же самое.

EDIT2: Возможный вариант использования? Используйте его как "источник показа" для script на своей странице, чтобы показать людям, как это работает, возможно, в блоге о 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>

Ответ 2

Визуальное стилирование, вероятно, не очень подходит для этого. Где-то он может быть использован для динамического выбора одного из многих фрагментов script для использования в другом месте, например, с использованием языка шаблонов 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

Единственное, что я могу придумать для наличия свойства class для script, это то, что jQuery может выбрать элемент и выполнить некоторые манипуляции, например, дублировать его.

Ответ 4

Единственный экземпляр, который я могу придумать, когда это было бы полезно, - это когда теги script динамически добавляются на страницу (функция кометы), так как это один из немногих случаев, когда вы действительно можете взаимодействовать с script тег.

Ответ 5

Согласно стандарту w3c, как описано w3schools.com a script tag действительно поддерживает Глобальные атрибуты, одним из которых является атрибут 'class'. Таким образом, совершенно "законно" иметь теги script с определенным атрибутом класса, а браузеры, которые нарушают это, не полностью совместимы с w3c. Идентификатор "Глобальный атрибут" также поддерживается тегом script.

Что касается возможной полезности наличия тегов script с "классом" или "идентификатором", то для этого потребуется очень конкретная утилита, для которой происходит перемещение документа w3c или абстракции DOM, прежде чем отправлять его для отображения клиентский браузер. В этом случае средство внесения изменений в документ может быть выполнено с использованием выбора стиля CSS, а наличие "id" и "class" для скриптов группировки может быть полезно по ряду причин.

Это узкий и конкретный случай, но тот, на который я фактически вовлечен в этот самый момент. Сказать, что нет никакой пользы, это узкомысленный и сказать, что это незаконно по стандартам, является ложным. Он может не поддерживаться во всех браузерах, но для браузеров, даже современных, не редкость интерпретировать стандарт w3c по-разному и реализовать свою версию поддержки стандартов по-своему.

Ответ 6

Полезно при использовании самого тега script в качестве ссылки для смежных селекторов.

то есть.

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

Ответ 7

Я думаю, что не совсем правильно использовать атрибут класса. Согласно w3schools script -tag не поддерживает стандартные атрибуты, к которым принадлежит свойство класса. Поэтому jQuery может выбрать его при использовании фильтрации для класса, но у вас нет гарантии. Также он не уверен, что поведение во всех браузерах одинаковое.

Ответ 8

Вероятно, вы можете использовать класс или идентификатор, чтобы стереть ваш script, написанный внутри него по соображениям безопасности, например.

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

Ответ 9

Непосредственная польза, которая приходит мне на ум, заключается в том, что Javascript/Jquery/etc теперь может выбрать этот элемент script по имени класса.

Ответ 10

Я не вижу никакой пользы, поскольку:

  • Выбор его с помощью CSS не не должен ничего делать (визуально)
  • Выбор его через JS не полезен, поскольку дублирование, удаление и т.д. не делает ничего (поскольку JS внутри загружается только один раз - любые изменения послесловия отбрасываются).

Ответ 11

Возможный случай:

Если вы хотите поставить .png поверх script, используя css. С z-индексом.

Ответ 12

Добавление класса или идентификатора позволяет вам выбрать тег script с 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 templating engine также используют эту технику, например (Handlebars):

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

Подробнее читайте по этому вопросу: Есть ли стандарт для встраивания JSON в HTML?

Ответ 13

Я нашел добавление класса в тег script, полезный при разработке редактора кода, который позволяет редактировать javascript в определенных блоках на странице,

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