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

代码样式建议，请：

我想防止选择器字符串，特别是类似的基，在我的代码中大量分布。 在功能上，我觉得我的代码相当枯燥。职责划分是合理的，等等。但是我的代码中仍然有一些选择器字符串，这些字符串很难维护，并且会导致缺陷。

可能的解决办法： 我考虑过一些简单的事情，比如命名选择器数组：

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）很难直觉地了解样式更改对子元素的影响。

你是做什么的？

谢谢，

---

Shannon

为了提高效率，我建议您存储选择器的结果

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

我的操作与您的建议完全相同。从枯燥的角度来看，也因为一些id是在服务器上生成的，所以在创建命名数组时需要混合一些服务器端代码。谢谢你，Jimmy。我只是编辑了一下，把它标记为“可能的解决方案”。如果你有一个让它更优雅的对象模型，请发帖。从程序员的角度来看，“maybe've”=“maybe have”，因此“maybe've to”是有效的@LS谢谢你的建议，这很有意义。我正试图建立一个小框架，包括这个概念，使其他一些事情对我来说更容易。我还刚刚开始使用jQuery模板插件，从中我绑定了缓存模板。是的，我尽量不提及任何不存在的选择器，因为它们可能会导致这样的缺陷，这也是我喜欢jQuery的“委托”功能的原因之一。此外，我可能不得不考虑习惯性地、猖獗地使用选择器缓存可能会导致内存泄漏。@shanon yes内存泄漏是您必须注意的事情，尤其是在处理大型对象时。但是您可以通过释放未使用的对象来管理，而不是依赖垃圾收集器来完成它的工作。

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