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

【问题标题】：jQuery design pattern for selectors to improve code maintainability?用于选择器的 jQuery 设计模式以提高代码可维护性？
【发布时间】：2011-09-29 14:39:40
【问题描述】：

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

我想知道人们使用什么设计模式（如果有的话）来避免或最小化重构或重做一个使用大量 jQuery 的网页的影响。我确定它不能只是“搜索”+“搜索和替换”。

【问题讨论】：

标签： jquery design-patterns web-applications maintainability

【解决方案1】：

我想到了这个列表：

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

【讨论】：

【解决方案2】：

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

例如

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

该概念还为您的整个 web 应用程序提供了更好的性能。通过只查询一次节点，因为这仍然是一个相当昂贵的 DOM 操作。

【讨论】：

我正在考虑这样做，但不确定这是否是一个好习惯。我认为这个答案验证了它。在我的代码中包含所有这些选择器让我感到不舒服。也许这是大多数时候使用静态语言的副作用。

【解决方案3】：

嗯，我使用的一个好的做法是从不使用 next() 和 prev()，但总是使用最接近 () 和 find() 的组合。这样，如果您四处移动，您不必更改您的 jquery 代码（大多数情况下）。

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

 var  myDiv = $('myDiv');

这可以提高性能，如果您可以更改 id，则无需搜索和替换。除此之外我无能为力。

【讨论】：