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

Question

昨天我不得不回到几周前我曾经工作的页面来重做UI.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 操作。