Ответ 1

Как насчет использования атрибутов данных html5 для создания селекторов javascript?

<a data-submenu="true" .... </a>

var mySubnav = $("[data-submenu]");

Понятно, что javascript работает на html.

Ответ 2

Это не может быть популярным ответом, но... тестирование, тестирование, тестирование. JQuery и Javascript в целом, как правило, тесно связаны и не без оснований; это код, запущенный в браузере, и поэтому вы хотите, чтобы производительность была относительно быстрой. Таким образом, инъекция слоя косвенности, которая допускает ослабление сцепления, может снизить производительность; Кроме того, это может быть немного излишним, так как обычно существует тесная связь между кодом JQuery/Javascript, который написан и страницами, на которых они написаны; это как бы артефакт исторического развития Javascript, но так, как он есть. Как таковая, плотная связь довольно "нормальная".

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

Ответ 3

Один из вариантов - использовать фреймворк Javascript, например Backbone. Это дает вам концепцию взглядов, которые помогают отделить ваш Javascript от структуры DOM. Например, вы можете создать представление Comment, которое вы назначаете следующему div:

<div class="comment">
    <span class="title"></span>
    <p class="body"></p>
</div>

И затем вы можете получить доступ к элементам в представлении относительно comment div:

var title = this.$(".title");

Это упрощает изменение структуры DOM за пределами comment div, если внутренности div comment остаются неизменными.

Ответ 4

Использовать пользовательские префиксные классы для пользовательских интерфейсов ui-specificGuy

Предоставлено HTML

<div class="container grid8">
    <ul class="ul1 horizontal">
        <li>List Item 1</li>
        <li>List Item 2</li>
    </ul>
</div>

Плохо - использование классов/крючков, ориентированных на стиль

$('.container.grid8').stuff();
$('.ul1.horizontal').moreStuff();

Настройка HTML

<div class="container grid8 ui-specificContainer">
    <ul class="ul1 horizontal ui-specificList">
        <li>List Item 1</li>
        <li>List Item 2</li>
    </ul>
</div>

Хороший - используя ваши собственные классы/крючки

$('.ui-specificContainer').stuff();
$('.ui-specificList').moreStuff();

Будьте предельно точными

Если это достигнет вашей цели.

$('.ui-targetedElement')

Тогда почему у селектора, который выглядит так?

$('ul > li a.ui-targetedElement')

Это просто вводит ненужные зависимости структуры DOM в функциональные возможности, которые вы строите, и вы должны быть упреждающими в этом отношении, потому что в этот момент вы должны предлагать свои собственные крючки (префиксные классы)?

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

Полная статья

Ответ 5

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

Live - http://api.jquery.com/live/

Делегат - http://api.jquery.com/delegate/

Ответ 6

Мое предложение было бы:

• извлекает ссылки на статические элементы DOM в DOM ready и помещает их в переменные или свойства объекта или что-то еще.

• хранить имена классов внутри объекта (или несколько объектов или что угодно, если эти имена (строки) находятся в одном месте)

Затем вы можете сделать это:

var mySubnav = $('a.' + C.submenu, navigation);

где navigation - ссылка на элемент #navigation, а C - это объект имен классов, свойство submenu - это строка "sub-menu".

Теперь, когда вы изменяете имена классов в своем HTML-коде, вам нужно обновить объект C.

Идея состоит в том, чтобы избавиться от фактических строковых литералов, которые представляют селектор CSS из тела вашего кода jQuery, посредством (1) предварительного извлечения ссылок на статические элементы DOM и (2) сохранения селектора строки в одном месте (вверху вашего кода).

Ответ 7

Если ваш html изменяется, все ставки отключены.

А у вас нет жесткой связи. Очень важно, чтобы ваш код функционировал.

Например, это то, что я считаю плотной связью:

<a class="subMenu" onclick="doSomething()"> .... </a>

Свободная версия:

$("#navigation a.sub-menu').click(function(){
   //do something
});