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

Question

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

我想知道人们使用什么设计模式(如果有的话)来避免或最小化重构或重做jQuery使用率很高的网页的效果。我确信这不能仅仅是“搜索”+“搜索并替换”。

Answer 1

一般来说，存储常用的节点引用是一个非常好的主意。这可以在某种"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');
    }
});

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

Answer 2

我想到了这个列表：

1. 在您的选择器中没有跟踪HTML元素，因为如果您今天在段落中显示消息，那么您可能希望在明天的跨度中显示它。
2. 使用语义Id和类。(语义命名和ID可防止将来更改这些名称，从而减少选择器更改)
3. 使用多个类，而不仅仅是一个长的描述性类。(类似于标记。而不是使用error-message类，而是使用error message类)
4. 使用更少的遍历，即从子节点到父节点，从这个节点到上一个节点，或者兄弟节点和其他东西。(它与嵌套级别直接相关)。

Answer 3

嗯，我使用的一个很好的做法是永远不要使用next()和prev()，而总是使用closest()和find()的组合。这样，如果你移动东西，你不需要改变你的jquery代码(大多数时候)。

另一件事是在一个变量中缓存选择器，如果你多次使用它：

 var  myDiv = $('myDiv');

这提高了性能，如果你改变了id，你就不需要搜索和替换了。除此之外，我也帮不上忙。