6

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

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

4

3 回答 3

3

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

例如

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 操作。

于 2011-07-06T12:57:25.743 回答
2

我想到了这个清单：

  1. 在你的选择器中没有跟踪 HTML 元素，因为如果你今天在一个段落中显示你的消息，也许你想明天在一个跨度中显示它。
  2. 使用语义 ID 和类。（语义命名和 ID 可防止将来更改这些名称，从而减少选择器更改）
  3. 使用多个类，而不仅仅是一个长描述性的类。（类似于标记。而不是有error-message类，有error message类）
  4. 使用更少的遍历，即从子节点到父节点，从这个节点到上一个节点，或者兄弟姐妹等等。（它与嵌套级别直接相关）。
于 2011-07-06T12:55:35.837 回答
1

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

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

 var  myDiv = $('myDiv');

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

于 2011-07-06T12:55:13.843 回答