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

Question

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

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

Answer 1

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

例如

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

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