如何在 jQuery 代码中最小化/并置相似的 DOM 选择器字符串？

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 中的唯一 ID，甚至有时使用 ID 之类的类（在顶级元素 ID 之下）。例如：

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

为什么？根据我的经验，如果一个应用程序中有 100 个 ID，就会发生不好的事情。两个简单的例子：1）混搭应用程序充满了名称冲突的危险，2）很难凭直觉了解样式更改对子元素的影响。

你是做什么的？

谢谢，
香农

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