我想在整个代码中阻止选择器字符串的泛滥分布，特别是类似的基础。

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

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

我想在整个代码中阻止选择器字符串的泛滥分布，特别是类似的基础。

可能的解决方案：

也许我的风格是问题的一部分：

1 个答案: