Как справиться или минимизировать жесткую связь в JQuery

Question

Описание

По своей конструкции большая часть кода jquery приводит к сильной взаимосвязи, например, селекторы предполагают особую структуру html

var mySubnav = $("#navigation a.sub-menu");

Если соответствующий html изменяется по каким-либо причинам,

<a class="subMenu" .... </a>

функциональность нарушена.

Вопрос

• Какой лучший способ справиться с жесткой связью?
• Какие существуют способы его ослабления?

Ответы, подходы

• использовать атрибут пользовательских данных html для отделения логики css от js.например, добавьте data-submenu="true" в html и используйте var mySubnav = $("[data-submenu]"); на стороне js.
• реализуйте надежную среду тестирования
• как можно более слабой пары, используя наименее специфичные селекторы, например $("a.sub-menu'). См. Также
• Исключите фактические строковые литералы, которые представляют селекторы CSS, из тела вашего кода jQuery путем (1) предварительного получения ссылок на статические элементы DOM и (2) сохранения строк селектора вв одном месте (вверху вашего кода).
• использовать фреймворки javascript, такие как Backbone , которые отделяют javascript от DOM через views
• используйте делегат и live относительно связи из-за управления событиями

Answer 1

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

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

Answer 2

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

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

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

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

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

Answer 3

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

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

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

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

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

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

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

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

Answer 4

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

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

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

Answer 5

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

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

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

Плохо - с использованием стилей и классов (101)

$('.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 и сценарием иногда неизбежна из-за характера их совместной работы.

Полный текст статьи

Answer 6

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

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

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

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

Answer 7

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

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

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

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

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

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