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

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

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

Источник

3 ответа

Решение

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

Например

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.

Источник

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

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

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

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

 var  myDiv = $('myDiv');

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

Источник
Другие вопросы по тегам