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

我想到了这个清单：

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

Answer 3

嗯，我使用的一个好习惯是永远不会使用next（）和prev（），但总是使用nearest（）和find（）的组合。这样，如果你移动东西，你不必更改你的jquery代码（大多数时候）。

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

 var  myDiv = $('myDiv');

这可以提高性能，如果你能够创建id，则无需搜索和替换。除此之外我无法帮助。

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

3 个答案: