jQuery шаблон проектирования для селекторов, чтобы улучшить сопровождение кода?

Question

Вчера мне пришлось вернуться на страницу, над которой я работал несколько недель назад, чтобы переделать пользовательский интерфейс.Пользовательский интерфейс состоял из элемента управления вкладками jQuery UI с 3 вкладками.Каждая вкладка имеет 3-5 элементов управления внутри и кнопку отправки, чтобы отправить только данные на вкладке.Мне пришлось реорганизовать некоторые из вкладок, удалить некоторые текстовые поля, добавить некоторые выпадающие списки, изменить некоторые поведения и даже немного поработать над проверкой на стороне клиента (которая использует проверку jQuery).Во время этого упражнения я обнаружил, что мне нужно вернуться и перепроверить каждый из моих селекторов jQuery.Некоторые остались нетронутыми, но многие из них изменились.

Мне интересно, какой шаблон дизайна (если таковой имеется) используют люди, чтобы избежать или минимизировать эффект рефакторинга или переделки веб-страницы с интенсивным использованием jQuery.Я уверен, что это не может быть просто «Поиск» + «Поиск и замена».

Answer 1

В общем, очень хорошая идея хранить ссылки на узлы, которые обычно используются.Это можно сделать в каком-то «файле сценария инициализации» или в каждом «модуле», если у вас есть модули, разделенные файлами.

Например,

var myNamespace = window.myNamespace || { };

$(document).ready(function() {
    myNamespace.nodes = {
        header:   $('#header'),
        content:  $('#overlay > .content'),
        footer:   $('#footer')
    };
});

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

// somefile.js
var myNamespace = window.myNamespace || { },
    myNodes = myNamespace.nodes;

$(document).ready(function() {
    if( myNodes ) {
        myNodes.content.animate({ top: '+=200px' }, 1000);
    }
    else {
        throw new Error('Arrrrrrr the <center> cannot hold! it is too late');
    }
});

Эта концепция также обеспечивает лучшую производительность для всего вашего веб-приложения.Запрашивая узлы только один раз, так как это все еще довольно дорогая операция DOM.

Answer 2

Я думаю об этом списке:

1. Отсутствие отслеживания HTML-элементов в селекторах, потому что, если вы покажете свое сообщение в абзаце сегодня, возможно, вы захотите показать его завтра в промежутке.
2. Использовать семантический идентификатор и классы. (семантическое именование и идентификаторы предотвращают будущие изменения этих имен, поэтому меньше изменений селектора)
3. Используйте несколько классов, а не только один длинный описательный класс. (что-то вроде тегирования. Вместо класса error-message, классы error message)
4. Используйте меньше обхода, то есть, переходя от дочернего элемента к родительскому и от этого узла к предыдущему, или к элементам типа «братья и сестры» и тому подобное. (это напрямую связано с уровнями вложенности).

Answer 3

Хорошо, одна хорошая практика, которую я использую, никогда не использует next () и prev (), а всегда комбинацию o closest () и find (). Таким образом, если вы перемещаете вещи, вам не нужно менять код jquery (в большинстве случаев).

Еще одна вещь - кэшировать селектор в переменной, если вы используете его более одного раза:

 var  myDiv = $('myDiv');

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