Добавление текста в конец имен классов, чтобы было очевидно, что jQuery использует эти классы

Question

При разработке дизайна с использованием jQuery я наткнулся на проблему. Как бы я узнал, не просматривая javascript, если jQuery не делает селектор для класса в моем HTML? То есть, если бы я захотел изменить класс на что-то другое, у меня нет возможности узнать, используется ли этот класс в другом месте, поэтому мне сложно легко обновить дизайн.

Итак, моя мысль состояла в том, чтобы продублировать имя класса и добавить текст (скажем, "-jquery") в конец, если он используется. Таким образом, если бы я захотел изменить дизайн в будущем, я мог бы сделать это свободно, и я бы сразу узнал, какие элементы на странице используются в моем javascript.

Например, допустим, у меня есть простой div с классом:

<div class="header">This is a test</div>

И javascript, который что-то делает с div:

$(".header").click(function() { 
     $(this).slideUp();
});

Моя идея изменить это на:

<div class="header header-jquery">This is a test</div>

$(".header-jquery").click(function() { 
     $(this).slideUp();
});

Таким образом, разделяя мои классы CSS и jQuery, упрощая идентификацию элементов, используемых jQuery, и позволяя мне обновлять класс, если это необходимо, не затрагивая мой javascript. Конечно, код выглядит немного грязнее, но я не против.

Вопросы:

1. Это обычная практика вообще?
2. Должен ли я сделать это?
3. Есть ли лучший способ добиться того, чего я хочу?

EDIT:

Последний вопрос:

4. Возможно, есть плагин для Visual Studio, который может сделать это для меня? То есть, если он заметит, что я редактирую класс элемента, который используется в jQuery, он предупредит меня? Или, возможно, даже цветовые коды имени класса, чтобы я знал, что он используется. Такая функция в IDE была бы убийственной ...

Бар

Answer 1

Я понимаю, что вы говорите и с чем вы хотите помочь. По сути, вы хотите добавить класс в необработанный HTML (не динамически), чтобы вы знали, если вы когда-нибудь захотите изменить его в будущем, что он используется jQuery.

1. Это обычная практика вообще?

Нет, или, по крайней мере, не то, что я видел. Кажется, что это только загромождает ваш код.

Обновление: Однако, как вы упоминали в комментариях, в среде, где ваш HTML-кодер не работает с jQuery, он предупредит их, что они могут его сломать, когда они редактируют этот класс. Однако, по правде говоря, как и в большинстве jQuery-кода, если он касается любого HTML внутри этого элемента, он рискует нарушить код, а не только класс.

2. Должен ли я это сделать?

Лично я бы не стал. Во всяком случае, вы можете добавить тег rel, поскольку он действителен для любого элемента:

<div class="header" rel="jquery"></div>

Но даже это «неправильное использование» атрибута rel.

3. Есть ли лучший способ добиться того, чего я хочу?

Да! Вверху вашего основного файла JavaScript для веб-проекта поместите это:

/************ Classes and Selectors In Use **************

   .header
   form .special
   #footer p

*********************************************************/

Когда вы собираетесь изменить элемент, просто быстро просмотрите верхнюю часть этого файла. Кроме того, если вы минимизируете свой JS для производства (что вам следует делать), все, что будет удалено, чтобы не увеличить размер файла.

Правильный путь?

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

Вы можете прочитать об этом здесь: Автоматическое модульное тестирование с помощью JavaScript <- <em>Я лично думаю, что ответ ниже принятого ответа может предложить больше

Answer 2

Если вам нужен только очень специфический элемент, вместо использования класса используйте идентификатор. Если вы ищете конкретные элементы, которые являются потомками одного конкретного элемента, поместите идентификатор в этот родительский элемент. Я бы не стал добавлять класс просто для использования в качестве селектора для JavaScript.