Как минимизировать / разместить подобные строки селектора DOM в коде jQuery?

Question

Советы по стилю кода, пожалуйста:

Я хочу предотвратить повсеместное распространение строк селектора, особенно похожих баз, по всему моему коду.

function fn1() {
  $("#formId ul.sectionClass li.statusFlag").doSomething();
  $("#formId ul.sectionClass li.otherStatusFlag").doSomeOtherThing();
  doSomethingToGroup("#formId ul.sectionClass");
  doSomethingToOtherGroup("#formId ul.otherSectionClass");
}

function doSomethingToGroup(selector) {
  $("#formId>.statusBar").html(summarize(selector));
  $(selector).doMore();
}

function classesLikeIds() {
  $("#formId .item1").doOneThing();
  $("#formId .item2").doAnotherThing();
}

...etc.

Функционально , мне удобно, мой код довольно СУХОЙ. Разделение ответственности исправно и т. Д. Но у меня все еще есть строки селектора, разбросанные по всему коду, которые сложно поддерживать и которые вызывают дефекты.

Возможное решение:

Я думал о чем-то столь же простом, как именованный массив селекторов:

AppName.Selectors = {
  form: "#formId",
  statusBar: "#formId .statusBar",
  activeItems: "#formId ul.sectionClass li.statusFlag",
  inactiveItems: "#formId ul.sectionClass li.otherStatusFlag"
}

Это кажется более понятным, и компилятор javascript может предупредить меня о многих других проблемах. Я все еще чувствую, что он довольно слабый, хотя. Если вы делаете это, но имеете объектную модель, которая делает ее более интуитивной или поддерживает дочерние отношения, пожалуйста, опубликуйте ее как решение.

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

Возможно, это плохо или противоречиво, но я стараюсь минимизировать уникальные идентификаторы в моем HTML, даже иногда используя классы, такие как идентификаторы (под идентификаторами элементов верхнего уровня). Например:

//I'll use
$("#appName form .header")
//Rather than
$("#appNameHeader")

Почему? Если в приложении 100 идентификаторов, то, по моему опыту, происходят неприятности. Два быстрых примера: 1) смешанные приложения становятся чреваты опасностью коллизий имен, 2) труднее понять влияние изменений стиля на дочерние элементы.

Что ты делаешь?

Спасибо
Shannon

Answer 1

Я бы посоветовал вам сохранить результат селектора, чтобы повысить его эффективность.

Elements = {
  form: $("#formId"),
  statusBar: Elements.form.find(".statusBar"),
  sectionClass: Elements.form.find("ul.sectionClass"),
  activeItems: Elements.sectionClass.find("li.statusFlag"),
  inactiveItems: Elements.sectionClass.find("li.otherStatusFlag")
};

, поэтому вы будете повторно использовать результаты селектора, что приведет к повышению производительности.Но это может не сработать, если у вас есть элементы, которые добавляются в DOM позже и соответствуют этим селекторам.

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

Например,

function doSomethingToGroup(elems) {
  Elements.statusBar.html(summarize(elems.selector));
  elems.doMore();
}

Вы всегда можете получить строку селектора из кэшированных результатов, используя метод selector.Elements.statusBar.selector возвращает селектор #formId .statusBar