用于选择器的jQuery设计模式，以提高代码的可维护性？

昨天，我不得不回到几周前的一个页面，重新制作UI。该UI由一个带有3个选项卡的jQuery UI选项卡控件组成。每个选项卡内部有3-5个控件，还有一个提交按钮，用于仅提交选项卡内的数据。我不得不重新组织一些选项卡，删除一些文本框，添加一些下拉列表，修改一些行为，甚至在客户端验证（使用jQuery验证）上做一些工作。我想，在这次练习中发现，我必须回去重新检查我的每个jQuery选择器。有些是原封不动的，但其中许多已经改变了

---

我想知道人们使用什么样的设计模式（如果有的话）来避免或最小化重构或返工jQuery使用量很大的网页的影响。我确信它不能仅仅是“搜索”+“搜索并替换”。

好吧，我使用的一个好方法是永远不要使用next（）和prev（），而总是使用最接近（）和find（）的组合。这样，如果您移动东西，您就不必更改jquery代码（大多数情况下）

另一件事是，如果多次使用选择器，则将其缓存在变量中：

 var  myDiv = $('myDiv');

这将提高性能，如果您可以保存id，则不必搜索和替换。除此之外，我无能为力

我想到了这个列表：

在选择器中没有HTML元素的轨迹，因为如果您今天在段落中显示消息，可能您希望明天在一段中显示它

使用语义Id和类。（语义命名和ID防止将来更改这些名称，从而减少选择器更改）

使用多个类，而不仅仅是一个长的描述性类。（类似于标记。使用

错误消息

类代替

错误消息

类）

使用更少的遍历，也就是说，从子节点到父节点，从这个节点到上一个节点，或者兄弟节点等等。（这与嵌套级别直接相关）

---

通常，存储常用的节点引用是一个非常好的主意。这可以在某种类型的“init脚本文件”中完成，或者在每个“模块”中完成（如果您有由文件分隔的模块）

比如说

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');
    }
});

//somefile.js
var myNamespace=window.myNamespace | |{}，
myNodes=myNamespace.nodes；
$（文档）.ready（函数（）{
if（myNodes）{
myNodes.content.animate（{top:'+=200px'}，1000）；
}
否则{
抛出新错误（'arrrrrr无法保持！太晚了'）；
}
});

---

这个概念也为您的整个webapp提供了更好的性能。只查询一次节点，因为这仍然是一个非常昂贵的DOM操作。

我曾考虑过这样做，但不确定这是否是一个好的做法。我认为这个答案是正确的。在我的代码中有这些选择器让我感到不舒服。也许这是大部分时间使用静态语言的副作用。